Threejs: переместите камеру к определенным координатам с помощью tween.js - onclick

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

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

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 ()». А во-вторых, щелчок тоже не работает. Здесь появляется сообщение об ошибке «камера не определена».

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

Спасибо :)

Прежде всего, попробуйте добавить TWEEN.update(); в цикл рендеринга.

prisoner849 13.09.2018 22:29

Сделал это. Но я думаю, что главная проблема по-прежнему заключается в том, что камера не распознает: TypeError: this is undefined <- указывает на update () { this.camera.position.copy(cameraPosition); }

pixelbash 13.09.2018 22:50

Вы можете принять этот ответ, чтобы использовать Tween.js и правильно обновить обратный вызов: stackoverflow.com/questions/36679873/…

Brakebein 14.09.2018 09:53
0
3
693
1

Ответы 1

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

Хотя я вижу, что вызывается 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', в зависимости от того, что еще вы хотите запустить в своем проекте.

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