1、Hello Three.js程序
//定義場景scene相機camera和渲染器renderer
var scene = new THREE.Scene();//這是一個容器，用來保存并跟蹤我們想要渲染的物體 想要渲染的球體和方塊后面會添加到這個scene變量中
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//定義了我們將在渲染好的scene里面看到什么
var renderer = new THREE.WebGLRenderer();//負責計算指定相機角度下 瀏覽器中scene的樣子 我們創建了一個WebGLRenderer對象 使用計算機上的顯卡來渲染場景
renderer.setClearColorHex(0xEEEEEE);//將背景色設置成接近白色
renderer.setSize(window.innerWidth,window.innerHeight);//renderer 將scene渲染成和window寬高一樣大小的尺寸
//添加了主要元素后 需要添加輔助的坐標軸和平面 球體等物質
var axes = new THREE.AxisHelper(20);//坐標軸對象
scene.add(axes);//將坐標軸添加到場景中
//添加平面 添加材質 設置平面的位置和角度
var planeGeometry = new THREE.PlaneGeometry(60,20);//改平面的寬60 高20
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});//這個平面的外觀 材質和透明度 設置成基本材質 顏色為灰色
var plane = new THREE.Mesh(planeGeometry,planeMaterial);//將形狀和材料添加到一個名為plane 的網格對象Mesh中
plane.rotation.x = -0.5*Math.PI;//在添加到scene場景中之前 需要設置平面的位置和方向
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
//設置相機的位置和對準的點
camera.position.x = -40;
camera.position.y = 30;
camera.position.z = 30;
camera.lookAt(scene.position);
//將renderer 的輸出掛接到HTML頁面框架的<div>元素
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);//渲染 后面會獨立成一個函數
2、添加燈光效果
在場景里添加一個光源
var spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(-40,60,-10);//光源位置
spotLight.castShadow = true;//定義場景中的該光源可以產生陰影（并不是所有光源都能產生陰影）
scene.add(spotLight);
將材質改成對光源有效果的材質
MeshLambertMaterial和MeshPhongMaterial
接收陰影和投射陰影
plane.receiveShadow = true;
cube.castShadow = true;
告訴renderer我們需要陰影
renderer.shadowMapEnabled = true;
3、為場景添加動畫的效果
寫一個負責渲染的函數
原來是一句渲染的語句 現將其改成一個函數
renderer.render(scene,camera)
function render(){
requestAnimationFrame(render);//重新調用render函數，目的是讓這個動畫持續運行
renderer.render(scene,camera)
}
添加輔助庫來檢測出動畫運行的幀數
引入輔助庫
<script type="text/javascript" src="../libs/stats.js"></script>
添加<div>元素來顯示統計圖形
<div id = "Stats-output"></div>
初始化這個統計對象
function initStats(){
var stats = new Stats();
stats.setMode(0);//如果設置的是0則監測的是FPS 如果設置的是1 那么監測的是渲染時間
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
轉動方塊 彈跳球
在render()里添加旋轉的屬性
cube.rotation.x += 0.02;
cube.rotation.y += 0.02;
cube.rotation.z += 0.02;
在render()里添加彈跳屬性
step += 0.04;//定義的是球的彈跳速度
sphere.position.x = 20+(10*(Math.cos(step)));
sphere.position.y = 2+(10*Math.abs(Math.sin(step)));
4、用簡單的GUI來在運行時修改運動屬性
添加dat.gui庫
<script type="text/javascript" src="../libs/dat.gui.js"></script>
定義一個JavaScript 對象用來保存我們想要通過dat.GUI庫修改哪些變量
var controls = new function(){
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03;
}
把對象傳遞給dat.GUI對象并定義這兩個對象的取值范圍
var gui = new dat.GUI();
gui.add(controls,'rotationSpeed',0,0.5);
gui.add(controls,'bouncingSpeed',0,0.5);
將原來的固定值改成gui 的屬性即可
cube.rotation.x += controls.rotationSpeed;
5、創建有意思的三維渲染效果
添加AsciiEffect庫
<script type="text/javascript" src="../libs/AsciiEffect.js"></script>
將document.getElementById("WebGL-output").appendChild(renderer.domElement);
改成ASCII效果,
var effect = new THREE.AsciiEffect(renderer);
effect.setSize(window.innerWidth,window.innerHeight);
document.getElementById("WebGL-output").appendChild(effect.domElement)
將render循環里面的renderer.render(scene,camera)替換成effect.render(scene,camera)
