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

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

0 голосов
/ 13 сентября 2018

У меня проблема с объединением 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 ().И второй клик тоже не работает.Сообщение об ошибке здесь «камера не определена».

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

Спасибо:)

1 Ответ

0 голосов
/ 21 сентября 2018

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

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

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

например: 

animate() {
    requestAnimationFrame( this.animate );
    this.update();
    this.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', в зависимости от того, что еще вы хотите запустить в своем проекте.

...