Threejs繪製不同的線條

Question

我們使用three.js繪製一些地圖。在地圖上應該有一些行（如一些邊界，等值線）。所以我們知道如何繪製虛線。但我也想用這種類型的圖案畫線。那麼更好的方法是什麼？紋理？

UPD： 地圖的會是3D（但系都沒有），你可以旋轉它，並放大等 它採用WebGL的渲染器。

Answer 1

向您展示如何完成所有這些工作，將涵蓋幾個教程本身，因此我會將您鏈接到一些教程。

你可以從這裏開始：http://www.html5canvastutorials.com/tutorials/html5-canvas-element ...這會給你一個基本頁面和一個畫布開始繪製，以及如何繪製一些形狀的各種指令（這將是你最難的部分;對於這些不同的形狀需要許多不同的繪圖調用，並且將它們正確放置在地圖上可能有點困難）。我建議你創建一些函數來繪製你需要的各種基本形狀，並且你需要在這些函數中使用大量的2D數學，這些數學也許是值得自己去解決的。

要使您的示例圖片中出現虛線，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圖紙，因爲這是困難的部分。