Skip to content

Instantly share code, notes, and snippets.

@mechamogera
Last active Dec 2, 2015
Embed
What would you like to do?
three.jsテスト
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>get started with three.js</title>
</head>
<body>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="three.min.js"></script>
<script src="OrbitControls.js"></script>
<script>
var scene
var main = function () {
// シーン作成
scene = new THREE.Scene();
// カメラ配置
var width = 600;
var height = 400;
var fov = 60;
var aspect = width / height;
var near = 0.1;
var far = 1000;
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.set( 0, 0, 50 );
// 地面作成
var planeGeo = new THREE.PlaneGeometry(500, 500, 50, 50);
var planeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
var plane = new THREE.Mesh( planeGeo, planeMaterial );
plane.rotation.set(-Math.PI / 2, 0, 0);
plane.position.set(0, -30, 0);
scene.add(plane);
// キューブ作成
var geometry = new THREE.CubeGeometry( 30, 30, 30 );
var material = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// レンダラー作成
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );
// 影設定
mesh.castShadow = true;
plane.receiveShadow = true;
renderer.shadowMap.enabled = true;
var controls = new THREE.OrbitControls(camera, renderer.domElement);
( function renderLoop () {
requestAnimationFrame( renderLoop );
mesh.rotation.set(
0,
mesh.rotation.y + .01,
mesh.rotation.z + .01
);
controls.update();
renderer.render( scene, camera );
} )();
};
window.addEventListener( 'DOMContentLoaded', main, false );
function chkboxclick(id, ischecked) {
if (ischecked) {
var light;
switch (id) {
case "ambientLight":
light = new THREE.AmbientLight( 0x404040 );
break;
case "directionalLight":
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 100, 100, 100 );
light.castShadow = true;
break;
case "spotLight":
var ssphere = new THREE.SphereGeometry(0.5, 16, 8);
light = new THREE.SpotLight( 0xffffff, 5, 130, Math.PI/4, 1);
light.position.set( 0, 60, 0);
light.add( new THREE.Mesh(ssphere, new THREE.MeshBasicMaterial( { color: 0xff8080 } )));
light.castShadow = true;
break;
case "pointLight":
var sphere = new THREE.SphereGeometry(0.5, 16, 8);
light = new THREE.PointLight( 0x80ff80, 5, 100 );
light.position.set( 0, 40, 0);
light.add( new THREE.Mesh(sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } )));
// light.castShadow = true; // https://github.com/mrdoob/three.js/issues/1192
break;
default:
throw id;
}
light.name = id;
scene.add(light);
updateMaterials();
}
else {
var selectedObj = scene.getObjectByName(id);
scene.remove(selectedObj);
updateMaterials();
}
}
function updateMaterials() {
scene.traverse( function ( node ) {
if ( node.material ) {
node.material.needsUpdate = true;
if ( node.material instanceof THREE.MeshFaceMaterial ) {
for ( var i = 0; i < node.material.materials.length; i ++ ) {
node.material.materials[ i ].needsUpdate = true;
}
}
}
} );
}
</script>
マウスでグリグリできます。
<form name="chkbox">
<input type="checkbox" id="ambientLight" onclick="chkboxclick('ambientLight', this.checked)">環境光</br>
<input type="checkbox" id="directionalLight" onclick="chkboxclick('directionalLight', this.checked)">平行光源</br>
<input type="checkbox" id="pointLight" onclick="chkboxclick('pointLight', this.checked)">点光源</br>
<input type="checkbox" id="spotLight" onclick="chkboxclick('spotLight', this.checked)">スポットライト</br>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment