mozilla / webxr-polyfill

A polyfill and example code for building augmented reality (AR) and virtual reality (VR) applications using WebXR.
Mozilla Public License 2.0
258 stars 67 forks source link

View Animation gtlf #111

Open lajune1 opened 6 years ago

lajune1 commented 6 years ago

Hi there! I am trying to see an animation that I uploaded to the AR hit test test. I uploaded the gltf with an animation attached, however it does not play when I open the scene. It is a static object. Do I have to add something or delete something to/from the code to get it working?

ghost commented 5 years ago

I also am struggling with this but probably because I stink at coding in JavaScript.

In the code base I use - there is a class just before a function that I'm not sure about. But within what appears to be an initialization function using a GLTF loader doing something with a '=>' thing that enables us to set parameters about the gltf model.

` loadGLTF('https://cdn.glitch.com/f485dc5e-a1b5-4091-8408-6411aea91377%2Ftext_1%20(1).glb?1555527607936').then(gltf => { gltf.scene.scale.set(.03, .03, .03) gltf.scene.rotation.set(90, 0, 180) gltf.scene.position.set(4, 0, -9) gltf.scene.quaternion.setFromAxisAngle(new THREE.Vector3(0, 0, 0), Math.PI)

                    gltf.scene.traverse(node => {
                        if (node.material && (node.material.isMeshStandardMaterial || (node.material.isShaderMaterial && node.material.envMap !== undefined))){
                            node.material.envMap = this.envMap
                            node.material.needsUpdate = true
                        }
                    })

                    this.floorGroup.add(gltf.scene)
        this.floorGroup.add( axesHelper );
                }).catch((...params) =>{
                    console.error('could not load gltf', ...params)
                })

      `

I took three approaches here:

1) Just copy paste the system from https://threejs.org/docs/index.html#manual/en/introduction/Animation-system 2) refactor the bottom portion to play nice // Play all animations clips.forEach( function ( clip ) { mixer.clipAction( clip ).play(); } );

so... gltf.scene.animationClip.mixer.clipAction.set( play();

3) Just use A-frame and hope to the heavens it is that simple.....

None of this worked, obviously. So...if anyone has any spare time to give me a clue it would be much appreciated.