I encountered an issue while attempting to initialize the WebGLRenderer:
(Some unnecessary lines have been omitted)
import * as THREE from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c48544e59597c0c120d0e05120c">[email protected]</a>/build/three.module.js";
import { OrbitControls } from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91e5f9e3f4f4d1a1bfa0a3a8bfa1">[email protected]</a>/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="add9c5dfc8c8ed9d839c9f94839d">[email protected]</a>/examples/jsm/loaders/GLTFLoader.js";
async function load() {
// Setup THREE JS
window.scene = new THREE.Scene();
window.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// Load Model
window.loader = new GLTFLoader();
window.loader.load(
"/assets/shotgun/scene.gltf",
function (gltf) {
const model = gltf.scene;
scene.add(model);
window.shotgun = model;
},
function (xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
function (error) {
console.error(error);
}
);
// Initialize Renderer - Error occurs here
window.renderer = THREE.WebGLRenderer({
canvas: document.getElementById("shotgun"),
antialias: true,
alpha: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
camera.position.set(10, 0, 0);
// Lighting
var light = new THREE.PointLight(0xffffff);
light.position.set(-5, 10, 10);
scene.add(light);
// Helpers
window.ctrl = new OrbitControls(camera, renderer.domElement);
scene.add(new THREE.PointLightHelper(light), new THREE.GridHelper(200, 50));
}
load().then(() => {
document.getElementById("loading").animate({ opacity: 0 }, { fill: "forwards", duration: 1000 });
render();
});
DevTools indicate that the error is in this line:
function WebGLRenderer(parameters) {
parameters = parameters || {};
const _canvas2 = parameters.canvas !== void 0 ? parameters.canvas : createCanvasElement() // ...
let currentRenderList = null;
let currentRenderState = null;
const renderListStack = [];
const renderStateStack = [];
this.domElement = _canvas2; // <----
this.debug = {
checkShaderErrors: true
};
this.autoClear = true;
this.autoClearColor = true;
this.autoClearDepth = true;
...
}
https://i.sstatic.net/mUojx6Ds.png
Additonally, how can I pause code execution during model loading? (Without placing it within the loader's function)
"Your post seems to be mostly code; consider providing more context."
Any suggestions on what additional information to include?