这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战
* 加载外部fbx模型文件的过程
1.通过FBXLoader加载fbx模型文件之后，贴图无法显示的问题，
解决：手动用THREE.TextureLoader()加载贴图，生成贴图对象，然后赋值给模型对象的材质对象的map属性，例如fbx.children[0].material.map = map4
2.如何获取模型对象，
解决：加载完fbx模型文件后,log一下打印结果，childrens里保存的就是每个模型对象
3.下面是具体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<!-- <script src="./node_modules/three/examples/js/loaders/OBJLoader.js"></script>
<script src="./node_modules/three/examples/js/loaders/MTLLoader.js"></script> -->
<!-- 引入fbx模型加载库FBXLoader -->
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/loaders/FBXLoader.js"></script>
<!-- 辅助文件 -->
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/libs/inflate.min.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<script>
var FBX = "";
var scene = new THREE.Scene();
var map1 = new THREE.TextureLoader().load('./textures/big_parts_col.jpg');
var map2 = new THREE.TextureLoader().load('./textures/big_parts_nor.jpg');
var map3 = new THREE.TextureLoader().load('./textures/big_parts_rough.jpg');
var map4 = new THREE.TextureLoader().load('./textures/fire_alpha.jpg');
var map5 = new THREE.TextureLoader().load('./textures/fire_col.jpg');
var map6 = new THREE.TextureLoader().load('./textures/small_parts_col.jpg');
var map7 = new THREE.TextureLoader().load('./textures/small_parts_rough.jpg');
var loader = new THREE.FBXLoader();
loader.load( 'trabant_realtime_v3.fbx', function ( fbx ) {
console.log(fbx);
FBX=fbx;
fbx.children[0].material.map = map4
fbx.children[1].material.map = map2
fbx.children[2].material.map = map6
fbx.children[3].material.map = map7
scene.add( fbx );
} );
//点光源
var point = new THREE.PointLight(0xcccccc);
point.position.set(400, 1000, 400); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
// console.log(scene)
// console.log(scene.children)
/**
* 相机设置
*/
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
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对象
//执行渲染操作 指定场景、相机作为参数
function render() {
renderer.render(scene, camera);
}
var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
controls.addEventListener('change', render);//监听鼠标、键盘事件
</script>
</body>
</html>
