Three.js

[WangShuXian6]

Threejs

十分钟打造 3D 物理世界 https://aotu.io/notes/2018/10/18/cannonjs/index.html

[WangShuXian6]

新建平面对象

const arrow = new THREE.Mesh(new THREE.PlaneGeometry(1, 2),
new THREE.MeshBasicMaterial({
color: 0xff0000
})
);

设置物体坐标

arrow.position.set(0,0,0)

arrow.position.x = 0 arrow.position.y = 0 arrow.position.z = 0

>设置物体旋转后的旋转角度[固定角度][多次调用角度不变]
```ts
arrow.rotation.x = Math.PI / 180 * 1
arrow.rotation.y = Math.PI / 180 * 1
arrow.rotation.z = Math.PI / 180 * 1

物体旋转一定角度[增量][多次调用角度累加]

arrow.rotateX(Math.PI / 180 * 1)
arrow.rotateY(Math.PI / 180 * 1)
arrow.rotateZ(Math.PI / 180 * 1)

[WangShuXian6]

使用调试 dat.gui

npm i dat.gui -S

import * as dat from 'dat.gui';

arrowPosition = {
    x: 0,
    y: 155,
    z: 2,
}

const gui = new dat.GUI();

gui
    .add(this.arrowPosition, "x")
    .name("arrowPosition X")
    .min(-5)
    .max(5);

render() {
    this.arrow.position.set(this.arrowPosition.x, this.arrowPosition.y, this.arrowPosition.z)
    this.renderer.render(this.scene, this.camera);
    requestAnimationFrame(() => this.render());
  }

直接修改，无需在循环中引用参数

setupGUI() {
const gui = new DAT.GUI();
gui
.add(this.camera.position, "x")
.name("Camera X")
.min(0)
.max(100);
gui
.add(this.camera.position, "y")
.name("Camera Y")
.min(0)
.max(100);
gui
.add(this.camera.position, "z")
.name("Camera Z")
.min(0)
.max(100);
}

[WangShuXian6]

使用

npm install es6-tween -S

import { Easing, Tween, autoPlay, update } from 'es6-tween';

let vm
export class Application {
    constructor(opts = {}) {
        vm = this
    }

    cameraAnmationFirst() {
        new Tween(vm.camera.position)
            .to({ x: 0, y: 1000, z: 0 }, 10000)
            .start();
    }

    render() {
        update()
        this.renderer.render(this.scene, this.camera);
        requestAnimationFrame(() => this.render());
    }
}