准備工作
1.運用three.js進行3d開發，其實和頁面編程一樣，首先需要在html文件中引入three.js。Three.js使用面向對象的方式來構建程序，它包含3個基本對象： 場景（scene）, 相機（camera）, 以及一個渲染器（renderer）。
第一步： 引入three.js.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first Three.js app</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.MeshBasicMaterial( {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.MeshBasicMaterial( { 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>three.js的中文文檔踏得網
出處：https://www.cnblogs.com/lmf-sky/p/12187733.html
推薦查看three.js系列文章：https://www.cnblogs.com/vadim-web/category/1599621.html