三 JS / 动画在其 Y 轴上的网格旋转到面方向
Posted
技术标签:
【中文标题】三 JS / 动画在其 Y 轴上的网格旋转到面方向【英文标题】:THREE JS / Animate rotation of a mesh on its Y-axis to face direction 【发布时间】:2013-06-16 16:27:50 【问题描述】:我正在尝试用 THREE.JS 制作类似星际争霸的游戏..
我无法在其 Y 轴上旋转对象以面向新方向,然后更改位置。
旋转是指动画/所以请停止使用糟糕的 lookAt() 函数
如果有人告诉我如何补间一些神奇的 obj.MatrixRotationY(angle),我将不胜感激,我希望从 Vector3 计算出该角度
这是我目前所拥有的:
http://f.cl.ly/items/3J3R0X2q2R1h1J203C1V/drone.jpg
如下所示,我从 Vector3 中获得了新职位。
// scene
var container;
var camera, scene, renderer;
// intersect with objects in this array
var intersectObjects = [];
// materials
var material = new THREE.MeshNormalMaterial();
var cristal_texture = new THREE.MeshLambertMaterial( map: THREE.ImageUtils.loadTexture("models/JSON/textures/cristal.jpg") );
var destination;
init();
animate();
function init()
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 15000 );
camera.rotation.x = - 90 * ( Math.PI / 180 );
camera.position.set( 800 , 1000 , 0 );
scene = new THREE.Scene();
plane = new THREE.Mesh( new THREE.PlaneGeometry( 3000, 3000 ), new THREE.MeshBasicMaterial( color: 0xe0e0e0 ) );
plane.rotation.x = - 90 * ( Math.PI / 180 );
plane.position.set(0,0,0);
plane.overdraw = true;
scene.add( plane );
intersectObjects.push(plane);
loader = new THREE.JSONLoader();
loader.load( "models/JSON/driller.js", function( geometry )
driller = new THREE.Mesh( geometry, material );
driller.position.set(0,50,0);
matr = new THREE.Matrix4();
driller.matrixAutoUpdate = false;
driller.geometry.applyMatrix( matr.makeRotationY( 0 ) );
driller.scale.set(0.5,0.5,0.5);
scene.add( driller );
);
loade = new THREE.JSONLoader();
loade.load( "models/JSON/cristal.js", function( geometry )
cristal = new THREE.Mesh( geometry, cristal_texture );
cristal.position.set(-1450,0,1450);
matre = new THREE.Matrix4();
cristal.matrixAutoUpdate = false;
cristal.geometry.applyMatrix(matre.makeRotationY( 0 ));
cristal.scale.set(0.5,0.5,0.5);
scene.add( cristal );
intersectObjects.push(plane);
);
// lightning properties
var ambientLight = new THREE.AmbientLight(0xFFFFFF);
scene.add(ambientLight);
scene.matrixAutoUpdate = false;
// render engine
renderer = new THREE.WebGLRenderer( antialias: true );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
container.appendChild( renderer.domElement );
// event listeners
document.addEventListener('mouseup', onMouseUp, false);
function onMouseUp(event)
event.preventDefault();
x_pos = (event.clientX / window.innerWidth) * 2 - 1;
y_pos = -(event.clientY / window.innerHeight) * 2 + 1;
z_pos = 0.5;
var vector = new THREE.Vector3( x_pos , y_pos , z_pos );
var projector = new THREE.Projector();
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(intersectObjects);
if (intersects.length > 0)
xp = intersects[0].point.x.toFixed(2);
yp = intersects[0].point.y.toFixed(2);
zp = intersects[0].point.z.toFixed(2);
destination = new THREE.Vector3( xp , 50 , zp );
var se23k = Math.random() * 4 * 4 ;
new TWEEN.Tween( driller.rotation ).to( y: se23k , 1000 ).easing( TWEEN.Easing.Linear.None).start();
else
console.log('outside boundaries');
;
function update()
camera.lookAt( plane.position );
renderer.render( scene, camera );
function animate()
requestAnimationFrame( animate );
update();
render();
function render()
driller.updateMatrix();
cristal.updateMatrix();
TWEEN.update();
renderer.render( scene, camera );
【问题讨论】:
如果旋转是指动画,为什么不直接说呢? “所以请停止使用糟糕的lookAt()函数”是什么意思?似乎您需要将 tween 与 lookAt() 结合使用才能获得所需的效果。您是否尝试在不使用 lookAt() 函数的情况下编写代码? 稍后将尝试提供更大的答案,但这将涉及从欧拉角创建两个 QUAterions,并在它们之间进行转换。 threejs.org/docs/58/#Reference/Math/Quaternion#slerp 此外,如果您删除关于 lookAt 的行,您将获得更少的反对票 - 对于多种情况,lookAt 是一个非常重要且有用的功能。虽然它不适用于您的问题,但它肯定不是“糟糕的”。 【参考方案1】:这里有一些代码可以在指向 Z 轴和指向 X 轴之间平稳地旋转船。
http://youtu.be/jBlDVSBv_m4有一个演示视频
我已经删除了渲染器设置的大部分内容,只专注于四元数 slerping。
以下代码在咖啡脚本中,并使用了来自S3age 的几个自定义类;我已经尽可能地评论了他们。如果这有问题,请在评论中提及,我会将其重写为 VanillaJS。
# RequireJS preamble, not important.
define ["util/stage", "game/clock"],
(Stage, Clock)->
###
# Ship is a constructor.
# It uses no ctor arguments, but does pass them to Object3D.
###
Ship = (Object3DArgs)->
# Ship directly extends Object3D
THREE.Object3D.apply @, arguments
@build()
# The critical piece - use the model's quaternion, not its rotation
@useQuaternion = yes
@
# Finish subclassing, by creating a new prototype chain.
Ship:: = Object.create THREE.Object3D::
###
# Create some geometry, materials, etc. Not important, could be from
# Collada/JSON/etcLoader
# Important part is noticing the rotation and position are set relative to
# the Ship object itself; moving or rotating @ will move/rotate the
# geometry inside it implicitly.
###
Ship::build = ->
geom = new THREE.CylinderGeometry 0, 3, 1.5, 20, 1
mat = new THREE.MeshLambertMaterial
@hull = new THREE.Mesh geom, mat
@hull.scale.set(0.3, 1, 0.1)
@hull.rotation.set(Math.PI / 2, 0, 0)
@hull.position.set(0, 0, 0.33)
@add @hull
@
###
# An easing function, to go from ticks on a frame counter to some
# percentage between zero and one, over the course of some time.
###
ease = do ->
seconds = 4
d = time = (seconds * 60)
b = 0.0
c = 1.0
#easeInOutQuad from http://www.robertpenner.com/easing/
(t) ->
# Constrain `t` between `0` and the animation's duration
t %= d
if ((t /= d/2 ) < 1)
c/2*t*t + b
else
-c/2 * ((--t)*(t-2) - 1) + b
# Y is the axis to rotate through. In this instance, it is the Y axis.
# In general, it should be the "Up" vertex of the model.
# You will calculate this when the user clicks.
y = new THREE.Vector3(0, 1, 0)
# r0 is the initial direction when the animation starts;
# that is, the "up" vector at theta=0
r0 = new THREE.Quaternion()
r0.setFromAxisAngle(y, 0)
# r1 is the desired direction. Calculate theta from the dot product of the
# ship's normal with the vector pointing from the ship to the target (eg
# target.position - ship.position)
r1 = new THREE.Quaternion()
r1.setFromAxisAngle(y, Math.PI / 2)
###
# The update function will get called every physics update.
# Clock has time, delta, and frame.
# Frame is number of ticks, time is total time elapsed,
# delta is time since last update.
###
Ship::update = (clock)->
# Get the prct between zero and one of how far through
# the animation the clock is
prct = ease clock.frame
# Use the static slerp, storing the result directly
# in the ship's quaternion.
THREE.Quaternion.slerp r0, r1, @quaternion, prct
# A convention in my loader, not important.
# Creates a S3age, gets the scene, etc.
play: (selector)->
stage = new Stage selector
stage.scene = new THREE.Scene()
stage.scene.add ship = new Ship()
# Some lights, controls, an axis.
stage.scene.add new THREE.AmbientLight 0x404040
stage.scene.add light = new THREE.PointLight 0xF0F0F0, 1, 100
light.position.set(20, 30, 50)
stage.controls = new THREE.Trackball stage.camera, stage.container
stage.camera.position.set(2, 5, -5)
stage.scene.add new THREE.AxisHelper(2)
# Call the update function every time the clock goes tick-tock
(new Clock()).addEventListener 'tick', (event)->
clock = event.clock
ship.update clock
stage.start()
【讨论】:
我想我会尝试将其中的一些内容添加到 Quaternion 文档中。【参考方案2】:实际上,我找到了更快的解决方案;)
xp = intersects[0].point.x.toFixed(2);
yp = intersects[0].point.y.toFixed(2);
zp = intersects[0].point.z.toFixed(2);
destination = new THREE.Vector3( xp , yp , zp );
radians = Math.atan2( ( driller.position.x - xp) , (driller.position.z - zp));
radians += 90 * (Math.PI / 180);
var tween = new TWEEN.Tween(driller.rotation).to( y : radians ,200).easing(TWEEN.Easing.Linear.None).start();
【讨论】:
我不认为这在一般情况下有效......您正在从指向司钻的原点向量到指向目标的原点向量的旋转,而不是从指向司钻所面对方向的矢量旋转到司钻朝向目标的矢量。 好吧,我就是想要那个。我能说什么以上是关于三 JS / 动画在其 Y 轴上的网格旋转到面方向的主要内容,如果未能解决你的问题,请参考以下文章