Aframe 在帧中添加指向GLTF对象的链接
是否可以添加指向GLTF 3d对象的链接(使用标记触发) 我已经尝试了通常的“a-link”方法,onClick方法,甚至应用了一个id和使用jQuery——都没有运气——任何帮助都将不胜感激Aframe 在帧中添加指向GLTF对象的链接,aframe,gltf,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
<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>
要实现此功能,您需要为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>
然后创建事件监听器来检测相交事件,并保存已相交的对象,并高亮显示它,以便用户知道它是活动的,如下所示
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();
}
});
最后添加一个点击监听器来操作超链接,如下所示
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();
}
});
单击中继线以激活超链接。下一个gltf型号是什么?为什么不使用?当然可以将gltf模型转换为链接。它包括添加一个raycaster系统,创建一个自定义组件,该组件遍历gltf模型以查找与raycaster返回的内容匹配的内容,然后调用执行链接的函数,该函数可能会打开一个新的web浏览器选项卡。也许对你来说,准确地描述你想要发生的事情是有意义的。@Diego gltf模型下一步不需要单独的a-assets@Thomas,谢谢-基本上,当用户触摸3D对象时,我希望他们被带到一个网站上-有没有你建议的工作示例?谢谢!(对延迟回复表示歉意)