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”
上面两种写法是有差异的,根据自己的项目配置选择一个合适的写法。(我有的项目加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();
|
请发表评论