aframe - 动态创建的 A-FRAME 内容设置为嵌入将不会显示 A-FRAME 检查器
问题描述
我正在使用将图像路径作为参数并返回构建的 A-FRAME a-scene 的函数动态创建 A-FRAME 场景。
尽管尝试使用 ctrl + alt + i 初始化 A-FRAME 检查器不起作用,但返回的值正在工作并在 DOM 中正确显示,这主要是由于动态附加的内容。
A-FRAME 中是否有允许检查员处理动态附加内容或其他此类解决方法的标志或设置?
function buildCelestialBody(a) {
let aframe= `
<!-- AFRAME CONTENT -->
<!-- MAIN SCENE -->
<a-scene embedded
loading-screen="dotsColor: #ffffff; backgroundColor: black;"
vr-mode-ui="enabled: false fuseTimeout: 0">
<!-- ASSETS -->
<a-assets>
<img id="celestialbody" src="${a}"></img>
</a-assets>
<!-- CAMERA -->
<a-entity id='cameraWrapper' position="0 0 0" rotation="0 0 0">
<a-camera id="camera1" camera="active: true; zoom: 3.5;
spectator: false;"
look-controls="enabled: false"></a-camera>
</a-entity>
<!-- CELESTIAL BODY -->
<a-sphere src="#celestialbody"
geometry="primitive: sphere;
segmentsHeight: 100;
segmentsWidth: 100"
scale="1 1 1"
position="0 0 -8.5;"
animation="property: rotation;
dur: 200000;
from: 400 360 0;
to: 400 -360 0;
dir: reverse;
loop: true;
easing: linear"
id="celestialbody" celestialbody>
</a-sphere>
<!-- LIGHT -->
<a-entity id="light"
light="type:directional; castShadow:true;"
position="2 1 1"
animation="property: position;
dur: 2000;
from: 2 1 1;
to: -2 1 1;
dir: reverse;
loop: true;
autoplay: false;
easing: easeInQuad;">
</a-entity>
</a-entity>
<!-- LIGHT SOURCES -->
<a-light id="light_1" type="ambient" color="#9ecdf9" intensity="0.460" position="2 4 4"></a-light>
</a-scene>
<!-- AFRAME CONTENT END -->`
return aframe;
}
解决方案
您需要将您的创建代码放在一个组件中,而不仅仅是一个全局范围的函数。将其放置在组件中可确保首先加载所有内容(包括检查器),然后运行您的代码,并且检查器将注册对象。
AFRAME.registerComponent('treeman', {
init: function(){
let el = this.el;
let sceneEl = document.querySelector('a-scene');
let trees = sceneEl.querySelector('#trees');
el.addEventListener("model-loaded", e =>{
//trees.emit('modelisloaded');
let tree3D = el.getObject3D('mesh');
if (!tree3D){return;}
tree3D.traverse(function(node){
if (node.isMesh){
node.renderOrder = 2;
console.log(node.name, node.renderOrder, node.material);
node.material.color=new THREE.Color(0xaa5522);
node.material.map = null;
}
});
let countX = 10;
let cubes = [];
let size = 0.125, spacing = 0.05, x;
for (let i=0; i<countX; i++){
cubes[i] = document.createElement('a-entity'); // create the element
// create components, id, geometry, position
cubes[i].setAttribute('id', 'tree_'+i.toString());
cubes[i].setAttribute('gltf-model', '#tree');
x = (size + spacing) * countX * (-0.5) + i * (size + spacing) ;
y = Math.random() * 0.25;
z = Math.random() * 1;
cubes[i].setAttribute('position', x.toString()+ ' '+y.toString()+' '+z.toString() );
// you can add event listeners here for interaction, such as mouse events.
sceneEl.appendChild(cubes[i]);// Append the element to the scene, so it becomes part of the DOM.
}
});
}
});
<a-entity id="treemodel" visible="false" gltf-model="#tree" scale="5 5 5" treeman></a-entity>
我刚刚运行了这个并确认动态创建的对象确实出现在检查器中。
推荐阅读
- nagios - nagios check_http HTTP CRITICAL - 无法打开 TCP 套接字,从命令行工作正常
- docker - Docker:如何从容器内访问我的服务器的公共 IP?
- javascript - ReactSelect - 即使设置为 false,closeOnMenuSelect 也会在选择时关闭菜单
- asp.net-mvc-4 - 重定向后会话变量丢失
- javascript - 使用从另一个“多选”下拉列表中选择的选项填充下拉列表
- javascript - 条件渲染使表单项可见,但无法隐藏
- c - 指针的值未正确显示
- ruby-on-rails - Heroku 上部署的 Rails API 在开发过程中引发内部服务器错误 (500)
- c++ - 同时从多个流中捕获,最好的方法以及如何减少 CPU 使用率
- php - php在类外模拟一个函数