Three.js Ellipse

¿Cómo se hace para crear una elipse en three.js?Three.js Ellipse

He mirado en esto: Drawing an ellipse in THREE.js

pero sería genial si alguien podría proporcionar un ejemplo de trabajo.

He intentado esto:

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

pero que no funciona para mí. No tengo idea de lo que significan los parámetros, así que estoy yendo ciegamente sobre eso.

editar: Estoy obteniendo el error "definido no es una función" cuando intento crear una curva de elipse.

edit2: Me di cuenta que tenía que incluir Curves.js para que funcionara, pero tener un ejemplo de trabajo en algún lugar sería realmente bueno para mí y otras personas ya que el enlace stackoverflow que pegué anteriormente no tiene un ejemplo.

Fuente

2012-08-07 Recur

no estoy familiarizado con Three.js, pero mirando las code los parámetros parecen ser
(Center_Xpos, Center_Ypos, Xradius, Yradius, StartAngle, EndAngle, isClockwise) por lo que una razón por la que su definición no está funcionando se debe a que se está configurando el inicio y el final ángulos tanto a la misma cosa.

Fuente

2012-08-07 17:55:16 SamYonnou

Gracias, pero se olvidó de mencionar el error que estaba recibiendo. – Recur

Hay un ejemplo here, y por debajo es mi ejemplo:

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

Aviso: este no es un ejemplo completo, debe agregar el código de reposo como <script src="js/three.min.js"></script> si desea ver el resultado.

Fuente

2013-05-31 07:51:24 openxxs

El enlace está roto, ¿podría arreglarlo por favor? – Blubberguy22

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>

Fuente

2013-12-28 02:37:01

completo negro. – clankill3r

Respuesta

Cuestiones relacionadas