three.jsで楕円を作成するにはどうすればよいですか？Three.js Ellipse
私はこれを見てきました： Drawing an ellipse in THREE.js
誰かが作業例を提供することができれば、それはクールになります。
ellipse = new THREE.EllipseCurve(0,0,200,400,45,45,10);
をそれは私のために働いていない：
私はこれを試してみました。私はパラメータが何を意味するのか分からないので、私はそれについて盲目的に行っています。
編集：楕円曲線を作成しようとすると、"関数が定義されていません"というエラーが表示されます。
edit2：私が以前に貼り付けたstackoverflowリンクには例がないので、動作するためにはCurves.jsを含める必要がありました。
私はTHREE.jsに慣れていないですが、パラメータが
(Center_Xpos, Center_Ypos, Xradius, Yradius, StartAngle, EndAngle, isClockwise) ように見えるcodeを見て、あなたが開始と終了の同じの両方に角度を設定しているので、ので、あなたの定義が機能していない理由は、もの。
あり例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>のような残りのコードを追加する必要があります。
リンクが壊れています。修正できますか？ – Blubberguy22
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>
完全な黒。 – clankill3r
すごく感謝していますが、私が得ていたエラーを忘れました。 – Recur