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)
})
})
我曾经通过 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)
})
})