three-orbitcontrols使用

package.json

{
  "name": "three-orbitcontrols-code",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "three": "0.110.0",
    "three-orbitcontrols": "2.110.3"
  },
  "devDependencies": {
    "html-webpack-plugin": "4.5.0",
    "ts-loader": "6.2.2",
    "typescript": "4.3.5",
    "webpack": "4.42.1",
    "webpack-cli": "3.3.12",
    "webpack-dev-server": "3.11.2"
  }
}

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'source-map',
    plugins: [
        new HtmlWebpackPlugin({
            templateContent: ''
        })
    ],
    resolve: {
        extensions: ['.ts', '.js']
    },
    devServer: {
        compress: true,
        stats: {
            assets: false,
            builtAt: true,
            modules: false,
            entrypoints: false,
            /**
             * ts-node transpileOnly: true
             * if you enable this option, webpack 4 will give you "export not found" warnings any time you re-export a type:
             * The reason this happens is that when typescript doesn't do a full type check, 
             * it does not have enough information to determine whether an imported name is a type or not, 
             * so when the name is then exported, typescript has no choice but to emit the export. 
             * Fortunately, the extraneous export should not be harmful, so you can just suppress these warnings:
             */
            // warningsFilter: /export .* was not found in/
        },
    },
};

src/three-orbitcontrols.d.ts

declare module 'three-orbitcontrols' {
    class OrbitControls {
        constructor( camera: THREE.Camera, dom: HTMLElement );
    }

   export = OrbitControls;
}

src/index.ts

import * as THREE from 'three';
import OrbitControls from 'three-orbitcontrols';

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// 创建mesh
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh(geometry, material);

// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0xeaeaea );
scene.add(cube);

// 添加控制器
new OrbitControls(camera, document.body);

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();