three.js の座標を確認する方法
AxisHelperを Scene に追加すると座標軸が表示されます。
x 軸は赤
y 軸は緑
z 軸は青
普通、数学だと z 軸が高さですが、three.js では y 軸が高さなっています。
ソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<html> <head> <script type="text/javascript" src="libs/three.min.js"></script> </head> <body> <div id="WebGL-area"></div> <script type="text/javascript"> function init() { var scene = new THREE.Scene(); // 座標軸を表示 var axes = new THREE.AxisHelper(25); scene.add(axes); var camera = new THREE.PerspectiveCamera(45, 1.5, 0.1, 1000); camera.position.set(30, 45, 30); camera.lookAt(scene.position); var renderer = new THREE.WebGLRenderer(); renderer.setSize(300, 200); document.getElementById("WebGL-area").appendChild(renderer.domElement); renderer.render(scene, camera); } window.onload = init </script> </body> </html> |
AxisHelper の引数は線の長さです。（デフォルトは 1）
物体を置いて確認
座標上に物体を置いて確認してみます。
物体の位置は x = 5、y = 10、z = 15 です。
クリックするとデモ画面へ移動します
ソース
カメラの移動に OrbitControls を使っています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<html> <head> <script type="text/javascript" src="libs/three.min.js"></script> <script type="text/javascript" src="libs/OrbitControls.js"></script> </head> <body> <div id="WebGL-area"></div> <script type="text/javascript"> function init() { var scene = new THREE.Scene(); // 座標軸を表示 var axes = new THREE.AxisHelper(25); scene.add(axes); // 物体 var sphere = new THREE.Mesh(new THREE.SphereGeometry(2), new THREE.MeshBasicMaterial({color: 0xff00ff, wireframe : true})); sphere.position.set(5, 10, 15); scene.add(sphere); var camera = new THREE.PerspectiveCamera(45, 1.5, 0.1, 1000); camera.position.set(30, 45, 30); camera.lookAt(scene.position); var controls = new THREE.OrbitControls(camera); var renderer = new THREE.WebGLRenderer(); renderer.setSize(300, 200); document.getElementById("WebGL-area").appendChild(renderer.domElement); render(); function render() { controls.update(); requestAnimationFrame(render); renderer.render(scene, camera); } } window.onload = init </script> </body> </html> |