У меня есть данные об ускорении, которые я использовал для получения скорости и смещения, как показано ниже:
Предполагая Vo = 10 м/с и Xo = 5 м
Я использую three.JS для рендеринга автомобильной сетки в браузере, которая имитирует движение автомобиля в реальном времени. В соответствии со значениями ускорения будет изменяться смещение, и автомобиль будет двигаться соответственно.
Ниже показано, как выглядит мой набор данных:
Ссылка на набор данных в формате JSON
Я построил модель сетки автомобиля на файле three.JS и пока использовал клавиатуру, чтобы заставить сетку ускоряться и замедляться. Но я хотел бы знать, как интегрировать информацию об ускорении, чтобы автомобиль двигался плавно.
Ниже приведен текущий код:
var clock = new THREE.Clock();
var scene, renderer, camera;
var controls, keyboard = new KeyboardState();
var toycar;
// state variable of toycar
var pos = new THREE.Vector3(1,0,0);
var angle = 0.9;
var speed = 1;
var planeSize = 100000;
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, 5000);
// camera.position.y = 1;
// camera.position.z = 1;
camera.lookAt (new THREE.Vector3(1,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.rotateY(-10.99)
toycar.rotateZ(-6); //toycar.rotateZ(-10.99);
// toycar.rotateX(-10);
scene.add(toycar);
} );
// add control here (after the camera is defined)
//controls = new THREE.OrbitControls (camera, render.domElement);
var gridXZ = new THREE.GridHelper(planeSize, 10);
gridXZ.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
scene.add(gridXZ);
var pointLight = new THREE.PointLight (0xffffff);
pointLight.position.set (10,500,100);
scene.add (pointLight);
var ambientLight = new THREE.AmbientLight (0x111111);
scene.add(ambientLight);
}
function animate()
{
var dt = clock.getDelta();
var dir = new THREE.Vector3(1,0,0); // (1,0,0 to move the car right/left)
dir.multiplyScalar (dt*speed*50); //dir *= dt*speed;
dir.applyAxisAngle (new THREE.Vector3(0,0,0), -10);
pos.add (dir); //pos = pos + dir;
if (toycar != undefined) {
toycar.scale.set (0.1,0.1,0.1);
toycar.position.set (pos.x, 0, 0);
toycar.rotation.x = (angle+Math.PI);
var relativeCameraOffset = new THREE.Vector3 (2500,-90,-10);
var cameraOffset = relativeCameraOffset.applyMatrix4( toycar.matrixWorld );
camera.position.x = cameraOffset.x;
camera.position.y = cameraOffset.y;
camera.position.z = cameraOffset.z;
camera.lookAt( toycar.position );
}
requestAnimationFrame ( animate );
update();
renderer.render (scene, camera);
}
function myclamp(x,lo,hi)
{
if (x < lo) return lo;
if (x > hi) return hi;
return x;
}
function update()
{
//controls.update();
keyboard.update();
// if ( keyboard.pressed("left") )
// angle += 0.01;
// if ( keyboard.pressed("right") )
// angle -= 0.01;
if ( keyboard.pressed("up") )
speed += 1;
if ( keyboard.pressed("down") )
speed -= 1;
speed = myclamp (speed, 0, 100.0);
}
Я понимаю, что мне нужно прочитать данные из строки JSON, но я хотел бы знать эффективный способ чтения данных об ускорении и фактически сделать автомобиль плавным.