先來看下最終的效果，也可以訪問這裏查看案例。
導入obj模型
如果僅使用Mesh幾何而不加載任何外部資源，則網頁應直接在文件系統中運行，只需雙擊HTML文件打開即可以預覽。而由於3D模型是從外部加載進來的，由於瀏覽器的原始策略安全性限制，從文件系統加載將失敗，並出現安全異常。必須要啓動本地Web服務器來運行文件。
下載的模型文件如下：
默認情況下，three.js 僅包含少數幾個加載器（例如JSONLoader），其他加載器應單獨添加到應用程序中。例如：導入OBJ格式的模型，除了導入必要的three.js文件外，還需要導入OBJLoader.js文件。three.js中導入外部模型的加載器下載地址：https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders
可以使用 script 標籤導入加載器文件
<script type="text/javascript" src="../js/loaders/OBJLoader.js"></script>
也可以使用 ES6 的 import 導入所需文件
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
導入加載器後，就可以將模型添加到場景中了。語法在不同的加載程序中有所不同。OBJLoader的使用方法如下：
var objLoader = new THREE.OBJLoader();
//url 模型地址
//onLoad 加載完成後的回調函數，一般在這裏操作將模型添加到場景中
//onProgress 加載過程中觸發的函數，可以用來展示進度條
//onError 捕捉錯誤的回調函數
objLoader.load(url,onLoad,onProgress,onError);
function onLoad(object) {
//......
scene.add(object); //將模型添加到場景中
});
function onProgress( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( 'model ' + Math.round( percentComplete, 2 ) + '% downloaded' );
}
}
function onError() {}
設置模型的縮放比例：
object.scale.set(1, 1, 1);
設置模型的座標：
object.position.set(0, 0, 0);
添加模型周圍的立方體邊線：
var box = new THREE.Box3().setFromObject(object);
var box3Helper = new THREE.Box3Helper(box);
scene.add(box3Helper);
添加輔助工具x,y,z三維座標軸：
scene.add(new THREE.AxesHelper(20));
添加模型皮膚：
object.traverse(function(child) {
if (child instanceof THREE.Mesh) {
//設置模型皮膚
child.material.map = THREE.ImageUtils.loadTexture( 'pikaqiu/p.jpg');
}
});
PI屬性就是π,還表示了弧度π = 180°,Math.PI = 3.14 = 180°
Math.PI = 3.14 = 180°
案例的完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>皮卡丘</title>
</head>
<body>
</body>
<script type="text/javascript" src="../js/three.js"></script>
<script type="text/javascript" src="../js/loaders/OBJLoader.js"></script>
<script type="text/javascript" src="../js/controls/OrbitControls.js"></script>
<script>
//場景
var scene = new THREE.Scene();
//相機
var camera = new THREE.PerspectiveCamera(15, window.innerWidth / window.innerHeight, 0.1, 1000);
//設置相機座標
camera.position.set(50, 30, 100);
//渲染器
var renderer = new THREE.WebGLRenderer();
//設置渲染器的顏色和大小
renderer.setClearColor(0x404040);
renderer.setSize(window.innerWidth, window.innerHeight);
//將renderer（渲染器）的dom元素（renderer.domElement）添加到我們的HTML文檔中。
//這就是渲染器用來顯示場景給我們看的<canvas>元素
document.body.appendChild(renderer.domElement);
//鼠標控制旋轉
var controls = new THREE.OrbitControls(camera, renderer.domElement);
//設置是否可以縮放,默認值爲true
// controls.enableZoom = false;
//設置鼠標交互,設置爲false之後，不能移動位置，不能旋轉物體,默認爲true
// controls.enableRotate = false;
//設置光源
var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(100);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
//添加灰色網格線
scene.add(new THREE.GridHelper(20, 20));
//導入obj模型
var objLoader = new THREE.OBJLoader();
objLoader.load('/02-objectLoader/pikaqiu/pikaqiu.obj', function (object) {
//設置模型縮放比例
object.scale.set(1, 1, 1);
//設置模型的座標
object.position.set(0, 0, 0);
//PI屬性就是π,還表示了弧度π = 180°,Math.PI = 3.14 = 180°
//將模型z軸旋轉90度,三種寫法都可以
// object.rotation.z = -Math.PI * 0.5;
// object.rotateZ(-Math.PI * 0.5);
// object.rotation.set(0,0,-Math.PI * 0.5);
//繪製模型周圍的立方體連線
// var box = new THREE.Box3().setFromObject(object);
// var box3Helper = new THREE.Box3Helper(box);
// scene.add(box3Helper);
//輔助工具,x,y,z三維座標軸
// scene.add(new THREE.AxesHelper(20));
object.traverse(function(child) {
if (child instanceof THREE.Mesh) {
//設置模型皮膚
child.material.map = THREE.ImageUtils.loadTexture( '/02-objectLoader/pikaqiu/p.jpg');
}
});
//將模型添加到場景中
scene.add(object);
});
function render() {
//動畫循環渲染
requestAnimationFrame(render);
//渲染到頁面上
renderer.render(scene, camera);
}
render();
</script>
</html>