javascript 3D three.js

最近因為做一個 Demo 的 Widget 需要
開始研究了 javascript 的 3D

主要就是用這個 library (tool? / plugin?)
http://threejs.org/




這是從網路上找到的範例，綜合起來，加上我自己需要的部分作的範例

var container;
var mouseX, mouseY;
var camera, scene, renderer, light;
var cube, sphere;

init();
render();
function init(){
  // 建立場景 scene
  scene = new THREE.Scene();
  // 建立鏡頭 camera
  camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000);
  camera.position.z = 500;
 
  // 建立光源 light 
  /* 原本用的點光源，但是在物件數量變多，或是距離移動大的時候就看不到東西了
  light = new THREE.PointLight(0xffffff, 5);
  light.position.set(100,100, 500);
  scene.add(light);
  */
  //下面這兩個光源加在一起，可以模擬自然陽光
  // 半球光
  var hemisphereLight = new THREE.HemisphereLight(0xffffff, 0xffffff, .7);
  scene.add(hemisphereLight);
  // 平行光
  var directionalLight = new THREE.DirectionalLight(0xffffff, .6);
  directionalLight.position.set(600, 1000, 700);
  directionalLight.castShadow = true;
  directionalLight.shadowCameraNear = 50;
  directionalLight.shadowCameraFar = 3000;
  directionalLight.shadowCameraLeft = -1000;
  directionalLight.shadowCameraRight = 1000;
  directionalLight.shadowCameraTop = 1000;
  directionalLight.shadowCameraBottom = -1000;
  directionalLight.shadowDarkness = .2;
  scene.add(directionalLight);
 
  //材質
  var material = new THREE.MeshLambertMaterial({color: 0x123456});
 
  var geometry;
  //立方體
  geometry = new THREE.CubeGeometry(150,150,150);
 
  //球
  //geometry = new THREE.SphereGeometry(100,16,8);
 
  // 圓柱
  //geometry = new THREE.CylinderGeometry( 50, 50, 300, 16 );
 
  //四面體
  //geometry = new THREE.TetrahedronGeometry(100);
 
  //八面體
  //geometry = new THREE.OctahedronGeometry(100);

  //十二面體
  //geometry = new THREE.DodecahedronGeometry(100);
 
  //二十面體
  //geometry = new THREE.IcosahedronGeometry(100);
 
  //甜甜圈
  //geometry = new THREE.TorusGeometry( 100, 30, 16, 16 );
 
  // 建立物件
  var object = new THREE.Mesh(geometry, material);
  // 放進場景 (移除使用 scene.remove(object))
  scene.add(object);
  cube = object;
 
  // 建立渲染器 renderer
  renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
 
  // create a div element to contain the render
  container = document.createElement('div');
  document.body.appendChild(container);
 
  // add renderer
  container.appendChild(renderer.domElement);
 
  // addEventListener
  document.addEventListener('mousemove', onMouseMove, false);
}
//使用滑鼠旋轉物件
function onMouseMove(e){
  e.preventDefault();
  mouseX = e.clientX - window.innerWidth*0.5;
  mouseY = e.clientY - window.innerHeight*0.5;
}
//更新場景
function render(){
  requestAnimationFrame(render);
  cube.rotation.x = mouseY * 0.005;
  cube.rotation.y = mouseX * 0.005;
  renderer.render(scene, camera);
}