Three.js Ellipse | 易学教程

问题

How does one go about creating an ellipse in three.js?

I've looked at this: Drawing an ellipse in THREE.js

But it would be cool if someone could provide a working example.

I've tried this:

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

but that's not working for me. I have no idea what the parameters mean so I'm just blindly going about it.

edit: I am getting the error "defined is not a function" when I try to create an ellipse curve.

edit2: Figured out I had to include Curves.js for it to work but having a working example somewhere would still be really nice for me and other people since the stackoverflow link I pasted earlier doesn't have an example.

回答1:

I am unfamiliar with THREE.js, but looking at the code the parameters seem to be
(Center_Xpos, Center_Ypos, Xradius, Yradius, StartAngle, EndAngle, isClockwise) so a reason your definition isn't working is because you're setting the start and end angles both to the same thing.

回答2:

There is an example here, and below is my example:

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

Notice: this is not a complete example, you should add the rest code like <script src="js/three.min.js"></script> if you want to view the result.

回答3:

You can directly set a circle geometry and set its scale as: object.scale.setY(2.5); This could easily form an oval without using any shape or curve.

回答4:

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>

来源：https://stackoverflow.com/questions/11851276/three-js-ellipse

标签

three.js