webarkit / ARnft

A small javascript library for WebAR with NFT
GNU Lesser General Public License v3.0
219 stars 54 forks source link

Testing new addModel and addModelWithCallback #246

Closed kalwalt closed 3 years ago

kalwalt commented 3 years ago

Testing ARnft-Threejs changes from PR https://github.com/webarkit/ARnft-threejs/pull/29 The example examples/arNFT_gltf_flamingo_example.html use the new addModelWithCallback method to load a gltf model and play the gltf animations thanks to the callback. You need to provide the necssary code to enable the animations(mixers) and update it in the tick function.

                        let nftAddTJS = new ARnftThreejs.NFTaddTJS(nft.uuid);
                        let mixers = [];
                        let clock = new THREE.Clock();
                        function modelAnimation(gltf) {
                            var model = gltf.scene.children[0];
                            model.rotation.x = Math.PI / 2;
                            var animation = gltf.animations[0];
                            var mixer = new THREE.AnimationMixer(model);
                            mixers.push(mixer);
                            var action = mixer.clipAction(animation);
                            action.play();
                        }
                        function updateAnimations() {
                            if (mixers.length > 0) {
                                for (var i = 0; i < mixers.length; i++) {
                                    mixers[i].update(clock.getDelta());
                                }
                            }
                        }
                        nftAddTJS.addModelWithCallback("./Data/models/flamingo/Flamingo.glb", "pinball", modelAnimation, false);

                        const tick = () => {
                            sceneThreejs.draw();
                            window.requestAnimationFrame(tick);
                            updateAnimations();
                        };
                        tick();

Both addModel and addModelWithCallback use the new reposition of the model, that automatically place the model in the middle of the marker.