Я пытаюсь найти способ использовать 3D-модель, созданную с помощью Three.js, в качестве гиперссылки. Другими словами, если я нажму на куб (THREE.CubeGeometry), я хочу, чтобы открылась другая страница.
Например, в этом примере threejs.org
как я могу изменить это, чтобы вместо того, чтобы делать маленькие точки на полях, нажатие на коробки открывало другую страницу, например, гиперссылку?
Один из способов добиться этого — связать пользовательские данные пользователя (URL) с каждым кубом при его создании.
Итак, вот пример кода, как мы можем помещать данные в кубы во время их генерации (в jsfiddle аналогичная логика используется между строками 25-63)
var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
color: Math.random() * 0xffffff }));
object.userData = { URL: "http://stackoverflow.com"};
Теперь здесь мы используем метод под названием raycasting для обнаружения щелчка мыши, поэтому в принципе, когда мышь щелкнут, мы отбрасываем луч (невидимый) в плоскость, перпендикулярную щелчку, и захватываем все объекты, которые пересекает луч.
Затем мы извлекаем первый объект из списка пересекающихся объектов, потому что он будет ближе всего к экрану.
Чтобы лучше понять raycasting и выбор объектов, обратитесь к этому руководству.
Теперь при создании кубов мы уже вставили данные, поэтому мы можем просто получить (URL) их из пересекающегося куба и перенаправить пользователя на эту страницу.
Пример кода будет примерно таким (в строке номер 95 в скрипке)
if (intersects.length > 0) {
window.open(intersects[0].object.userData.URL);
}
Здесь нам рабочий jsfille, надеюсь, это поможет
intersects[0] является объектом с несколькими атрибутами, т.е. distance пересечения, какая грань была пересечена и т.д. Однако это только для точки входа луча внутри пересекаемого объекта. Есть ли способ получить всю информацию о месте, где луч вышел из объекта?
- person Matteo; 31.08.2016
for meshes, faces must be pointed towards the origin of the ray in order to be detected; intersections of the ray passing through the back of a face will not be detected. To raycast against both faces of an object, you'll want to set the material's side property to THREE.DoubleSide .
- person Matteo; 01.09.2016
В этом случае пригодится 3Dink.js. Это библиотека-оболочка three.js для WebGL, которая позволяет легко создавать трехмерные гиперссылки.
В самом коротком случае он может реализовать щелчок и световое излучение в 3 строки.
DDDINK.addURL(object, "https://www.npmjs.com/package/3dink");
DDDINK.readRendererObj( renderer, scene, camera );
DDDINK.domEvent.addFnc();
Пожалуйста, просмотрите его репозиторий. https://github.com/takashift/3Dink.js
Вы можете сделать это, изменив эту функцию:
function onDocumentMouseDown( event ) {
// ......
if ( intersects.length > 0 ) {
switch(intersects[0].object) {
case google_object:
window.open('http://google.com');
break;
case yahoo_object:
window.open('http://yahoo.com');
break;
}
}
// ......
}
