• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

three-orbitcontrols TypeScript example

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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();

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
6、typeScript中的泛型发布时间:2022-07-18
下一篇:
TypeScript开发工具配置发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap