this is bacause your scene is not yet defined in function start();…
use scene.add(root); after scene is created within init(); like so…
import * as THREE from './build/three.module.js';
import { GLTFLoader } from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/loaders/GLTFLoader.js';
let manager, gltfLoader, root, scene, camera, renderer, modelFemale, raycaster, mouse;
start();
function start(){
// LOADING MANAGER --------------------
manager = new THREE.LoadingManager();
manager.onStart = function ( url, itemsLoaded, itemsTotal ) {
console.log( 'loading started');
};
manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
console.log( "loading "+ url);
};
manager.onLoad = function ( ) {
console.log( 'Loading complete!');
init();
animate();
};
manager.onError = function ( ) {
console.log( 'There was an error loading ');
};
// END OF LOADING MANAGER ---------------
// Calling GLTF Loader
gltfLoader = new GLTFLoader(manager);
gltfLoader.load('models/testFObj.glb', function(gltf) {
root = gltf.scene;
modelFemale = root.getObjectByName('Female');
console.log(modelFemale);
renderer.render(scene, camera);
});
}
function init() {
scene = new THREE.Scene();
scene.add(root);
const fov = 75;
const near = .1;
const far = 1000;
try it like this first, if you get an error saying root is not an instance of Object3D() you need to change “let root” at the top to const root = new THREE.Object3D();
, no errors whatsoever ,