問題描述

我正在嘗試繪制一個與 this 網站上的軌道圖案非常相似的圓圈.我想使用 Three.js 而不是純 WebGL.

I am trying to draw a circle very similar to the orbital patterns on this website. I would like to use Three.js instead of pure WebGL.

推薦答案

Three.js r50 添加了CircleGeometry.在 WebGL 幾何示例中可以看到它(盡管有一張臉).

Three.js r50 added CircleGeometry. It can be seen (albeit with a face) in the WebGL Geometries example.

幾何中的第一個頂點創建在圓的中心(在 r84 中，請參閱 CircleGeometry.js 第 71 行，在 r65 中，請參閱 CircleGeometry.js 第 18 行)，如果你想要完整的吃豆人"或無信息的餅圖"外觀，這很不錯.哦，如果您要使用除 LineBasicMaterial/LineDashedMaterial 之外的任何材料，這似乎是必要的.

The first vertex in the geometry is created at the center of the circle (in r84, see CircleGeometry.js line 71, in r65, see CircleGeometry.js line 18), which is nifty if you are going for that "full Pac-Man" or "uninformative pie chart" look. Oh, and it appears to be necessary if you are going to use any material aside from LineBasicMaterial / LineDashedMaterial.

我已驗證以下代碼在 r60 和r65:

I've verified that the following code works in both r60 & r65:

var radius   = 100,
    segments = 64,
    material = new THREE.LineBasicMaterial( { color: 0x0000ff } ),
    geometry = new THREE.CircleGeometry( radius, segments );

// Remove center vertex
geometry.vertices.shift();

// Non closed circle with one open segment:
scene.add( new THREE.Line( geometry, material ) );

// To get a closed circle use LineLoop instead (see also @jackrugile his comment):
scene.add( new THREE.LineLoop( geometry, material ) );

PS:文檔"現在包含一個不錯的 CircleGeometry 交互式示例:https://threejs.org/docs/#api/geometries/CircleGeometry

PS: The "docs" now include a nice CircleGeometry interactive example: https://threejs.org/docs/#api/geometries/CircleGeometry

這篇關于用 Three.js 畫一個圓(沒有陰影)的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！