Attempting to delve into typescript alongside three.js, I've encountered a perplexing error that has me stumped. The root of the issue lies within the init function where I initialize a new THREE.OrbitControls controller. Utilizing the setup provided at https://github.com/pinqy520/three-typescript-starter.
Error message received: Uncaught TypeError: Cannot read property 'prototype' of undefined
// Import necessary libraries
import * as THREE from 'three';
import * as ColladaLoader from 'three-collada-loader';
import * as OrbitControls from 'three-orbit-controls';
// Define scene dimensions
const WIDTH: number = window.innerWidth;
const HEIGHT: number = window.innerHeight;
// Set camera attributes
const VIEW_ANGLE: number = 45;
const ASPECT: number = WIDTH / HEIGHT;
const NEAR: number = 0.1;
const FAR: number = 10000;
// Initialize WebGL renderer, camera, and scene
const renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer();
const camera: THREE.PerspectiveCamera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
const scene: THREE.Scene = new THREE.Scene();
// Load model into scene
let monster: any;
const loader: ColladaLoader = new ColladaLoader();
loader.options.convertUpAxis = true;
loader.load(
'/src/monster.dae',
(collada: THREE.ColladaModel): void => {
monster = collada.scene;
monster.scale.set(0.001, 0.001, 0.001);
monster.position.set(0, 0.1, 0);
scene.add(monster);
init();
animate()
});
// Initialization function
const init = (): void => {
// Get DOM element for rendering
const container = document.querySelector('#canvas');
// Set camera position and add to scene
camera.position.set(0, 2, 10)
scene.add(camera);
// Create grid helper
const gridHelper: THREE.GridHelper = new THREE.GridHelper(10, 20);
scene.add(gridHelper);
// Add ambient light
const ambientLight: THREE.AmbientLight = new THREE.AmbientLight(0xcccccc)
scene.add(ambientLight);
// Add directional light
const directionalLight: THREE.DirectionalLight = new THREE.DirectionalLight((0xffffff));
directionalLight.position.set(0, 1, -1).normalize;
scene.add(directionalLight);
// Configure renderer settings
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(WIDTH, HEIGHT);
// Attach renderer-supplied DOM element
container.appendChild(renderer.domElement);
// Instantiate OrbitControls for camera manipulation
let controls: THREE.OrbitControls = new OrbitControls(camera, renderer.domElement);
}
// Recursive animation loop
let animate = (): void => {
requestAnimationFrame(animate);
render();
}
// Rendering function
let render = (): void => {
renderer.render(scene, camera);
}