1. three.js中文手冊網址：https://www.techbrood.com/threejs/docs/
注意事項：
代碼中出現的 new THREE 中的 THREE 必須爲大寫。
<!DOCTYPE html>
<html>
<head>
<title>demo1</title>
</head>
<style type="text/css">
body{
margin:0;
}
canvas{
width:100%;
height:100%;
}
</style>
<body>
<script src="jquery.min.js"></script>
<script src="../build/three.js"></script>
<script type="text/javascript">
var scene = new THREE.Scene();//創建場景
//創建一個攝像機對象
var camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1, 1000);
//創建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);//渲染到瀏覽器
//創建形狀BoxGeometry
var geometry = new THREE.BoxGeometry(1,1,1);
//創建材料 wireframe是否使用線條
var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:false});
//將材料和形狀結合
var cube = new THREE.Mesh(geometry,material);
//加入場景中
scene.add(cube);
camera.position.z=3;//設置相機的位置
//邏輯
var update=function(){
//物體隨着XY軸旋轉
cube.rotation.x +=0.01;
cube.rotation.y += 0.005;
}
//繪畫渲染
var render=function() {
renderer.render(scene,camera);
}
//循環運行update，render
var loop=function() {
requestAnimationFrame(loop);
update();
render();
}
loop();//循環開始
</script>
</body>
</html>
