Three.js加载OBJ模型或FBX模型

1. 引入相关OBJLoader、MTLLoader文件；

<script src="./OBJLoader.js"></script><script src="./MTLLoader.js"></script>

2. 在MTL材质中加载OBJ模型

var OBJLoader = new THREE.OBJLoader();//obj加载器var MTLLoader = new THREE.MTLLoader();//材质文件加载器MTLLoader.load('./all.mtl', function (materials) {OBJLoader.load('./obj/BUJIAN.obj', function (obj) {scene.add(obj);//返回的组对象插入场景中})})

3. 加载FBX模型

var loader = new THREE.FBXLoader();loader.load('./all.FBX', function (obj) {//渲染阴影obj.traverse(function (child) {if (child.isMesh) {child.castShadow = true;child.receiveShadow = true;}});scene.add(obj);});

如果模型加载了却没显示出来，看下是否因为模型大小原因；通过obj.scale.set(0.15, 0.1, 0.1)

4. 完整代码

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><script src="./three.min.js"></script><script src="./FBXLoader.js"></script><script src="./OBJLoader.js"></script><script src="./MTLLoader.js"></script><script src="./inflate.min.js"></script><script src="./OrbitControls.js"></script></head><body><script>/*** 创建场景对象Scene*/var scene = new THREE.Scene();/*** 创建网格模型*/var OBJLoader = new THREE.OBJLoader();//obj加载器var MTLLoader = new THREE.MTLLoader();//材质文件加载器// MTLLoader.load('./all.mtl', function (materials) {////obj的模型会和MaterialCreator包含的材质对应起来//OBJLoader.setMaterials(materials);//OBJLoader.load('./obj/HY_q.obj', function (obj) {// window.obj = obj// scene.add(obj);//返回的组对象插入场景中//})// })var loader = new THREE.FBXLoader();loader.load('./a/b.FBX', function (obj) {//渲染阴影obj.traverse(function (child) {if (child.isMesh) {child.castShadow = true;child.receiveShadow = true;}});obj.position.set(-20, -50, 50)obj.scale.set(0.15, 0.1, 0.1)scene.add(obj);});/*** 光源设置*///点光源// var point = new THREE.PointLight(0xffffff);// point.position.set(400, 200, 300); //点光源位置// scene.add(point); //点光源添加到场景中// //环境光// var ambient = new THREE.AmbientLight(0x444444);// scene.add(ambient);var light = new THREE.HemisphereLight(0xffffff, 0x444444);light.position.set(0, 200, 0);scene.add(light);light = new THREE.DirectionalLight(0xffffff);light.position.set(0, 200, 100);light.castShadow = true;light.shadow.camera.top = 180;light.shadow.camera.bottom = - 100;light.shadow.camera.left = - 120;light.shadow.camera.right = 120;scene.add(light);const width = window.innerWidthconst height = window.innerHeightvar camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);camera.position.set(0, 20, 20);/*** 创建渲染器对象*/var renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);//设置渲染区域尺寸renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色new THREE.OrbitControls(camera, renderer.domElement);document.body.appendChild(renderer.domElement); //body元素中插入canvas对象//执行渲染操作指定场景、相机作为参数function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);}animate()</script></body></html>