nikuyoshi/readme.md

## readme.md

      
    Raw
  

              readme.md
            
          
    three.jsを使い始めたので、お試しでメッシュ状の球体を表現してみました。
参考にさせていただいたページ

Webグラフィックをハックする（5）：多彩な表現力のWebGLを扱いやすくする「Three.js｣
Three.js - examples
WebGL and Three.js

  
## three.html
<!doctype html>
<html lang="jp">
<body>
  <script src="http://threejs.org/build/three.min.js"></script>
  <script>
    // レンダラの初期化
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(500, 500);
    renderer.setClearColorHex(0xFFFFFF, 1);
    document.body.appendChild(renderer.domElement);

    // シーンの作成
    var scene = new THREE.Scene();

    // カメラの配置
    var fov = 80;
    var aspect = 500 / 500;
    var near = 1;
    var camera = new THREE.PerspectiveCamera(fov, aspect, near);
    camera.position = new THREE.Vector3(0, 0, 2);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene.add(camera);

    // ライトの配置
    var light = new THREE.DirectionalLight(0xcccccc);
    light.position = new THREE.Vector3(0.577, 0.577, 0.577);
    scene.add(light);

    var ambient = new THREE.AmbientLight(0x333333);
    scene.add(ambient);

    // モデルの配置
    var geometry = new THREE.SphereGeometry(1, 32, 16);
    var material = new THREE.MeshPhongMaterial({
        color: 0xffffff,
        ambient: 0xffffff,
        specular: 0xcccccc,
        shininess:50,
        metal:false,
        });
    var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x0099FF, wireframe: true, transparent: true } );
    var mesh = new THREE.Mesh(geometry, wireframeMaterial);
    scene.add(mesh);

    // レンダリング
    var baseTime = +new Date;
      function render() {
        requestAnimationFrame(render);
        mesh.rotation.y = 0.3 * (+new Date - baseTime) / 1000;
        renderer.render(scene, camera);
      };
    render();

  </script>
</body>
</html>
	<!doctype html>
	<html lang="jp">
	<body>
	<script src="http://threejs.org/build/three.min.js"></script>
	<script>
	// レンダラの初期化
	var renderer = new THREE.WebGLRenderer();
	renderer.setSize(500, 500);
	renderer.setClearColorHex(0xFFFFFF, 1);
	document.body.appendChild(renderer.domElement);

	// シーンの作成
	var scene = new THREE.Scene();

	// カメラの配置
	var fov = 80;
	var aspect = 500 / 500;
	var near = 1;
	var camera = new THREE.PerspectiveCamera(fov, aspect, near);
	camera.position = new THREE.Vector3(0, 0, 2);
	camera.lookAt(new THREE.Vector3(0, 0, 0));
	scene.add(camera);

	// ライトの配置
	var light = new THREE.DirectionalLight(0xcccccc);
	light.position = new THREE.Vector3(0.577, 0.577, 0.577);
	scene.add(light);

	var ambient = new THREE.AmbientLight(0x333333);
	scene.add(ambient);

	// モデルの配置
	var geometry = new THREE.SphereGeometry(1, 32, 16);
	var material = new THREE.MeshPhongMaterial({
	color: 0xffffff,
	ambient: 0xffffff,
	specular: 0xcccccc,
	shininess:50,
	metal:false,
	});
	var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x0099FF, wireframe: true, transparent: true } );
	var mesh = new THREE.Mesh(geometry, wireframeMaterial);
	scene.add(mesh);

	// レンダリング
	var baseTime = +new Date;
	function render() {
	requestAnimationFrame(render);
	mesh.rotation.y = 0.3 * (+new Date - baseTime) / 1000;
	renderer.render(scene, camera);
	};
	render();

	</script>
	</body>
	</html>