Threejs绘制不同的线条

Question

我们使用three.js绘制一些地图。在地图上应该有一些线条（如一些边界，等值线）。所以我们知道如何绘制虚线。但我也希望用这种类型的图案绘制线条。那么最好的方法是什么呢？纹理化？

UPD： 地图将是3D（但线条不是），你可以旋转它并缩放它等。 它使用WebGl渲染器。

Answer 1

向您展示为实现这一切需要做些什么，本身就会涵盖几个教程，所以我会将您链接到一些教程。

你可以从这里开始：http://www.html5canvastutorials.com/tutorials/html5-canvas-element ...它会给你一个基本页面和一个开始绘图的画布，以及关于如何绘制一些形状的各种说明（这将是对你来说最困难的部分;对于这些不同的形状，它需要许多不同的绘制调用，并且在你的地图上正确定位它们可能有点困难）。我建议你创建函数来绘制你需要的各种基本形状，你需要在这些函数中进行大量的二维数学运算，这些函数可能是值得自己提出的问题。

要像示例图片中那样制作虚线，http://www.rgraph.net/blog/2013/january/html5-canvas-dashed-lines.html很有用。比你自己画的更高级的东西，在画布上组合各种形状。

另请注意，您希望使用宽度和高度为2的幂的画布大小，因此在将其用作纹理之前，请使用512x512或1024x1024之类的内容。

按照您希望的方式渲染画布后，将其应用于three.js场景中的对象非常简单：

var texture = new THREE.Texture( canvas );
var material = new THREE.MeshBasicMaterial({ map: texture });
var geometry = new THREE.PlaneGeometry( 10, 10 );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );

如果您不首先将要绘制的地图复制到画布上，则必须使用更高级的材质，因为您只能将有限的纹理应用于单个曲面。但是，首先将您的2D绘图排序，因为这是困难的部分。