Aframe,3dio 场景:方向改变

Aframe, 3dio scene: orientation changes

我曾经通过 bakedModelUrl 将 3dio 场景上传到帧中

<a-entity io3d-data3d="key:/3f995099-d624-4c8e-ab6b-1fd5e3799173/170515-0913-4p3ktf/1e588a3b-90ac-4a32-b5b8-ff2fda7f87c4.gz.data3d.buffer"></a-entity>

此处描述:https://3d.io/docs/api/1/aframe-components.html

但在使用此方法时(通过 sceneId):

const scene = document.querySelector('a-scene')
io3d.scene.getAframeElements(sceneId)
.then(elements => {
// this will give us two elements
// The first is the actual scene according to the scene structure hierarchy
// The second is the camera with potential waypoints that where defined in the scene structure
// you can leverage the waypoints using our A-Frame tour component
elements.forEach((el) => {
  // add elements to the scene
  scene.appendChild(el)
})
scene.appendChild(element)
})

此处描述:https://3d.io/docs/api/1/scene.html,我似乎没有得到相同的模型方向。

看看:

https://codepen.io/Anathapindika/pen/mqzGPB?editors=1011(bakedModelUrl 方法 - 相机位置 =“10 10 0”)

https://codepen.io/Anathapindika/pen/RjBxqO (sceneId Methode - 相机位置 = "0 10 0")

我同意这看起来令人惊讶,我们需要重新考虑这种行为或更好地解释它。

直接使用 io3d-data3d 组件与使用 io3d.scene 方法将整个场景结构导入 A-Frame 之间存在细微差别。

基本上data3d 是场景结构的一部分,但是场景结构不仅仅包含data3d。值得注意的是data3d通常不是顶级对象

现在,这是什么意思?

这意味着,场景结构支持诸如多层(又名地板或楼层)之类的东西,每个层次内部都有自己的 data3d 模型。然后可以单独旋转每个 data3d 模型,也可以旋转顶级场景对象。

当直接使用 data3d 模型时,你不会得到这些旋转,而当你使用场景结构方法时会得到它们。

但是,在您的特定情况下,我检查了 JSON 发现所有旋转无论如何都是 0,但后来我注意到了一些事情:这两个模型实际上看起来不同。有没有可能data3dURL已经过时了(每次重做realistic lighting,data3dURL都会改变。

如果我使用新的 data3d URL,两个代码笔的方向相同。

io3d.scene.getAframeElements(sceneId)

导入整个场景层级并创建对应的A-Frame节点。

烘焙模型绑定到 level 节点,该节点是 plan 节点的子节点。 plan 节点是最高层级。 https://3d.io/docs/api/1/scene-structure-reference.html#level

假设在您的情况下 plan 节点有旋转或位置变化。

要在不应用根旋转和位置的情况下导入场景,您有两个选择:

导入前调整场景结构:

io3d.scene.getStructure(sceneId)
  .then(sceneStructure => {
     // root node is the 'plan' node. reset it's position and rotation
     sceneStructure.x = sceneStructure.z = sceneStructure.ry = 0
     // convert sceneStructure to A-Frame Elements
     var elements = io3d.scene.getAframeElementsFromSceneStructure(sceneStructure)
     // add elements to the scene
     elements.forEach((el) => {
       // add elements to the scene
       scene.appendChild(el)
     })
  })

或者导入后直接修改根DOM元素

io3d.scene.getAframeElements(sceneId)
  .then(elements => {
    elements[0].setAttribute('position', '0 0 0')
    elements[0].setAttribute('rotation', '0 0 0')
    // add elements to the scene
    elements.forEach((el) => {
      // add elements to the scene
      scene.appendChild(el)
    })
 })