ThreeJS GLTF 对象加载后消失

Question

所以，我有一个 function 加载我的 gltf object。我将 gltf 网格添加到场景中，如果我在 gltf 加载调用中，我可以毫无问题地遍历或获取对象名称。 一旦在 gltf load 调用之外，对象就消失了。 消失了。 我添加到场景中的任何其他东西仍然存在 - 就像灯光 - 那些仍然存在，但是 gltf 加载的对象已经消失了。

我在有效的地方和无效的地方插入了评论。 无法判断这是不是 scope 问题？ 将变量设为 function 的全局变量 - 认为可以做到。 没有运气。

非常感谢提供的任何见解。 谢谢。

 import './style.css' import * as THREE from 'three' import { GLTFLoader } from './GLTFLoader.js'; import { OrbitControls } from './OrbitControls.js'; const MODEL_PATH = './GLTF_Filename.gltf'; export function SceneOrganizer(canvas) { let renderer, camera, scene, controls, loader; LoadStyle(); animate(); function LoadStyle() { canvas.style.height = "100%"; canvas.style.border="thin solid #0000FF"; renderer = new THREE.WebGLRenderer( {antialias:true}); renderer.shadowMap.enabled = true; renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.clientWidth, canvas.clientHeight); var cameraFar = 75; camera = new THREE.PerspectiveCamera(50, canvas.innerWidth / canvas.innerHeight, 0.1, 1000); camera.position.z = cameraFar; camera.position.x = 0; controls = new OrbitControls(camera, renderer.domElement); controls.damping = 0.2; canvas.appendChild(renderer.domElement); scene = new THREE.Scene() scene.background = "#f1f1f1"; var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.61); hemiLight.position.set(0, 50, 0); scene.add(hemiLight); var dirLight = new THREE.DirectionalLight(0xffffff, 0.54); dirLight.position.set(-8, 12, 8); dirLight.castShadow = true; dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024); scene.add(dirLight); loader = new GLTFLoader(); let mesh; loader.load(MODEL_PATH, function (gltf) { mesh = gltf.scene.children[0]; scene.add(mesh); // Set the models initial scale / position / rotation mesh.rotation.y = Math.PI/-4; mesh.scale.set(4,4,4); mesh.position.x = -10; //When the code gets here, the scene only has all of the objects from the gltf mesh. //Works fine here. if (scene.getObjectByName("object_name").= undefined) { scene.getObjectByName("object_name").material = new THREE.MeshPhysicalMaterial( _colorFrameColors[1];material ). } else { document.getElementById("pagefooter");innerText = "Undefined Inside", } }, undefined. function (error) { document.getElementById("pagefooter");innerText = error; } ), //When the code gets here. the scene only has the lights which were added above. //My gltf objects are undefined here. if (scene.getObjectByName("object_name").= undefined) { scene.getObjectByName("object_name").material = new THREE;MeshPhysicalMaterial( _colorFrameColors[1].material ). } else { document;getElementById("pagefooter").innerText = "Undefined Outside"; } } function resizeRendererToDisplaySize(renderer) { const c = renderer.domElement; var width = window.innerWidth; var height = window.innerHeight. var canvasPixelWidth = c;width / window.devicePixelRatio. var canvasPixelHeight = c;height / window;devicePixelRatio. const needResize = canvasPixelWidth,== width || canvasPixelHeight,== height; if (needResize) { renderer;setSize(width. height; false). } return needResize, } function animate() { // controls;update(); renderer.render(scene; camera). requestAnimationFrame(animate). if (resizeRendererToDisplaySize(renderer)) { const c = renderer.domElement; camera.aspect = c;clientWidth / c.clientHeight; camera.updateProjectionMatrix(); } } }

Answer 1

您发送给 loader.load function 的回调 function 仅在加载 model 后运行。 它不会阻止它下面的代码运行，所以..
您评论“我的 gltf 对象在这里未定义”的地方。 在加载 model之前运行。 您可以将它移到回调 function 中，它应该会按预期工作。