Question

问题

好的，所以我对three.js相对较新，我正在尝试这样做：点击3D空间中的头像，它会相对于此值抓取所选的头像（所以我可以做返回对象。 position.x和returned_object.data.name等...但它不起作用。现在我可以单击一个对象，它会为对象显示three.js SCENE值，但不是我的。

- 编辑附加内容

我希望能够获取头像功能设置的this.data的值 - 点击一个头像。
但是当我console.log(intersects);如下面的代码中所示，它提出了three.js对象，东西。 See this link for a screenshot

我想做console.log(intersects.data);之类的事情并让它返回化身函数中设置的内容

对不起，这很难说出来。

守则

以下是了解所有内容所需的所有代码：

var avatars = [],
        avatar;

avatar = function(id, row) {

    this.data = row;

    this.avatar = new THREE.Object3D();
    this.avatar.add(head);
    this.avatar.position.x = 20 * id;
    //extra

    SCENE.add(this.avatar);

    avatars[id] = this;
}

$(document).click(function(event){
    // calculate mouse position in normalized device coordinates
    // (-1 to +1) for both components

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

    mouse.fx = -mouse.y / 6;
    mouse.fy = (mouse.x / 6) + 0.3;


    CAMERA.rotation.x = ((-mouse.y) / 30) + -0.4;
    CAMERA.position.z = (mouse.y * -20) + 80;
    CAMERA.position.x = (mouse.x * 20);

    raycaster.setFromCamera( mouse, CAMERA );
    var intersects = raycaster.intersectObjects( SCENE.children, true ); // It grabs all the objects in the scene, but I only need it to grab objects in the avatars array.

    console.log(intersects);

    //I want to just do - console.log(intersects.data); - and have it return what is set in the avatar function.
    console.log(intersects);


});

Answer 1

现在我明白了：你的头像由头部或几个物体组成，当然这些物体是由raycaster返回的，但感兴趣的数据在你的头像阵列中。

您可以这样做：每个Object3D都有一个userData对象，您可以在其中放置数据（this.avatar.userData = row;）。由于交叉对象（在这种情况下）是头像（您的头像的子对象），因此您可以通过intersects[0].object.parent.userData访问数据。

也许更好的方法是将id存储在userData对象中。因为你有一个＆＃34;参考＆＃34;到头像阵列。

// save id to userData
this.avatar.userData.id = id;

// accessing avatar
var clickedAvatar = avatars[intersects[0].object.parent.userData.id];
console.log(clickedAvatar.data.name);

three.js在单击时获取相对于此值的对象（对象都在数组中）

问题

守则

1 个答案: