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: '<html><style>body{margin: 0}</style><body></body></html>'
})
],
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();
