21

three.js に関連する webgl の質問があります。オブジェクトに情報を添付したいと考えています。たとえば、オブジェクトをクリックすると、そのオブジェクトに関連付けられている URL などの情報を取得し、その情報を使用して関数を実行したいと考えています。

オブジェクトを見つけるために使用しているコードは次のとおりです。

    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
    projector.unprojectVector(vector, camera);

    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

    var intersects = raycaster.intersectObjects(objects);

    intersects[0].object.material.color.setHex(Math.random() * 0xffffff);

最後の行は、現在オブジェクトを操作している方法です。配列objectsは、単にすべてのオブジェクトの配列です。問題は、Raycaster や intersectObjects がどのように機能するか、または後で呼び出すことができるように情報をオブジェクトに関連付ける方法について十分に知らないことです。

4

1 に答える 1

29

実際、カスタム ユーザー データを Three.js のオブジェクトに設定できます。ここで重要なのは、すべてのシーン グラフ オブジェクトの基礎となる Object3D です。ドキュメントには、というプロパティがあります

Object3D.userData;

これは選択したオブジェクトとともにロードでき、Raycaster クラスが交差を取得すると、その時点で直接アクセスすることができます。

初期化または実行時のセッター

Object3D.userData = { URL: "http://myurl.com" };

衝突時のゲッター

window.location = intersects[0].object.userData.URL;
于 2013-08-19T17:14:45.857 に答える