ThreeJS GLTF对象加载后消失

Question

那么，我有一个函数来加载我的gltf对象。我将gltf网格添加到场景中，如果我在gltf load调用中，我可以遍历或getobjectbyname，没有问题。一旦在gltf load调用之外，对象就消失了。消失了。我添加到场景中的其他任何东西都还在那里——比如灯光——它们仍然存在，但是由gltf加载的对象已经消失了。

我在它工作的地方插入了注释，在它不工作的地方。无法判断这是否是范围问题?将变量设为函数的全局变量——我想这样就行了。没有运气。

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

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

发送给加载器的回调函数。加载函数只在模型加载后运行。它不会阻止它下面的代码运行，所以…
在注释"我的gltf对象在这里未定义"的地方。行>模型已加载。你可以把它移到回调函数中，它应该像预期的那样工作。

编辑. .这是一个很好的视频由ColorCode在JS异步函数