This is the 24th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

* The process of loading external FBX model files

1. After loading FBX model file by FBXLoader, the map cannot be displayed.

3. Use three.textureLoader () to load the map, generate the map object, and assign the map property of the material object of the model object, for example, fbx.children[0].material. Map = map4

2. How to obtain model objects

Solution: After loading the FBX model file,log the print result. Childrens stores each model object

3. Here is the specific code

<! 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> --> <! FBXLoader --> <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/loaders/FBXLoader.js"></script> <! Supporting documentation - - - > < 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) /** * Camera Settings */ var width = window.innerWidth; Var height = window.innerheight; Var k = width/height; Var s = 200; OrthographicCamera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); camera.position.set(200, 300, 200); // Set the camera position camera.lookat (scene.position); Var renderer = new three.webglrenderer (); renderer.setSize(width, height); // Set the size of the render area renderer.setClearColor(0xB9D3ff, 1); / / set the background color document. The body. The appendChild (the renderer. DomElement accordingly); Function render() {renderer.render(scene, camera); } var controls = new THREE.OrbitControls(camera,renderer.domElement); / / create the control object controls. AddEventListener (' change ', render); </script> </body> </ HTML >Copy the code