three.jsは、右手座標系でY軸上向きだよ！ :cake:
OrbitControls で、ぐるんぐるん動かせるようにしてみたよ。 :sun:
X軸(正値)は赤色、Y軸(正値)は緑色、Z軸(正値)は青色。ライトの位置(方角)は黄色。オブジェクト正面に黄色の矩形を配置。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>座標系 (2) | three.js</title>
<script src="js/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/detector.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
html { overflow:hidden; }
body { margin:0; padding:0; }
</style>
</head>
<body style="background-color:#000000">
<script>
var scene, camera, renderer, stats;
var axis, plane, cube, sphere, front;
var light;
var controller;
var radius = 500;
var radian = Math.PI/180;
var center = new THREE.Object3D();
window.onload = init;
function init() {
if (!Detector.webgl) Detector.addGetWebGLMessage();
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);
scene.add(camera);
light = new THREE.DirectionalLight(0xCCCCCC);
scene.add(light);
controller = new THREE.OrbitControls(camera);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
setup();
initialize();
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "fixed";
stats.domElement.style.right = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
render();
window.addEventListener("resize", resize, false);
}
function setup() {
renderer.setClearColor(0x000000, 1);
camera.position.z = –radius;
light.position.set(400, 500, –600);
}
function initialize() {
axis = new THREE.Group();
scene.add(axis);
var xgeometry0 = new THREE.Geometry();
xgeometry0.vertices.push(new THREE.Vector3(–240, 0, 0), new THREE.Vector3(0, 0, 0));
var xmaterial0 = new THREE.LineBasicMaterial({color: 0xFFFFFF, linewidth: 1.6});
var xaxis0 = new THREE.Line(xgeometry0, xmaterial0);
axis.add(xaxis0);
var xgeometry1 = new THREE.Geometry();
xgeometry1.vertices.push(new THREE.Vector3(0, 0, 0), new THREE.Vector3(240, 0, 0));
var xmaterial1 = new THREE.LineBasicMaterial({color: 0xFF0000, linewidth: 2.4});
var xaxis1 = new THREE.Line(xgeometry1, xmaterial1);
axis.add(xaxis1);
var ygeometry0 = new THREE.Geometry();
ygeometry0.vertices.push(new THREE.Vector3(0, –240, 0), new THREE.Vector3(0, 0, 0));
var ymaterial0 = new THREE.LineBasicMaterial({color: 0xFFFFFF, linewidth: 1.6});
var yaxis0 = new THREE.Line(ygeometry0, ymaterial0);
axis.add(yaxis0);
var ygeometry1 = new THREE.Geometry();
ygeometry1.vertices.push(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 240, 0));
var ymaterial1 = new THREE.LineBasicMaterial({color: 0x00FF00, linewidth: 2.4});
var yaxis1 = new THREE.Line(ygeometry1, ymaterial1);
axis.add(yaxis1);
var zgeometry0 = new THREE.Geometry();
zgeometry0.vertices.push(new THREE.Vector3(0, 0, –240), new THREE.Vector3(0, 0, 0));
var zmaterial0 = new THREE.LineBasicMaterial({color: 0xFFFFFF, linewidth: 1.6});
var zaxis0 = new THREE.Line(zgeometry0, zmaterial0);
axis.add(zaxis0);
var zgeometry1 = new THREE.Geometry();
zgeometry1.vertices.push(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 240));
var zmaterial1 = new THREE.LineBasicMaterial({color: 0x0000FF, linewidth: 2.4});
var zaxis1 = new THREE.Line(zgeometry1, zmaterial1);
axis.add(zaxis1);
var pgeometry = new THREE.PlaneGeometry(360, 360, 1, 1);
var pmaterial = new THREE.MeshLambertMaterial({color: [side: THREE.DoubleSide});
pmaterial.color.set(0xFFFFFF);
pmaterial.emissive.set(0x333333);
pmaterial.transparent = true;
pmaterial.opacity = 0.8;
plane = new THREE.Mesh(pgeometry, pmaterial);
scene.add(plane);
plane.rotation.x = 90*radian;
var cgeometry = new THREE.BoxGeometry(80, 80, 80, 1, 1, 1);
var cmaterial = new THREE.MeshLambertMaterial();
cmaterial.color.set(0xFFFFFF);
cmaterial.emissive.set(0x666666);
cube = new THREE.Mesh(cgeometry, cmaterial);
scene.add(cube);
var sgeometry = new THREE.SphereGeometry(4, 10, 10);
var smaterial = new THREE.MeshBasicMaterial();
smaterial.color.set(0xFFFF00);
sphere = new THREE.Mesh(sgeometry, smaterial);
scene.add(sphere);
sphere.position.set(80, 100, –120);
var geometry = new THREE.PlaneGeometry(40, 32, 1, 1);
var material = new THREE.MeshBasicMaterial();
material.color.set(0xFFFF00);
material.transparent = true;
material.opacity = 0.6;
front = new THREE.Mesh(geometry, material);
scene.add(front);
front.position.z = – 250;
}
function render() {
requestAnimationFrame(render);
controller.update();
camera.lookAt(center.position);
renderer.render(scene, camera);
stats.update();
}
function resize(event) {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>座標系 (2) | three.js</title>
<script src="js/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/detector.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
html { overflow:hidden; }
body { margin:0; padding:0; }
</style>
</head>
<body style="background-color:#000000">
<script>
var scene, camera, renderer, stats;
var axis, plane, cube, sphere, front;
var light;
var controller;
var radius = 500;
var radian = Math.PI/180;
var center = new THREE.Object3D();
window.onload = init;
function init() {
if (!Detector.webgl) Detector.addGetWebGLMessage();
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);
scene.add(camera);
light = new THREE.DirectionalLight(0xCCCCCC);
scene.add(light);
controller = new THREE.OrbitControls(camera);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
setup();
initialize();
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "fixed";
stats.domElement.style.right = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
render();
window.addEventListener("resize", resize, false);
}
function setup() {
renderer.setClearColor(0x000000, 1);
camera.position.z = –radius;
light.position.set(400, 500, –600);
}
function initialize() {
axis = new THREE.Group();
scene.add(axis);
var xgeometry0 = new THREE.Geometry();
xgeometry0.vertices.push(new THREE.Vector3(–240, 0, 0), new THREE.Vector3(0, 0, 0));
var xmaterial0 = new THREE.LineBasicMaterial({color: 0xFFFFFF, linewidth: 1.6});
var xaxis0 = new THREE.Line(xgeometry0, xmaterial0);
axis.add(xaxis0);
var xgeometry1 = new THREE.Geometry();
xgeometry1.vertices.push(new THREE.Vector3(0, 0, 0), new THREE.Vector3(240, 0, 0));
var xmaterial1 = new THREE.LineBasicMaterial({color: 0xFF0000, linewidth: 2.4});
var xaxis1 = new THREE.Line(xgeometry1, xmaterial1);
axis.add(xaxis1);
var ygeometry0 = new THREE.Geometry();
ygeometry0.vertices.push(new THREE.Vector3(0, –240, 0), new THREE.Vector3(0, 0, 0));
var ymaterial0 = new THREE.LineBasicMaterial({color: 0xFFFFFF, linewidth: 1.6});
var yaxis0 = new THREE.Line(ygeometry0, ymaterial0);
axis.add(yaxis0);
var ygeometry1 = new THREE.Geometry();
ygeometry1.vertices.push(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 240, 0));
var ymaterial1 = new THREE.LineBasicMaterial({color: 0x00FF00, linewidth: 2.4});
var yaxis1 = new THREE.Line(ygeometry1, ymaterial1);
axis.add(yaxis1);
var zgeometry0 = new THREE.Geometry();
zgeometry0.vertices.push(new THREE.Vector3(0, 0, –240), new THREE.Vector3(0, 0, 0));
var zmaterial0 = new THREE.LineBasicMaterial({color: 0xFFFFFF, linewidth: 1.6});
var zaxis0 = new THREE.Line(zgeometry0, zmaterial0);
axis.add(zaxis0);
var zgeometry1 = new THREE.Geometry();
zgeometry1.vertices.push(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 240));
var zmaterial1 = new THREE.LineBasicMaterial({color: 0x0000FF, linewidth: 2.4});
var zaxis1 = new THREE.Line(zgeometry1, zmaterial1);
axis.add(zaxis1);
var pgeometry = new THREE.PlaneGeometry(360, 360, 1, 1);
var pmaterial = new THREE.MeshLambertMaterial({color: [side: THREE.DoubleSide});
pmaterial.color.set(0xFFFFFF);
pmaterial.emissive.set(0x333333);
pmaterial.transparent = true;
pmaterial.opacity = 0.8;
plane = new THREE.Mesh(pgeometry, pmaterial);
scene.add(plane);
plane.rotation.x = 90*radian;
var cgeometry = new THREE.BoxGeometry(80, 80, 80, 1, 1, 1);
var cmaterial = new THREE.MeshLambertMaterial();
cmaterial.color.set(0xFFFFFF);
cmaterial.emissive.set(0x666666);
cube = new THREE.Mesh(cgeometry, cmaterial);
scene.add(cube);
var sgeometry = new THREE.SphereGeometry(4, 10, 10);
var smaterial = new THREE.MeshBasicMaterial();
smaterial.color.set(0xFFFF00);
sphere = new THREE.Mesh(sgeometry, smaterial);
scene.add(sphere);
sphere.position.set(80, 100, –120);
var geometry = new THREE.PlaneGeometry(40, 32, 1, 1);
var material = new THREE.MeshBasicMaterial();
material.color.set(0xFFFF00);
material.transparent = true;
material.opacity = 0.6;
front = new THREE.Mesh(geometry, material);
scene.add(front);
front.position.z = – 250;
}
function render() {
requestAnimationFrame(render);
controller.update();
camera.lookAt(center.position);
renderer.render(scene, camera);
stats.update();
}
function resize(event) {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
</script>
</body>
</html>
[修正] (14/12/27 Sat 21:25)
HTML記述を変更。
[修正] (18/12/30 Sun 02:38)
three.js r99 にバージョンアップ。material の設定方法を変更。