как интегрировать ускорение и скорость в Three.JS

У меня есть данные об ускорении, которые я использовал для получения скорости и смещения, как показано ниже:

Акквелдисп

Предполагая 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);      
}

carMeshModel

Я понимаю, что мне нужно прочитать данные из строки JSON, но я хотел бы знать эффективный способ чтения данных об ускорении и фактически сделать автомобиль плавным.


person Sami Arja    schedule 07.04.2021    source источник
comment
Какова единица времени в вашем JSON? Кроме того, похоже, что все значения ускорения равны нулю? Вы также можете просмотреть этот ответ, где я описываю обновление положения анимации в течение фиксированного периода времени, просто в качестве отправной точки.   -  person TheJim01    schedule 07.04.2021
comment
время в мс, умноженное на 24*60*60. Не все, скорость была постоянной большую часть времени, а ускорение немного увеличивалось и уменьшалось со временем.   -  person Sami Arja    schedule 08.04.2021