ThreeJS: переместить камеру в определенные координаты, используя tween.js - onClick

Question

У меня возникла проблема с комбинированием Tween.js и ThreeJS для анимации и перемещения камеры. Я включаю их обоих в свой шаблон реакции.

Что я хочу: я хочу щелкнуть по объекту, и камера должна затем плавно перейти к заранее заданным координатам. Но я не могу заставить его работать и не могу найти никакой документации о том, как это сделать. Все фрагменты кода, которые я нашел до сих пор, терпят неудачу или отсутствуют в документации. Это мой код:

const THREE = require('three');
const TWEEN = require('tween.js');
const OrbitControls = require('three-orbit-controls')(THREE);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var cameraPosition = new THREE.Vector3();
var objects = [];

export default class App {

    constructor () {
        this.alive = true;
        this.init();
    }

    init () {
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, .1, 1000);
        this.renderer = new THREE.WebGLRenderer( { antialias: true } );
        this.renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.prepend( this.renderer.domElement );
        window.addEventListener("mousedown", this.onclick, true);
        requestAnimationFrame(this.update);

        this.test();
        this.start();
    }

    onclick(e) {
        new TWEEN.Tween( cameraPosition )
          .to( {
            x: 20,
            y: 20,
            z: 20}, 2000 )
          .easing( TWEEN.Easing.Sinusoidal.EaseInOut)
          .start();
    }

    test () {
        this.displayA= new ModelLoader();
        this.displayA.loadModel('./models/display-A.obj', (obj) => {
            obj.scale.set(.5, .5, .5);
            obj.position.z = 0;
            obj.position.y = 5;
            obj.position.x = 0;
            obj.rotation.x = this.deg2rad(-90);
            obj.rotation.y = this.deg2rad(0);
            obj.rotation.z = this.deg2rad(90);
            obj.name = "Display";
            console.log(obj.name);
            this.object = new THREE.Group();
            this.object.add(obj);
            this.scene.add(this.object);
            this.object.name = "Display";
            objects.push(this.object);
        });
    }

    render () {

        this.update();
        this.renderer.render( this.scene, this.camera );
        requestAnimationFrame(this.render.bind(this));

    }

    update () {
        this.camera.position.copy(cameraPosition);
    }

Прежде всего, камера не двигается, так как я получаю "это" не определено ". указывая на строку внутри функции update(). И второй клик тоже не работает. Сообщение об ошибке здесь "камера не определена".

Было бы удивительно, если бы кто-то мог помочь мне с этим.

Спасибо:)

Answer 1

Ваш запрос requestAnimationFrame должен запускать ваш метод render (), а не метод update (). Затем метод update () вызывается внутри метода render ().

Хотя я вижу this.start() Вызван, но нет ссылки на этот метод, так что не знаете, что это делает?

Я бы добавил animate() метод для обработки update () и render (), который вызывается для requestAnimationFrame().

Например:

animate() {
    requestAnimationFrame( this.animate );
    this.update();
    this.render();
}

Render () станет:

render () {
    TWEEN.update();
    this.renderer.render( this.scene, this.camera );
}

Затем внутри init (), где у вас есть requestAnimationFrame(this.update); - заменить this.animate();

Вам может потребоваться обновить ссылку на eventListener:

window.addEventListener("mousedown", e => this.onclick(e), true);

Это должно исправить проблемы с областью видимости, которые у вас возникают. Tween.js выглядит нормально, но без демонстрации я не могу сказать наверняка, и ссылки на this.start (), которого нет в фрагменте кода, поэтому не могут этого объяснить.

Также нет причины, по которой метод Tween не мог обновить this.camera.position значения объекта вместо Vector3 CameraPosition, в зависимости от того, что еще вы хотите запустить в своем проекте.