Threejs開發筆記之一

開始

下載並引入一下類庫
1.threejs庫
2.JQuery庫
3.代碼資源

基礎概念

座標

scene（場景）

var scene = new THREE.Scene(); //實例化

camera（相機）

var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;//位置
camera.lookAt(scene.position);//望向場景中央

rederer（渲染器）

var renderer = new THREE.WebGLRenderer(); 
//上面是實例化，渲染器有三種實現WebGL（推薦用的是GPU）Canvas，SVG
renderer.setClearColor(new THREE.Color(0xEEEEEE));//設置背景顏色
renderer.setSize(window.innerWidth, window.innerHeight);//渲染的尺寸、

//如果場景中有動畫就需要持續渲染
requestAnimationFrame(renderScene);
//renderScene爲需要重複渲染的方法，也是寫動畫邏輯的地方
renderer.render(scene, camera);

幾何體

var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});//直接會渲染顏色上去，光源對其無效
//以下兩種材質對光源纔有反應(無陰影)
//MeshLambertMaterial
//MeshPhongMaterial
//如果需要添加陰影需要給光源加以下這句（光源產生陰影）
//spotLight.castShadow = true;
//幾何體接收陰影(兩個都得設，不光發出也得接收)
//cube.castShadow = true;


var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

//設置位置
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;

//加入場景
scene.add(cube);

光源

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);

輔助工具

//座標工具（無需依賴其他類庫）
var axes = new THREE.AxisHelper(20);
scene.add(axes);

//幀率工具
 <script  src="/libs/stats.js"></script>
  function initStats() {//初始化
      var stats = new Stats();

      stats.setMode(0); //參數說明 0: fps, 1: ms

      // 位置
      stats.domElement.style.position = 'absolute';
      stats.domElement.style.left = '0px';
      stats.domElement.style.top = '0px';

      //掛載
      document.getElementById("Stats-output").appendChild(stats.domElement);

       return stats;
}


//簡化實驗GUI工具（通過gui工具調整參數）
<script src="/libs/dat.gui.js"></script>
//參數
var controls = new function () {
            this.rotationSpeed = 0.02;
            this.bouncingSpeed = 0.03;
};
//實例化
var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'bouncingSpeed', 0, 0.5);
//使用
cube.rotation.x += controls.rotationSpeed;
cube.rotation.y += controls.rotationSpeed;
cube.rotation.z += controls.rotationSpeed;

總實例化

document.getElementById("WebGL-output").appendChild(renderer.domElement);

renderer.render(scene, camera);

奇葩ascii效果

document.getElementById("Stats-output").appendChild(stats.domElement);
改爲
 var effect = new THREE.AsciiEffect(renderer);
effect.setSize(window.innerWidth,window.innerHeight);
document.getElementById("WebGL-output").appendChild(effect.domElement);

renderer.render(scene, camera);
  改爲
effect.render(scene,camera);