There’s a function in my code that loads a gltf object and adds the mesh to the scene. Inside the gltf load call, I can traverse or getobjectbyname without any issues. However, once outside of the gltf load call, the objects seem to disappear completely. Everything else I've added to the scene, like lights, remains visible - only the objects loaded by the gltf load method vanish.
I tried making variables global within the function, thinking it might solve the scope issue, but no luck so far. I’ve inserted comments throughout the code to indicate where it works and where it doesn’t. Any insight into this problem would be highly appreciated. Thank you.
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();
}
}
}