Last active
December 2, 2015 06:33
-
-
Save mechamogera/3c99f8d5a021d89621b7 to your computer and use it in GitHub Desktop.
three.jsテスト
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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