Question

如何在three.js中创建椭圆？

但如果有人能提供一个有效的例子，那将会很酷。

我试过这个：

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

但这不适合我。我不知道参数是什么意思所以我只是盲目地去做。

编辑：当我尝试创建椭圆曲线时，我收到错误“已定义不是函数”。

edit2：弄清楚我必须包含Curves.js才能工作但是在某个地方有一个工作示例对我和其他人来说仍然非常好，因为我之前粘贴的stackoverflow链接没有示例。

Answer 1

我对THREE.js不熟悉，但查看code参数似乎是 (Center_Xpos, Center_Ypos, Xradius, Yradius, StartAngle, EndAngle, isClockwise) 所以你的定义不起作用的原因是因为你将开始和结束角度都设置为相同的东西。

Answer 2

有一个示例here，以下是我的示例：

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>。

Answer 3

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>

Answer 4

您可以直接设置圆形几何并将其比例设置为：object.scale.setY（2.5）; 无需使用任何形状或曲线即可轻松地形成椭圆形。

Three.js Ellipse

4 个答案: