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

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

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

Предполагая, что Vo = 10 м / с и Xo = 5 м

Я использую three.JS для рендеринга автомобильной сетки в браузере, которая имитирует движение транспортного средства в реальном времени. В соответствии со значениями ускорения смещение изменится, и автомобиль будет двигаться соответственно.

Вот как выглядит мой набор данных:

Как интегрировать ускорение и скорость в 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);      
}

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

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

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

TheJim01 07.04.2021 23:46

время в мс умножается на 24 * 60 * 60. Не все, скорость большую часть времени была постоянной, а ускорение немного увеличивалось и уменьшалось со временем.

Sami Arja 08.04.2021 06:20
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
20
0

Другие вопросы по теме