Question

我正在尝试用three.js学习打字稿，但无法弄清楚为什么我会收到这个错误。在init函数中，我正在创建一个新的THREE.OrbitControls控制器。使用https://github.com/pinqy520/three-typescript-starter作为设置。

收到错误：未捕获的TypeError：无法读取未定义的属性'prototype'

    // three.
    import * as THREE from 'three';
    import * as ColladaLoader from 'three-collada-loader';
    import * as OrbitControls from 'three-orbit-controls';

// Set the scene size
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;



// Create a WebGL renderer, camera
// and a 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 a model into the 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()
    });

const init = (): void => {
    // Get the DOM element to attach to
    const container = document.querySelector('#canvas');

    // Set the position of the camera
    // and add it to the scene
    camera.position.set(0, 2, 10)
    scene.add(camera);

    //
    const gridHelper: THREE.GridHelper = new THREE.GridHelper(10, 20);
    scene.add(gridHelper);

    //
    const ambientLight: THREE.AmbientLight = new THREE.AmbientLight(0xcccccc)
    scene.add(ambientLight);

    const directionalLight: THREE.DirectionalLight = new THREE.DirectionalLight((0xffffff));
    directionalLight.position.set(0, 1, -1).normalize;
    scene.add(directionalLight);

    // Start the renderer
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(WIDTH, HEIGHT);

    // Attach the renderer-supplied
    // DOM element.
    container.appendChild(renderer.domElement);

    // Create a controll class around
    // the camera
    debugger
    let controls: THREE.OrbitControls = new OrbitControls(camera, renderer.domElement);
}

// Recursive function
let animate = (): void => {

    requestAnimationFrame(animate);

    render();

}

// Recursive rendering function
let render = (): void => {
    renderer.render(scene, camera);

}

Answer 1

将threejs的最新版本更改为使用模块的默认导出方式。

所以，而不是使用：

import THREE from 'three';

您应该使用：

import * as THREE from 'three';

Answer 2

我最终使用了这个： https://www.npmjs.com/package/orbit-controls-es6

要注意的一点点差异：

new OrbitControls代替new THREE.OrbitControls

import OrbitControls from 'orbit-controls-es6';

const controls = new OrbitControls(camera, renderer.domElement);

Answer 3

根据这个 post on GITHUB 该语法不再有效。所以改变像这样的OrbitControl：

＆＃13;

	THREE.EventDispatcher.apply( this );

＆＃13;

使用THREE.js，THREE.OrbitControls和typescript实例化THREE.OrbitControls类时，未定义THREE.EventDispatcher

3 个答案: