用Three.js画一个圆圈（没有阴影） [英] Draw a circle (not shaded) with Three.js

问题描述

我想在这个网站上绘制一个非常类似于轨道模式的圆圈。我想使用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 Geometries示例中看到（尽管有脸）。

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：docs现在包含一个不错的 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画一个圆圈（没有阴影）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！