javascript - Three.jsで丸（陰影なし）を描く

Question

このウェブサイトの軌道パターンに非常によく似た円を描こうとしています。純粋な WebGL の代わりに Three.js を使用したいと考えています。

Answer 1

API は、threejs の新しいバージョンでわずかに変更されました。

var segmentCount = 32,
    radius = 100,
    geometry = new THREE.Geometry(),
    material = new THREE.LineBasicMaterial({ color: 0xFFFFFF });

for (var i = 0; i <= segmentCount; i++) {
    var theta = (i / segmentCount) * Math.PI * 2;
    geometry.vertices.push(
        new THREE.Vector3(
            Math.cos(theta) * radius,
            Math.sin(theta) * radius,
            0));            
}

scene.add(new THREE.Line(geometry, material));

segmentCountシーンの必要に応じて、円をより滑らかにしたりギザギザにしたりします。小さな円の場合、32 セグメントは非常にスムーズです。リンク先のサイトのような軌道の場合、数百が必要になる場合があります。

コンストラクター内の 3 つのコンポーネントの順序を変更してVector3、円の方向を選択します。ここで指定されているように、円は x/y 平面に配置されます。

Answer 2

この github postで Mr.doob が参照しているコードを使用しました。

var resolution = 100;
var amplitude = 100;
var size = 360 / resolution;

var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial( { color: 0xFFFFFF, opacity: 1.0} );
for(var i = 0; i <= resolution; i++) {
    var segment = ( i * size ) * Math.PI / 180;
    geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( Math.cos( segment ) * amplitude, 0, Math.sin( segment ) * amplitude ) ) );         
}

var line = new THREE.Line( geometry, material );
scene.add(line);

Answer 3

色付きの線を描画する方法については、three.jsサンプルhttp://mrdoob.github.com/three.js/examples/webgl_lines_colors.htmlを参照してください。

あなたが引用するような円は、小さな直線セグメントの大きな数として描かれます。（実際、表示するのは省略記号の場合があります）

Answer 4

var getStuffDashCircle2 = function () {

var segment = 100, radius = 100;

var lineGeometry = new THREE.Geometry();
var vertArray = lineGeometry.vertices;
var angle = 2 * Math.PI / segment;
for (var i = 0; i < segment; i++) {
    var x = radius * Math.cos(angle * i);
    var y = radius * Math.sin(angle * i);
    vertArray.push(new THREE.Vector3(x, y, 0));
}
lineGeometry.computeLineDistances();
var lineMaterial = new THREE.LineDashedMaterial({ color: 0x00cc00, dashSize: 4, gapSize: 2 });
var circle = new THREE.Line(lineGeometry, lineMaterial);

circle.rotation.x = Math.PI / 2;
circle.position.y = cylinderParam.trackHeight+20;
return   circle;
}