Geek asks and answers

Ellipse three.

How to make ellipse creation in three.js file?

I looked at it: ellipse drawing in THREE.js

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

I tried this:

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

but it does not work for me. I have no idea what the options mean, so I'm just blindly thinking it over.

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

edit2: I figured I had to include Curves.js in order to work, but having a working example somewhere it would still be very good for me and other people, starting the StackOverflow link I inserted an example not earlier

+5
source share
3 answers

THREE.js, , code, , ,   (Center_Xpos, Center_Ypos, Xradius, Yradius, StartAngle, EndAngle, isClockwise) , , , .

+2

- :

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

: , , <script src="js/three.min.js"></script>, .

+1

The following 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
source

More articles:


All Articles