5

three.jsで楕円を作成するにはどうすればよいですか？

私はこれを見ました： THREE.jsで楕円を描く

しかし、誰かが実用的な例を提供できれば、それは素晴らしいことです。

私はこれを試しました：

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

しかし、それは私にはうまくいきません。パラメータの意味がわからないので、やみくもにやっています。

編集：楕円曲線を作成しようとすると、「定義された関数ではありません」というエラーが発生します。

edit2：動作させるには、Curves.jsを含める必要があることがわかりましたが、以前に貼り付けたstackoverflowリンクには例がないため、どこかに動作する例があると、私や他の人にとっては本当にいいでしょう。

4

4 に答える 4

2

私はTHREE.jsに慣れていませんが、コードを見ると、パラメーターが機能していないように見え
(Center_Xpos, Center_Ypos, Xradius, Yradius, StartAngle, EndAngle, isClockwise) ます。これは、開始角度と終了角度の両方を同じものに設定しているためです。

于 2012-08-07T17:55:16.630 に答える
1

ここに例があり、以下は私の例です:

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>。結果を表示したい場合は、残りのコードを追加する必要があります。

于 2013-05-31T07:51:24.380 に答える
0

これは完全な作業例です。

<!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>
于 2013-12-28T02:37:01.447 に答える