Three.js入门

• tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es6",
    "module": "es6"
  }
}

5.运行项目，若在01-helloWorld.html中打印出“Hello World”，就说明配置没有问题。hne拜客生活常识网

npm run start

6.多页面。hne拜客生活常识网

在dist 中再建立一个页面 02-box.html，用来显示我们入门时绘制的立方体。hne拜客生活常识网

在src 中建立一个box.js 文件，用于绘制立方体：hne拜客生活常识网

import {
  BoxGeometry,Mesh,MeshNormalMaterial,PerspectiveCamera,Scene,WebGLRenderer,
} from 'three'

const scene = new Scene()
const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )

const canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const renderer = new WebGLRenderer({canvas});

const geometry = new BoxGeometry();
const material = new MeshNormalMaterial();
const cube = new Mesh( geometry, material )
scene.add( cube );

camera.position.z = 5;

function animate() {
  requestAnimationFrame( animate )

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

  renderer.render( scene, camera )
};

animate();

在webpack.config.js 中添加彩色立方体页面所对应的入口hne拜客生活常识网

module.exports = {
  ……
  entry: {
    helloWorld: './src/helloWorld.ts',
    box: './src/box.ts',
  },
  ……
};

启服务后，打开box.html 页面，便可以看见旋转的立方体。hne拜客生活常识网

相关阅读: