wechat-miniprogram/threejs-miniprogram

类似tween.js引用使用

Closed this issue · 1 comments

hello,想问下如何引用tween.js控制动画==

1、在项目中npm安装tween.js
npm i @tweenjs/tween.js@^18

2、微信开发者工具--菜单栏的工具--点击”构建npm“
结果:项目中会出现miniprogram_npm目录

3、在代码中引用tween.js
`
const TWEEN = require('@tweenjs/tween.js');

`

4、配置tween.js的参数,以下是示例代码:
`
var coords = {
x: 0,
y: 0,
};
var tween = new TWEEN.Tween(coords )
.to({
x: [0,1,2,3,4],
y: [0,-1,-2,-3,-4],
}, 1000)
.onUpdate(function() {
模型.position.x = this.x;
模型.position.y = this.y;
})
.delay(100)
.start();

`

5、将TWEEN.update()增加在requestAnimationFrame的更新中
`
function animate() {
// tween.js的更新
TWEEN.update();
// requestAnimationFrame的更新
requestId = canvas.requestAnimationFrame(animate);
renderer.render(scene, camera);
}

`