aframe - Aframe 网格旋转和动画
问题描述
我正在尝试在 aframe gltf 模型中旋转网格,但它似乎不起作用。是否可以旋转在场景中运行时添加的 gltf 模型网格?我正在设置枢轴但无法对其应用旋转的网格。
问题:我有一个带有两个网格的门模型。左门和右门。当用户点击门网时,我想将门旋转 180 度。到目前为止,我在整个 3d 对象上都收到了点击事件,并检查了点击了哪个网格;检查其父级并尝试旋转左门但不工作。知道我错过了什么。所以
object.parent
返回我试图旋转的父对象类型。这是正确的方法吗?
这是我到目前为止得到的。
const newElement = document.createElement('a-entity')
// The raycaster gives a location of the touch in the scene
const touchPoint = event.detail.intersection.point
newElement.setAttribute('position', touchPoint)
//const randomYRotation = Math.random() * 360
//newElement.setAttribute('rotation', '0 ' + randomYRotation + ' 0')
newElement.setAttribute('visible', 'false')
newElement.setAttribute('scale', '4 4 4')
newElement.setAttribute('gltf-model', '#animatedModel')
this.el.sceneEl.appendChild(newElement)
newElement.addEventListener('model-loaded', () => {
// Once the model is loaded, we are ready to show it popping in using an animation
newElement.setAttribute('visible', 'true')
newElement.setAttribute('id','model')
newElement.setAttribute('class','cantap')
newElement.setAttribute('hold-drag','')
newElement.setAttribute('two-finger-spin','')
newElement.setAttribute('pinch-scale','');
/* newElement.setAttribute('animation', {
property: 'scale',
to: '4 4 4',
easing: 'easeOutElastic',
dur: 800,
}) */
newElement.addEventListener('click', event => {
const animationList = ["Action", "Action.001"];
/* newElement.setAttribute('animation-mixer', {
clip: animationList[0],
loop: 'once',
})
newElement.addEventListener('animation-loop',function() {
newElement.setAttribute('animation-mixer', {
timeScale : 0
})
}); */
var object = event.detail.intersection.object;
document.getElementById("btn").innerHTML = object.parent;
/* object.setAttribute('animation', {
property: 'rotation',
to: '0 180 0',
loop: true,
dur: 6000,
dir: 'once'
});*/
object.parent.setAttribute('rotation', {x: 0, y: 180, z: 0});
/* object.traverse((node) =>{
console.log(node.name);
document.getElementById("btn").innerHTML = ;
}); */
console.log(this.el.getObject3D('mesh').name);
// name of object directly clicked
console.log(object.name);
// name of object's parent
console.log(object.parent.name);
// name of object and its children
});
})
解决方案
对 gltf 模型的某些部分执行任何操作的技巧是遍历 gltf 并隔离您想要操作的对象。您可以通过编写一个附加到 gltf 实体的组件来执行此操作,该组件获取底层的 threejs 对象,并遍历 gltf 组中的所有对象,然后您可以通过其名称选择一个对象。您在“模型加载”事件侦听器中执行此操作,如下所示
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.tree = node;
}
});
这将选择其中一个模型,将其分配给一个变量,以后可以使用该变量来旋转模型(或对它做任何你喜欢的事情)。
tick: function(){
if(this.tree){
this.tree.rotateY(0.01);
}
}
这是故障
推荐阅读
- performance - 添加的代码显着减慢了处理时间
- javascript - How to get socket.io to only listen on one specific route?
- sql - 通过分号解析 SQL 查询
- reactjs - 同一行的一个单元格使用antd影响表格组件wen上的另一个单元格
- ios - 如何禁用删除和移动 UICollectionView 中的第一个单元格?
- powerbi - 401 - 数据集刷新 PowerBI 期间出现未经授权的错误
- python - 为什么 tensorflow 会自动继续训练模型?
- javascript - 如何在加载包含 Firebase 的脚本的 Iframe 中使用 Firebase JS SDK?
- ios - 播放音频的后台功能有时仅在设备上有效,在模拟器 swift 4 上一直有效
- r - using purrr to extract elements from multiple lists starting with a common letter