Как оживить с интерполяцией - PullRequest
Новая
       15

Как оживить с интерполяцией

0 голосов
/ 30 мая 2019

Я оживляю простой куб в three.js, но я застрял. Как заставить анимацию останавливаться, когда она достигает 1, а затем снова и снова идти к -1. 

"use strict";

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x404040, 1);
document.body.appendChild(renderer.domElement);

var clock = new THREE.Clock();
clock.start();
var t = 0;

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshPhongMaterial({
    color: 0x008080,
    specular: 0xffffff,
});
var cube = new THREE.Mesh(geometry, material);
var light = new THREE.PointLight(0xffffff, 6, 40);
var alight = new THREE.AmbientLight(0xffffff);
scene.add(alight);
light.position.set(20, 20, 20);
scene.add(light);
cube.add(createAxes(1));
scene.add(cube);

scene.add(createAxes(5));
renderer.render(scene, camera);

var controls = new THREE.TrackballControls(camera);
controls.addEventListener('change', render);
animate();

function render() {
    renderer.render(scene, camera);
}

function animate() {
    var dt = clock.getDelta();
    t += dt;

    var v = THREE.Math.lerp(-1, 1, t);
    cube.position.x = v;

    render();
    requestAnimationFrame(animate);
    controls.update();
}

Я пытался использовать цикл в animate(), чтобы изменить v, когда он достигнет 1 или -1: 

var v = THREE.Math.lerp(-1, 1, t);

if (v > 1) {
    v = THREE.Math.lerp(1, -1, t);
}
if (v < -1) {
    clock.stop();
}
cube.position.x = v;

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

...