问题描述
我有一个完整的汽车网格模型,使用 Three.JS 向右、向左、向上和向下移动 输入数据是 X 和 Z 方向上的加速度,我们对加速度应用二重积分来计算位移。所以我已经能够在各个方向上为汽车设置动画,并使背景移动以使汽车保持在画布的中心。但是,我只需要background 左右移动,而不是上下移动
这是我的代码:
<html>
<head>
<style>
canvas {
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<script src="./libs/three.min.js"></script>
<script src="./libs/OrbitControls.js"></script>
<script src="./libs/KeyboardState.js"></script>
<script src="./libs/MTLLoader.js"></script>
<script src="./libs/OBJMTLLoader.js"></script>
<script src="./data/accXaccZCOMBINEDMOTIONS.json"></script>
</body>
<script>
var data = JSON.parse(JSON.stringify(data));
var toycar;
var valid = 1;
const dispArrayX = Array.from({ length: 1 }).fill(0);
const dispArrayZ = Array.from({ length: 1 }).fill(0);
let sensorValue = 0;
var initialVeLocity = 0;
var angle = 0;
var currentIndex = 0;
var initialdisplacement = 0;
var scene,renderer,camera;
var width = window.innerWidth;
var height = window.innerHeight;
var time = data[currentIndex].time
var pos = new THREE.Vector3(0,0);
init();
animate();
function init() {
var width = window.innerWidth;
var height = window.innerHeight;
renderer = new THREE.Webglrenderer({ antialias: true,alpha: true });
renderer.setClearColor(0x626d73,1);
renderer.setSize(width,height);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(10,width / height,1,10000);
// camera.position.y = -150;
// camera.position.y = 200;
// camera.position.x = 100;
camera.lookAt(new THREE.Vector3(0,0));
var loader = new THREE.OBJMTLLoader();
loader.load('https://jyunming-chen.github.io/tutsplus/models/toycar.obj','https://jyunming-chen.github.io/tutsplus/models/toycar.mtl',function (object) {
toycar = object;
toycar.rotateZ(10.8); //toycar.rotateZ(-10.99);
scene.add(toycar);
});
var gridXZ = new THREE.GridHelper(100000,10);
gridXZ.setColors(new THREE.Color(0xff0000),new THREE.Color(0xffffff));
scene.add(gridXZ);
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(350,10,5);
scene.add(pointLight);
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
}
function animate(dt) {
let time = data[currentIndex].time
dt *= 10 ** -9
time += dt
while (data[currentIndex].time < time) {
currentIndex++
if (currentIndex >= data.length) return
}
const { accX,accZ } = data[currentIndex]
var dir = new THREE.Vector3(0,-1);
dir.applyAxisAngle(new THREE.Vector3(0,0),10);
pos.add(dir);
if (toycar != undefined) {
toycar.scale.set(0.1,0.1,0.1);
if (currentIndex > 0) {
// compute the displacement by double integrating the acceleration for accZ (e.i. Right and left movement)
const deltaTime = ((data[currentIndex].time) / (24 * 60 * 60)) - 1; // convert time from second per day to second
const veLocityInitialZ = ((data[currentIndex-3].accZ + data[currentIndex-2].accZ)/2)*deltaTime; // compute initialVeLocity two step backward
const veLocityCurrentZ = veLocityInitialZ + ((data[currentIndex-1].accZ + data[currentIndex].accZ)/2)*deltaTime; // compute currentVeLocity one step backward
const prevIoUsdispZ = dispArrayZ[0] + (deltaTime * ((veLocityCurrentZ + veLocityInitialZ)/2));
dispArrayZ[0] = prevIoUsdispZ;
const dispCurrentZ = prevIoUsdispZ + dispArrayZ[0];
// compute the displacement by double integrating the acceleration for accX (e.i. Up and down movement)
const veLocityInitialX = ((data[currentIndex-3].accX + data[currentIndex-2].accX)/2)*deltaTime; // compute initialVeLocity two step backward
const veLocityCurrentX = veLocityInitialX + ((data[currentIndex-1].accX + data[currentIndex].accX)/2)*deltaTime; // compute currentVeLocity one step backward
const prevIoUsdispX = dispArrayX[0] + (deltaTime * ((veLocityCurrentX + veLocityInitialX)/2));
dispArrayX[0] = prevIoUsdispX;
const dispCurrentX = prevIoUsdispX + dispArrayX[0];
const dispCurrentXscaled = dispCurrentX/3500;
// Move the car up and down
if (dispCurrentXscaled*0.0001 < 0){
toycar.position.x = dispCurrentXscaled*0.00001;
}
else if (dispCurrentXscaled*0.0001 > 8){
toycar.position.x = dispCurrentXscaled*0.0000001;
}
else{
toycar.position.x = dispCurrentXscaled*0.0001;
}
toycar.position.y = 0;
// Move the car right and left
toycar.position.z = -(dispCurrentZ/4000)*0.0005;
// print out displacementX and displacementZ
console.log("dispX: " + (dispCurrentX*0.0000001).toFixed(5) + " dispZ: " + ((dispCurrentZ/4000)*0.0005).toFixed(5));
}
toycar.rotation.x = (angle + Math.PI);;
var relativeCameraOffset = new THREE.Vector3(-1600,400,0);
var cameraOffset = relativeCameraOffset.applyMatrix4(toycar.matrixWorld);
camera.position.x = cameraOffset.x*0.5;
camera.position.y = cameraOffset.y;
camera.position.z = cameraOffset.z;
camera.lookAt(toycar.position);
}
requestAnimationFrame(animate);
renderer.render(scene,camera);
}
</script>
</html>
我使用 JSON 文件作为输入。
这就是汽车运动的样子:
您可以看到背景跟随汽车运动。对于上下,我只需要汽车移动(而不是背景),左右都很好,因为正在移动,所以它留在画布内。你能帮忙吗?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)