mechamogera · December 2, 2015 06:33
diff --git a/index.html b/index.html
 <!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>
	<!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>