Three.js 三个js摄像机运动
我这里没有代码,所以我希望你能理解,我回家后会编辑并添加代码 我构建了一个类移动,一旦初始化,它就会向呈现的dom元素添加一个jquery事件(keyDown) 该事件检查开关盒中的哪个键处于关闭状态 如果钥匙是其中一种情况,相机将相应地移动 相机确实在移动,但出于某种原因,它会闪烁一点,就像小跳跃一样。 摄像机每次移动的速度为0.05 当我在一个外部应用程序中这样做时,但通过主脚本中的javascript按键事件(没有特殊类),它工作得很好 你知道为什么会这样吗 编辑:代码 主脚本:Three.js 三个js摄像机运动,three.js,webgl,Three.js,Webgl,我这里没有代码,所以我希望你能理解,我回家后会编辑并添加代码 我构建了一个类移动,一旦初始化,它就会向呈现的dom元素添加一个jquery事件(keyDown) 该事件检查开关盒中的哪个键处于关闭状态 如果钥匙是其中一种情况,相机将相应地移动 相机确实在移动,但出于某种原因,它会闪烁一点,就像小跳跃一样。 摄像机每次移动的速度为0.05 当我在一个外部应用程序中这样做时,但通过主脚本中的javascript按键事件(没有特殊类),它工作得很好 你知道为什么会这样吗 编辑:代码 主脚本: <
<script>
var moveMec = null;
var loopProg = null;
var renderer = null;
var scene = null;
var camera = null;
var mesh = null;
var earth = null;
var sun = null;
$(document).ready(
function() {
var container = document.getElementById("container");
renderer = new THREE.WebGLRenderer({ antialias: true } );
renderer.setSize(container.offsetWidth,container.offsetHeight);
container.appendChild(renderer.domElement)
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45,
container.offsetWidth / container.offsetHeight, 1, 4000 );
earth = new Earth();
sun = new Sun({x:-10,y:0,z:20});
scene.add(earth.getEarth);
scene.add(sun.sunLight);
camera.position.set( 0, 0, 3 );
moveMec = new moveMechanics(camera,renderer.domElement)
loopProg = new loopProgram();
loopProg.add(function(){earth.update()});
//loopProg.add(function(){renderer.render( scene, camera );});
loopProg.solarLoop();
}
);
</script>
var moveMechanics = function (camera,domElement,speed)
{
moveMechanics.camera = camera;
moveMechanics.speed = speed != undefined ? speed : 0.01;
moveMechanics.domElement = domElement;
$(document).keydown(function(event)
{
switch(event.which)
{
case KeyEvent.DOM_VK_W:
camera.position.z -= moveMechanics.speed;
break;
case KeyEvent.DOM_VK_S:
camera.position.z += moveMechanics.speed;
break;
case KeyEvent.DOM_VK_D:
camera.position.x += moveMechanics.speed;
break;
case KeyEvent.DOM_VK_A:
camera.position.x -= moveMechanics.speed;
break;
}
});
}
循环代码:
function loopProgram()
{
this.functionsToRun = new Array();
this.solarLoop= function()
{
jQuery.each(loopProg.functionsToRun, function(index,value)
{
value ? value() : null;
});
requestAnimationFrame(loopProg.solarLoop);
}
this.add = function(func)
{
this.functionsToRun[this.functionsToRun.length] = func;
}
}
移动摄影机时,是否直接重新渲染场景,而不是执行requestAnimationFrame或允许主重绘“循环”执行它的操作(如果有)?这是我的猜测。我移动相机是因为我想在应用程序中移动,我使用requestAnimationFram。