安裝依賴
npm install three
搭建本地服務器 Node.js server
為什么要搭建一個服務器呢？ 當頁面需要加載外部圖片或者模型文件時，控制臺會提示跨域問題，會導致案例無法正常打開；
npm install http-server -g
// 在文件目錄下運行，端口號為8000
http-server . -p 8000
瀏覽器WebGL兼容性檢查 WebGL.js
if (!THREE.WEBGL.isWebGLAvailable()) {
var warning = THREE.WEBGL.getWebGLErrorMessage();
document.getElementById('container').appendChild(warning);
}
// 瀏覽器控制臺輸入此命令，可以查看three.js版本號
THREE.REVISION
介紹
在Three.js中，要渲染物體到網頁中，我們需要3個組建：場景（scene）、相機（camera）和渲染器（renderer）。有了這三樣東西，才能將物體渲染到網頁中去。
- 場景（scene）： 模型、燈光等
- 相機（camera）： 觀察場景的視角
- 渲染器（renderer）： 場景渲染輸出的目標
代碼示例
/**
* 創建場景對象Scene
*/
var scene = new THREE.Scene();
/**
* 創建網格模型
*/
// 創建一個立方體幾何對象Geometry
var geometry = new THREE.BoxGeometry(100, 100, 100);
// 材質對象Material
var material = new THREE.MeshLambertMaterial({
color: 0xff1100
});
// 網格模型對象Mesh
var mesh = new THREE.Mesh(geometry, material);
// 網格模型添加到場景中
scene.add(mesh);
/**
* 光源設置
*/
// 點光源 光照強度
var point = new THREE.PointLight(0xffffff);
point.position.set(100, 200, 300); // 點光源位置
// 點光源添加到場景中
scene.add(point);
// 環境光
var ambient = new THREE.AmbientLight(0x666666);
scene.add(ambient);
/**
* 相機設置
*/
// 窗口寬度
var width = window.innerWidth;
// 窗口高度
var height = window.innerHeight;
// 窗口寬高比
var k = width / height;
// 三維場景顯示范圍控制系數，系數越大，顯示的范圍越大
var s = 200;
/**
*
* 創建相機對象, 參數對應如下
*
* left — 攝像機視錐體左側面。
* right — 攝像機視錐體右側面。
* top — 攝像機視錐體上側面。
* bottom — 攝像機視錐體下側面。
* near — 攝像機視錐體近端面。
* far — 攝像機視錐體遠端面。
*/
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); // 設置相機位置
camera.lookAt(scene.position); // 設置相機方向(指向的場景對象)
/**
* 創建渲染器對象
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //設置渲染區域尺寸
renderer.setClearColor(0xb9d3ff, 1); //設置背景顏色
document.body.appendChild(renderer.domElement); //body元素中插入canvas對象
/**
* 創建鼠標控件對象
*/
var controls = new THREE.OrbitControls(camera, renderer.domElement);
function animate() {
requestAnimationFrame(animate);
// 更新控制器
controls.update();
renderer.render(scene, camera);
}
animate()
