javascript - 三个J画不同的线

Question

我们使用third.js来绘制一些 map 。在 map 上应该有一些线(如一些边界、等值线)。所以我们知道如何绘制虚线。但我也想用这种类型的图案画线。那么什么是更好的方法呢？纹理？

更新: map 将是 3D 的(但线条不是)，您可以旋转它并缩放它等。它使用WebGl渲染器。

Answer 1

准确地向您展示实现这一切需要做什么，这本身就涵盖了多个教程，因此我将向您提供一些教程的链接。

您可以从这里开始:http://www.html5canvastutorials.com/tutorials/html5-canvas-element ...这将为您提供一个基本页面和一个开始绘图的 Canvas ，以及有关如何绘制某些形状的各种说明(这对您来说将是最难的部分；它需要对这些形状进行许多不同的绘制调用各种形状，在 map 上正确定位它们可能会有些困难)。我建议您创建函数来绘制所需的各种基本形状，并且在这些函数中您将需要大量的二维数学，这些函数本身可能值得提出这样的问题。

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

另请注意，您需要使用宽度和高度为 2 的幂的 Canvas 尺寸，因此在将其用作纹理之前，请使用 512x512 或 1024x1024 等尺寸。

一旦你按照你想要的方式渲染了 Canvas ，将其应用到 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 );

如果您不首先将要在 Canvas 上绘制的 map 复制到 Canvas 上，则必须使用更高级的 Material ，因为您只能将有限的纹理应用到单个表面。但是，首先对 2D 绘图进行排序，因为这是困难的部分。