three.js:结合tween.js围绕世界轴旋转对象
three.js: rotate object around world axis combined with tween.js
我目前正在尝试在3D中旋转立方体,由于这篇文章(如何在axis world three.js上旋转对象。因此,目前我正在尝试将setFromRotationMatrix完成的旋转转换为可以用作青少年的末端旋转的东西。
编辑:
以下是我目前拥有的:
// function for rotation dice
function moveCube() {
// reset parent object rotation
pivot.rotation.set( 0, 0, 0 );
pivot.updateMatrixWorld();
// attach dice to pivot object
THREE.SceneUtils.attach( dice, scene, pivot );
// set variables for rotation direction
var rotateZ = -1;
var rotateX = -1;
if (targetRotationX < 0) {
rotateZ = 1;
} else if (targetRotationY < 0) {
rotateX = 1;
}
// check what drag direction was higher
if (Math.abs(targetRotationX) > Math.abs(targetRotationY)) {
// rotation
var newPosRotate = {z: rotateZ * (Math.PI / 2)};
new TWEEN.Tween(pivot.rotation)
.to(newPosRotate, 2000)
.easing(TWEEN.Easing.Sinusoidal.InOut)
.start();
//rotateAroundWorldAxis(dice, new THREE.Vector3(0, 0, rotateZ), Math.PI / 2);
} else {
// rotation
var newPosRotate = {x: -rotateX * (Math.PI / 2)};
new TWEEN.Tween(pivot.rotation)
.to(newPosRotate, 2000)
.easing(TWEEN.Easing.Sinusoidal.InOut)
.start();
//rotateAroundWorldAxis(dice, new THREE.Vector3(-rotateX, 0, 0), Math.PI / 2);
}
// detach dice from parent object
THREE.SceneUtils.detach( dice, pivot, scene );
}
多亏了WestLangley,我想我终于接近了一个简单易行的解决方案。初始化枢轴对象时,我将其设置为与骰子完全相同的位置,因此旋转仍将围绕骰子的中心。
var loader = new THREE.JSONLoader();
loader.load(
'models/dice.json',
function ( geometry, materials ) {
material = new THREE.MeshFaceMaterial( materials );
dice = new THREE.Mesh( geometry, material );
dice.scale.set(1.95, 1.95, 1.95);
dice.position.set(2.88, 0.98, 0.96);
scene.add( dice );
pivot = new THREE.Object3D();
pivot.rotation.set( 0, 0, 0 );
pivot.position.set(dice.position.x, dice.position.y, dice.position.z);
scene.add( pivot );
}
);
我拥有的解决方案atm(上面的片段)没有将骰子作为父对象附加到pivot对象。我可能忽略了一些非常基本的东西。。。
编辑结束
因为我认为这是一件非常简单的事情,所以我必须做它才能工作:
我只需要将子对象(骰子)的分离移动到函数的开头,而不是将其放在函数的末尾,它就发挥了魅力。
这是工作代码:
// function for rotating dice
function moveCube() {
// detach dice from parent object first or attaching child object won't work as expected
THREE.SceneUtils.detach( dice, pivot, scene );
// reset parent object rotation
pivot.rotation.set( 0, 0, 0 );
pivot.updateMatrixWorld();
// attach dice to pivot object
THREE.SceneUtils.attach( dice, scene, pivot );
// set variables for rotation direction
var rotateZ = -1;
var rotateX = -1;
if (targetRotationX < 0) {
rotateZ = 1;
} else if (targetRotationY < 0) {
rotateX = 1;
}
// check what drag direction was higher
if (Math.abs(targetRotationX) > Math.abs(targetRotationY)) {
// rotation
var newPosRotate = {z: rotateZ * (Math.PI / 2)};
new TWEEN.Tween(pivot.rotation)
.to(newPosRotate, 2000)
.easing(TWEEN.Easing.Sinusoidal.InOut)
.start();
} else {
// rotation
var newPosRotate = {x: -rotateX * (Math.PI / 2)};
new TWEEN.Tween(pivot.rotation)
.to(newPosRotate, 2000)
.easing(TWEEN.Easing.Sinusoidal.InOut)
.start();
}
}
非常感谢你的帮助!
相关文章:
- 使用tween.js围绕世界轴旋转对象
- 使用d3.js重复世界地图投影
- 在拉斐尔JS世界地图中添加国家点击操作
- Raphael.js世界地图:如何使其可扩展
- 如何展示“你好世界”骨干木偶.js
- 三.js获取具有给定世界方向坐标的场景矢量的对象相对局部方向
- 阿根廷没有出现在世界地图上,d3.js
- HTML/CSS/JS 世界地图与简单的动画
- 传单.js带有非现实世界的地图!坐标
- ember.js是否足够稳定,可以在现实世界的项目中使用
- three.js:结合tween.js围绕世界轴旋转对象
- Three.js世界坐标与正交摄影机的鼠标位置
- 如何获得围绕世界轴旋转三js
- 在Node.js中将Olson/tz时区时间转换为世界时,反之亦然
- Phaser Js-如何在与世界边界碰撞后翻转图像
- 什么是一个很好的搜索压缩半径API或Node.js模块为世界
- 火焰没有显示在THREE.js世界
- 在Three.js中改变子对象的世界位置
- 使用D3.js可视化世界地图,但无法可视化json文件
- Phaser-js与世界边界冲突