Three.js Ellipse

如何在three.js中創建一個橢圓？Three.js Ellipse

但它會很酷，如果有人可以提供一個工作的例子。

我已經試過這樣：

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

但是這不是爲我工作。我不知道參數是什麼意思，所以我只是盲目地去做。

編輯：我得到的錯誤「定義不是函數」當我嘗試創建一個橢圓曲線。

edit2：想通了，我不得不包括Curves.js的工作，但有一個工作的例子，對我和其他人來說仍然非常好，因爲我之前粘貼的stackoverflow鏈接沒有示例。

來源

2012-08-07 Recur

我不熟悉three.js所，但看code參數似乎
(Center_Xpos, Center_Ypos, Xradius, Yradius, StartAngle, EndAngle, isClockwise) 所以你的定義是不工作的一個原因是因爲你設置開始和結束的角度都相同的事情。

來源

2012-08-07 17:55:16 SamYonnou

很感謝，但忘了提及我得到的錯誤。 – Recur 2012-08-07 18:21:26

有一個例子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>其餘代碼。

來源

2013-05-31 07:51:24 openxxs

鏈接已損壞，請問您是否可以修復它？ – Blubberguy22 2016-06-02 16:55:49

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>

來源

2013-12-28 02:37:01

全黑。 – clankill3r 2017-02-07 15:19:41

回答

相關問題