javascript - Three.js 通过鼠标单击切换对象位置

Question

我正在尝试重新创建此站点的点击效果，（输入并滚动以查看魔术）。当您单击图片时，它会在相机前面移动到前面和中间。当您再次单击它时，它会回到原来的位置。我无法将对象带回其原始位置，因为当对象移动时这些坐标会丢失。

我通过将 Vector3 存储在一个全局数组中并调用这些位置来让它工作，但是我设置它的方式，如果相机移动它会中断（相机出于某种原因喜欢自行移动）。

这是我尝试过的。

var coordArray = [new THREE.Vector3(0, 0, 0)];
var raycaster = new THREE.Raycaster();  // raycaster for click events
var mouse = new THREE.Vector2();  //mouse coords
function onMouseClick(event){
    event.preventDefault();

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObjects(scene.children, true) //return array based on objects that interact with it
    for(var i=0; i<intersects.length; i++){ 
        this.tl = new TimelineMax();
        originalCoords = new THREE.Vector3(intersects[0].object.position.x, intersects[0].object.position.y, intersects[0].object.position.z);
        coordArray.push(originalCoords);

        if(intersects[0].object.position.z != camera.position.z - 5)
            this.tl.to(intersects[0].object.position, 1, {x: 0, y: 0, z: camera.position.z - 5, ease: Expo.easeOut});
        else
            this.tl.to(intersects[0].object.position, 1, {x: coordArray[coordArray.length-2].x, y: coordArray[coordArray.length-2].y, z: coordArray[coordArray.length-2].z, ease: Expo.easeOut});           
    }
}

任何帮助将不胜感激。我完全希望会因为我的无知以及许多其他随机细节而受到抨击。答案值得尴尬：p

标签： javascriptthree.js

Answer 1

通过将立方体的初始位置存储为它的名称，我能够获得我想要的效果。

    cube.position.set(-10, 5, -10);
    cube.name = "-10 5 -10";

然后在我的点击事件中拆分空间的名称并使用索引作为坐标

var raycaster = new THREE.Raycaster();  // raycaster for click events
var mouse = new THREE.Vector2();  //mouse coords
function onMouseClick(event){
    event.preventDefault();

    // Get position of the mouse on click
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObjects(scene.children, true) //return array based on objects that interact with it
    for(var i=0; i<intersects.length; i++){ 
        this.tl = new TimelineMax();

        var initialPosition = intersects[0].object.name.split(" ");

        if(intersects[0].object.position.z != camera.position.z - 5){
            this.tl.to(intersects[0].object.position, 1, {x: 0, y: 0, z: camera.position.z - 5, ease: Expo.easeOut});
        }
        else{
            this.tl.to(intersects[0].object.position, 2, {x: initialPosition[0], y: initialPosition[1], z: initialPosition[2], ease: Expo.easeOut});
        }
    }