學習three.js過程中的事例記錄下來，方便後期複習
學習資料來源：http://www.hewebgl.com/
示例1.
初步瞭解簡單API
場景（scene）、相機（camera）和渲染器（renderer）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
</head>
<body>
</body>
<script>
/*創建場景*/
var scene = new THREE.Scene()
/*打印場景位置*/
console.log(scene.position)
/*創建相機*/
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10)
/*打印相機位置*/
console.log(camera.position)
/*創建渲染器*/
var renderer = new THREE.WebGLRenderer();
/*設置渲染器尺寸*/
renderer.setSize(window.innerWidth, window.innerHeight)
/*設置渲染器清除顏色*/
renderer.setClearColor('#FFFFFF')
/*將渲染器添加到body中*/
document.body.appendChild(renderer.domElement);
/*生成幾何體 盒子模型（*/
var geometry = new THREE.CubeGeometry(2, 2, 2);
/*生成材質*/
//var material = new THREE.MeshBasicMaterial({color: 0xff0000})//基礎網孔材料
var material = new THREE.MeshNormalMaterial()//法向量網孔材料
/*幾何體和材質結合*/
var cube = new THREE.Mesh(geometry, material)
//*將結合體添加到場景*/
scene.add(cube)
/*對象將被添加到原點處，即座標點(0,0,0)，這將導致相機和立方體發生空間重疊。爲了避免這樣，我們把相機（camera）的位置移出來一些*/
camera.position.z = 5
/*打印相機位置*/
console.log(camera.position)
function render() {
/*啓動定時器*/
requestAnimationFrame(render);
/*結合體旋轉*/
cube.rotation.y += 0.01;
cube.rotation.x += 0.01;
/*渲染*/
renderer.render(scene, camera)
}
render()
</script>
</html>
效果圖：
