Three.js로 원을 그립니다.

Question

this 웹 사이트의 궤도 패턴과 매우 유사한 원을 그리려합니다. 순수 WebGL 대신 Three.js를 사용하고 싶습니다.

Answer 1

3.js r50은 CircleGeometry을 더했다. WebGL Geometries example에 (얼굴은 있지만) 볼 수 있습니다.

형상의 첫 번째 꼭지점은 원의 중심에 작성됩니다 (r84에서는 CircleGeometry.js line 71, r65에서는 CircleGeometry.js line 18 참조). "전체 Pac-Man"또는 "uninformative 원형 차트 "모양. 아, 그리고 LineBasicMaterial/LineDashedMaterial 이외의 자료를 사용하려는 경우 필요합니다.

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

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

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

PS :

나는 다음과 같은 코드가 모두 R60 & R65에서 작동하는 것을 확인했습니다 https://threejs.org/docs/#api/geometries/CircleGeometry

Answer 2

색깔이있는 선을 그리는 방법을 보려면 three.js 샘플 http://mrdoob.github.com/three.js/examples/webgl_lines_colors.html을 참조하십시오.

당신이 인용 한 것과 같은 원형은 작은 직선 세그먼트의 큰 #으로 그려집니다. (사실, 당신이 보여주는 것들은 타원이 될 수 있습니다.)

Answer 3

나는 Mr.Doob이 참조하는 코드를 this github post에 사용했습니다.

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 4

최신 버전의 3js에서 API가 약간 변경되었습니다.

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 개의 세그먼트가 작은 원에 대해 매우 매끄 럽습니다. 당신과 연결되어있는 사이트의 궤도와 같은 궤도의 경우 몇백 개를 가지고 싶을 수도 있습니다.

Vector3 생성자 내의 세 구성 요소의 순서를 수정하여 원의 방향을 선택합니다. 여기에 주어진 바와 같이 원은 x/y 평면에 정렬됩니다.

Answer 5

이 예에 다음 "문서는"지금은 좋은 CircleGeometry 대화 예제를 포함 three.js를 문서 :이

var material = new THREE.MeshBasicMaterial({ 
    color: 0x0000ff 
}); 

var radius = 5; 
var segments = 32; //<-- Increase or decrease for more resolution I guess 

var circleGeometry = new THREE.CircleGeometry(radius, segments);    
var circle = new THREE.Mesh(circleGeometry, material); 
scene.add(circle); 

Answer 6

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; 
}