three.js入門第一個案例
阿新 • • 發佈：2020-01-14
準備工作
1.運用three.js進行3d開發，其實和頁面程式設計一樣，首先需要在html檔案中引入three.js。Three.js使用面向物件的方式來構建程式，它包含3個基本物件： 場景（scene）, 相機（camera）, 以及一個渲染器（renderer）。
第一步： 引入three.js.
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>demo1</title> </head> <body> <script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script> <script> // 這個位置是留給後面初始化和開發3d頁面的js程式碼 </script> </body> </html>
第二步： 用js程式碼建立3D場景（scene），非常簡單就一行程式碼.
let scene = new THREE.Scene();第三步：用js程式碼建立相機（camera），再確定其位置,下面程式碼也就兩行，但是多了引數。來說明一下引數的作用：
//fov 代表視角 我們觀察位置的視覺 //aspect 寬高比 簡單理解為確定3d頁面的寬和高 //near 最近看到 滾輪縮放的最小距離 //far 最遠看到 滾輪縮放的最大距離 let camera = PerspectiveCamera( fov, aspect, near, far ); camera.position.set( x, y,z);//x:水平方向位置， y: 豎直方向位置，z:垂直螢幕方向位置
一般給下面這組值來確定相機能夠看得的位置：
let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 100,300 );第四步：用js程式碼建立渲染器（renderer),設定渲染頁面大小，一般為相機確定的3d頁面大小,最後一行是把渲染器加入頁面.
let renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild(renderer.domElement );
第五步：給3d頁面新增一個白色環境光這樣我們才能夠看見物體：
//環境光
let ambientLight = new THREE.AmbientLight( 0xf5f5f5);//建立光
scene.add( ambientLight );//加入到場景最後一步：開始時刻渲染3d頁面，雖然完成了最後一步，但是執行程式碼後我們還是不能看見任何東西，那是因為我們只渲染了3d頁面，並沒有新增事物到頁面，接下來我們就來新增一個球吧：
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();添加個球吧,添加了下面程式碼再執行下發現3d頁面上有一個紅色的球了,但是我們不能用滑鼠來控制它，那是因為three.js裡面沒有來寫滑鼠的控制3d頁面，我們還需要引入滑鼠控制外掛OrbitControls.js。
let ball= new THREE.SphereGeometry( 5, 32, 32 );//建立球
let ballColor= new THREE.MeshPhongMaterial( {color: 0xffff00} );//建立材質色，用來給球上色的
let sphere = new THREE.Mesh( ball, ballColor);//給球上色
scene.add( sphere );//把球加入到場景再新增格子輔助線方便我們觀察和調整物體位置：
let grid = new THREE.GridHelper( 400, 30, 0xcccccc, 0xcccccc );//建立輔助線
scene.add( grid );//加入場景引入OrbitControls.js，然後初始化控制元件，在執行頁面發現可以用滑鼠來控制這個球了，就問你完不完美，beautiful 不 beautiful;
<script src="/libs/OrbitControls.js"></script>
let controls =newTHREE.OrbitControls(camera);
//通過.enableZoom屬性可以控制是否允許滑鼠中鍵縮放場景，.enableZoom屬性預設值true。
controls.enableZoom =true;//允許縮放`
controls.minDistance = 1;//能夠縮放多小
controls.maxDistance = 2000;////能夠放大多大
//通過.enableRotate屬性可以控制是否允許滑鼠左鍵旋轉場景，.enableRotate屬性預設值true。
controls.enableRotate =true;//允許旋轉最終程式碼：執行一下，檢視效果
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>demo1</title>
</head>
<body>
<script src="lib/three.min.js"></script>
<script src="lib/OrbitControls.js"></script>
<script>
// 這個位置是留給後面初始化和開發3d頁面的js程式碼
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.set( 0, 50,300 );
let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement );
// 給場景新增一個環境光
let ambientLight = new THREE.AmbientLight( 0xf5f5f5);
scene.add( ambientLight );
let grid = new THREE.GridHelper( 400, 30, 0xcccccc, 0xcccccc );
scene.add( grid );
let ball = new THREE.SphereGeometry( 5, 32, 32 );//5:球半徑 第一個32：水平分割面的數量. 第二個32：垂直分割面的數量.
let ballColor = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
let cube = new THREE.Mesh( ball , ballColor );
scene.add( cube );
let controls =new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom =true;//允許縮放
//設定相機移動距離
controls.minDistance = 1;
controls.maxDistance = 2000;
controls.enableRotate =true;
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
</script>
</body>
</html>