three-orbitcontrols TypeScript example

版权声明：本文为作者的原创文章，未经允许不得转载。 https://blog.csdn.net/lin5165352/article/details/88535954

budo index.ts --open – -p [tsify]
这个可以直接运行ts文件，不需要html。

https://www.npmjs.com/package/budo

找不到模块“three-orbitcontrols”。这个错误不影响运行，

对于three有ts的描述文件。@types/three 可以按照这个。

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

还有tsconfig.json配置中的module。以及"esModuleInterop": true 等配置项。都是坑。
“module”: “commonjs”, “module”: “es2015”

上面两种写法是有差异的，根据自己的项目配置选择一个合适的写法。（我有的项目加as有的不加）
如果想取消这错误提示，可以在同级目录下新建一个custom-typings.d.ts文件。写入一下内容
declare module '*'
这样就没有提示了。

{
  "name": "three-orbitcontrols-typescript-example",
  "version": "1.0.0",
  "private": true,
  "description": "a simple rotating cube",
  "main": "index.ts",
  "scripts": {
    "start": "budo index.ts --open -- -p [tsify]",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "three-orbitcontrols",
    "typescript",
    "example"
  ],
  "author": {
    "name": "Gianluca Casati",
    "url": "http://g14n.info"
  },
  "license": "MIT",
  "dependencies": {
    "budo": "^11.3.2",
    "three": "^0.96.0",
    "three-orbitcontrols": "^2.96.2",
    "tsify": "^4.0.0",
    "typescript": "^3.0.3"
  }
}

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

const width = window.innerWidth;
const height = window.innerHeight;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

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

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();