थ्री.जेएस

Question

के साथ एक सर्कल (छायांकित) ड्रा करें, मैं this वेबसाइट पर कक्षीय पैटर्न के समान एक सर्कल खींचने की कोशिश कर रहा हूं। मैं शुद्ध वेबजीएल के बजाय Three.js का उपयोग करना चाहता हूं।

Answer 1

Three.js r50 CircleGeometry जोड़ा गया। WebGL Geometries example में इसे देखा जा सकता है (हालांकि चेहरे के साथ)।

ज्यामिति में पहली शिखर वृत्त के केंद्र में बनाई गई है जो गंधा है (r84 में, CircleGeometry.js line 71, r65 में देखते हैं, CircleGeometry.js line 18 देखें), अगर आपको लगता है कि "पूर्ण पीएसी मैन" या "uninformative के लिए जा रहे हैं पाई चार्ट "देखो। ओह, और यह आवश्यक है यदि आप LineBasicMaterial/LineDashedMaterial से किसी भी सामग्री का उपयोग करने जा रहे हैं।

मैं सत्यापित किया है कि निम्नलिखित कोड दोनों 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(); 

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

पुनश्च: https://threejs.org/docs/#api/geometries/CircleGeometry

Answer 2

रंगीन रेखाओं को आकर्षित करने के तरीके को देखने के लिए तीन.जेएस नमूना http://mrdoob.github.com/three.js/examples/webgl_lines_colors.html देखें।

आपके द्वारा उद्धृत किए गए जैसे सर्कल को बड़े सीधी सेगमेंट के बड़े # के रूप में खींचा जाता है। (असल में, जो आप दिखाते हैं वे लंबित हो सकते हैं)

Answer 3

मैंने कोड का उपयोग किया जो श्रीडोब संदर्भ 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

एपीआई तीनjs के नए संस्करणों में थोड़ा बदल गया।

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