2012-08-07 8 views
5

Come si fa a creare un'ellisse in three.js?Three.js Ellipse

Ho guardato questo: Drawing an ellipse in THREE.js

Ma che sarebbe stato bello se qualcuno potrebbe fornire un esempio di lavoro.

Ho provato questo:

ellipse = new THREE.EllipseCurve(0,0,200,400,45,45,10); 

ma che non funziona per me. Non ho idea di cosa significano i parametri, quindi ci sto solo andando alla cieca.

modifica: viene visualizzato l'errore "definito non è una funzione" quando si tenta di creare una curva di ellisse.

edit2: Ho capito che dovevo includere Curves.js perché funzionasse, ma avere un esempio funzionante da qualche parte sarebbe ancora molto bello per me e per altre persone, dal momento che il link StackOverflow che ho incollato prima non ha un esempio.

risposta

2

Sono familiarità con Three.js, ma guardando le code i parametri sembrano essere
(Center_Xpos, Center_Ypos, Xradius, Yradius, StartAngle, EndAngle, isClockwise) quindi una ragione per la sua definizione non funziona è perché si sta impostando l'inizio e la fine angoli sia allo stesso cosa.

+0

Cool grazie ma ho dimenticato di menzionare l'errore che stavo ottenendo. – Recur

1

C'è un esempio here, e sotto è il mio esempio:

var scene = new THREE.Scene(); 
var material = new THREE.LineBasicMaterial({color:0x000000, opacity:1}); 
var ellipse = new THREE.EllipseCurve(0, 0, 1, 5, 0, 2.0 * Math.PI, false); 
var ellipsePath = new THREE.CurvePath(); 
ellipsePath.add(ellipse); 
var ellipseGeometry = ellipsePath.createPointsGeometry(100); 
ellipseGeometry.computeTangents(); 
var line = new THREE.Line(ellipseGeometry, material); 
scene.add(line); 

Avviso: questo non è un esempio completo, si dovrebbe aggiungere il codice resto come <script src="js/three.min.js"></script> se si desidera visualizzare il risultato.

+0

Il link è rotto, potresti aggiustarlo per favore? – Blubberguy22

0

Here is a complete working example.

<!doctype html> 
<html> 
<head> 
<title>example</title> 
<script src="threejs/build/three.min.js"></script> 
<script src="threejs/src/core/Curve.js"></script> 
<script src="threejs/examples/js/controls/OrbitControls.js"></script> 
</head> 

<body> 
<script> 
var parent, renderer, scene, camera, controls, pivot1, pivot2, pivot3; 

init(); 
animate(); 

function init() { 

    // info 
    info = document.createElement('div'); 
    info.style.position = 'absolute'; 
    info.style.top = '30px'; 
    info.style.width = '100%'; 
    info.style.textAlign = 'center'; 
    info.style.color = '#fff'; 
    info.style.fontWeight = 'bold'; 
    info.style.backgroundColor = 'transparent'; 
    info.style.zIndex = '1'; 
    info.style.fontFamily = 'Monospace'; 
    info.innerHTML = 'Drag your cursor to rotate camera'; 
    document.body.appendChild(info); 

    // renderer 
    renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    renderer.physicallyBasedShading = true; 
    document.body.appendChild(renderer.domElement); 

    // scene 
    scene = new THREE.Scene(); 

    // camera 
    camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 0.1, 100); 
    camera.position.set(20, 20, 20); 

    // controls 
    controls = new THREE.OrbitControls(camera); 

    // axes 
    scene.add(new THREE.AxisHelper(20)); 



    var material = new THREE.LineBasicMaterial({color:0x000000, opacity:1}); 
    var ellipse = new THREE.EllipseCurve(0, 0, 1, 4, 0, 2.0 * Math.PI, false); 
    var ellipsePath = new THREE.CurvePath(); 
    ellipsePath.add(ellipse); 
    var ellipseGeometry = ellipsePath.createPointsGeometry(100); 
    ellipseGeometry.computeTangents(); 
    var line = new THREE.Line(ellipseGeometry, material); 
    scene.add(line); 
} 


function animate() { 
    requestAnimationFrame(animate); 
    controls.update(); 
    renderer.render(scene, camera); 

} 

</script> 
</body> 
</html> 
+0

completo nero. – clankill3r