三个J画出不同的线条答案

【问题标题】：Threejs draw diiferent lines三个J画出不同的线条
【发布时间】：2014-07-18 20:32:44
【问题描述】：

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

更新：地图将是 3D 的（但线条不是），您可以旋转和缩放等。它使用 WebGl 渲染器。

【问题讨论】：

留下很多问题......“地图”将如何使用，您要放大近视，是 2d 还是 3d？ CanvasRenderer 还是 WebGLRenderer？
@Leeft 哦，我更新了问题
虽然听起来你真的只有一个可行的选择，但仍然不是很清楚你打算实现什么。您在画布上绘制并将其用作纹理，在 GPU 内存上可能有点贵，但您不会像问题中那样绘制更粗的线条或某些图案。
@Leeft 我想在天气图上使用 trianlges 3.bp.blogspot.com/-BUyq3EDfyIE/T6Gez5LJ6yI/AAAAAAAABpY/…
听起来确实像是在画布上绘制并将其用作纹理是要走的路。

【解决方案1】：

向您确切展示实现所有这些需要做的事情将涵盖几个教程，所以我将给您链接一些。

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

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

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

一旦你按照你想要的方式渲染你的画布，将它应用到三个.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 绘图进行排序，因为这是最难的部分。

【讨论】：