教材：Three.js開發指南 第一章
<!DOCTYPE html>
<html>
<head>
<title>example 01.01</title>
<script type="text/javascript" src="./libs/three.js"></script>
<script type="text/javascript" src="./libs/jquery.js"></script>
<script type="text/javascript" src="./libs/stats.min.js"></script>
<script type="text/javascript" src="./libs/AsciiEffect.js"></script>
<style>
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output"></div>
<div id="WebGL-output"></div>
<script type="text/javascript">
$(function(){
var stats1=initStats();
//THREE.Scene 一個容器，用於保存並跟蹤我們想要渲染的物體
//THREE.PerspectiveCamera camera定義了我們能夠在渲染好的scene裏面看到什麼
// THREE.WebGLRenderer renderer對象負責計算指定相機角度下瀏覽器中scene的樣子，WebGLRenderer：使用計算機上的顯卡來渲染場景
var scene=new THREE.Scene();
var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
var renderer=new THREE.WebGLRenderer();
//設置背景顏色
renderer.setClearColor(0xEEEEEE);
//將scene渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight);
//需要生成陰影，這裏設置後，還需要設置接收陰影的面，產生陰影的物體與光源
renderer.shadowMapEnabled=true;
//創建座標軸並加入到scene
var axes=new THREE.AxisHelper(20);
scene.add(axes);
//平面大小，寬60（x），高20（z）
var planeGeometry=new THREE.PlaneGeometry(60,20,1,1);
//平面外觀，MeshBasicMaterial：不會對照射有反應，使用MeshLambertMaterial、MeshPhongMaterial試試
var planeMaterial=new THREE.MeshPhongMaterial({color:0xcccccc});
var plane=new THREE.Mesh(planeGeometry,planeMaterial);
//生成陰影
plane.receiveShadow=true;
//平面位置
plane.rotation.x=-0.5*Math.PI;
plane.position.x=15;
plane.position.y=0;
plane.position.z=0;
//加入到scene
scene.add(plane);
//wireframe:true 網格，false 實體表面？
var cubeGeometry=new THREE.CubeGeometry(4,4,4);
var cubeMaterial=new THREE.MeshLambertMaterial({color:0xff0000, wireframe:false});
var cube=new THREE.Mesh(cubeGeometry,cubeMaterial);
//生成陰影
cube.castShadow=true;
cube.position.x=-4;
cube.position.y=3;
cube.position.z=0;
scene.add(cube);
var sphereGeometry=new THREE.SphereGeometry(4,20,20);
var sphereMaterial=new THREE.MeshLambertMaterial({color:0x7777ff, wireframe:false});
var sphere=new THREE.Mesh(sphereGeometry,sphereMaterial);
//生成陰影
sphere.castShadow=true;
sphere.position.x=20;
sphere.position.y=4;
sphere.position.z=2;
scene.add(sphere);
camera.position.x=-30;
camera.position.y=40;
camera.position.z=30;
camera.lookAt(scene.position);
//添加光源
var spotLight=new THREE.SpotLight(0xffffff);
spotLight.position.set(-40,60,-10);//照射位置
//這個光源可以產生陰影
spotLight.castShadow=true;
scene.add(spotLight);
var step=0;
//ascii效果
var effect=new THREE.AsciiEffect(renderer);
effect.setSize(window.innerWidth,window.innerHeight);
$("#WebGL-output").append(effect.domElement);
// $("#WebGL-output").append(renderer.domElement);
//renderer.render(scene,camera);
renderScene();
//添加動畫，持續渲染
function renderScene(){
stats1.update();
//繞座標軸旋轉的紅色方塊
cube.rotation.x+=0.02;
cube.rotation.y+=0.02;
cube.rotation.z+=0.02;
//讓藍色球彈跳
step+=0.1;
sphere.position.x=20+(10*(Math.cos(step)));
sphere.position.y=2+(10*Math.abs(Math.sin(step)));
requestAnimationFrame(renderScene);
effect.render(scene,camera);
// renderer.render(scene,camera);
}
//統計fps
function initStats(){
var stats=new Stats();
stats.setMode(0);
stats.domElement.style.position='absolute';
stats.domElement.style.left='0px';
stats.domElement.style.right='0px';
$("#Stats-output").append(stats.domElement);
return stats;
}
});
</script>
</body>
</html>
