Javascript 三个人画不同的线

我们使用

three.js

绘制一些地图。在地图上应该有一些线（如一些边界、等值线）。所以我们知道如何画虚线。但我也想用这种模式画线。那么，有什么更好的方法可以做到这一点呢？纹理

UPD： 地图将是3D的（但线条不是），你可以旋转它，缩放它等等。

---

它使用WebGl渲染器。

向您展示实现所有这些所需的具体操作将涵盖几个教程，因此我将向您链接一些教程

你可以从这里开始：。。。这将为您提供一个基本页面和一个画布来开始绘制，以及关于如何绘制某些形状的各种说明（这将是您最困难的部分；对于这些不同的形状，需要许多不同的绘制调用，并且在地图上正确定位它们可能会有些困难）。我建议您创建函数来绘制所需的各种基本形状，并且您将需要这些函数中的大量2D数学，这些函数本身可能值得这么做

若要使虚线与示例图片中的虚线相似，这是非常有用的。任何比这更高级的东西你都必须自己画，在画布上结合各种形状

另外请注意，您需要使用宽度和高度为二次幂的画布大小，因此在将其用作纹理之前，请使用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绘图进行排序，因为这是最难的部分。

留下了很多问题。。。“地图”将如何使用，你将放大近距离，它将是2d还是3d？CanvasRenderer还是WebGLRenderer？@Leeft噢，我更新了这个问题，但仍然不太清楚你到底打算实现什么，尽管听起来你只有一个可行的选择。你在画布上画画，并将其用作纹理，在GPU内存上可能有点昂贵，但是你在画更粗的线条或你问题中提到的某些图案时不会有什么困难。@Leeft我想通过在天气图上进行试验来达到这样的效果，这听起来确实像是在画布上画，而使用它作为纹理是一种方法。