aframe - 在 aframe 中添加指向 GLTF 对象的链接
问题描述
是否可以添加指向 GLTF 3d 对象的链接(由标记触发?)
我已经尝试了通常的“a-link”方法,onClick 方法,甚至应用了一个 id 并使用了 jQuery——所有这些都没有运气——任何帮助都将不胜感激。
<a-scene embedded arjs>
<a-marker id="dragon" preset="custom" type="pattern" url="pattern-dragonfly.patt">
<a-entity animation-mixer="clip: *;" scale="1.5 1.5 1.5" gltf-model-next="src: url(dragon.gltf);"></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
解决方案
要完成这项工作,您需要创建一个带有 raycaster 的光标,以及一个用于 gltf 的自定义组件。
<a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects: .clickable"></a-entity>
<a-entity id="tree" gltf-model="#gltftree" scale="5 5 5" treeman class="clickable" ></a-entity>
在自定义组件中,首先遍历 gltf 并存储对要交互的模型的引用,如下所示
init: function(){
let el = this.el;
let self = this;
self.trees = [];
el.addEventListener("model-loaded", e =>{
let tree3D = el.getObject3D('mesh');
if (!tree3D){return;}
console.log('tree3D', tree3D);
tree3D.traverse(function(node){
if (node.isMesh){
console.log(node);
self.trees.push(node);
node.material = new THREE.MeshStandardMaterial({color: 0x33aa00});
}
});
});
然后您制作事件侦听器来检测相交事件,并保存已相交的对象并突出显示它,以便用户知道它是实时的,就像这样
el.addEventListener('raycaster-intersected', e =>{
self.raycaster = e.detail.el;
let intersection = self.raycaster.components.raycaster.getIntersection(el);
console.log('click', intersection.object.name, self.mouseOverObject,
intersection.object.name != self.mouseOverObject );
if (self.mouseOverObject != intersection.object.name){
intersection.object.material.emissive = new THREE.Color(0xFFFF00);
intersection.object.material.emissiveIntensity = 0.5;
} else {
intersection.object.material.emissive = new THREE.Color(0x000000);
intersection.object.material.emissiveIntensity = 0.0;
}
self.mouseOverObject = intersection.object.name;
});
el.addEventListener('raycaster-intersected-cleared', e =>{
self.trees.forEach(function(tree){
tree.material.emissive = new THREE.Color(0x000000);
tree.material.emissiveIntensity = 0.0;
});
self.mouseOverObject = null;
});
最后添加一个操作超链接的点击监听器,像这样
el.addEventListener('click', function(){
console.log(self.mouseOverObject);
if(self.mouseOverObject === "Trunk_A"){
console.log('link');
let url = 'https://supermedium.com/supercraft/';
let win = window.open(url, '_blank');
win.focus();
}
});
单击主干以激活超链接。
推荐阅读
- couchbase - N1QL (CB6.6) ANSI 合并
- javascript - 单击菜单外的任意位置以关闭菜单
- swift - 没有可用的 AirPlay 设备时隐藏 AVRoutePickerView
- git - 避免提交和推送评论和日志
- php - 在PHP中仅验证数组整数
- python-3.x - 将许多目录提交到 git 包,删除它们,但 python setup.py 仍然认为它们在那里
- sql - 使用我指定的日期列创建查询,但无法创建临时表
- reactjs - 我在 React JS 中的 Router 元素有什么问题?
- python - 本地网络摄像头和网络应用网络摄像头中不同的 OpenCV 增强输出
- javascript - 如何在没有用户与之交互的情况下完全停止播放视频?