Swiper slider with three.js

Questions
1

I have a swiper slider. I have to run my fbx models integrated with this slider.
When the slider changes, the model must also change. But when I do this the models overlap. I can’t remove the previous model.

Codepen link is here: https://codepen.io/ufukylboga/pen/QWGarNy

2

It seems like the swiper isn’t connected to three in any way in the codepen :thinking: ?

In any way - if you are able to listen to swipes, you can remove previous model by simply doing:

model.parent.remove(model);
3

Sorry its my bad. Im connecting to three with this code.

let mainSwiper = new Swiper(’.main-slider .swiper-container’, {
slidesPerView: 1,
effect: ‘fade’,
fadeEffect: {
crossFade: true
},
slidesOffsetBefore: 0,
speed: 800,
spaceBetween: 20,
loop: true,
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’,
},
});

                let loader = new FBXLoader();
                let slideIndex = 1;

                let models = [
                    "./assets/js/models/1.fbx",
                    "./assets/js/models/2.fbx",
                    "./assets/js/models/3.fbx",
                ]

                loader.load( models[0], loadModel );
                mainSwiper.on('slideChange', function () {
                    slideIndex = mainSwiper.realIndex;
                    loader.load( models[slideIndex], loadModel);
                });

                function loadModel ( object ) {
                    console.log(object);
                    mixer = new THREE.AnimationMixer( object );
                    object.rotation.x = 0.5;
                    object.rotation.y = -0.7;
                    let action = mixer.clipAction( object.animations[ 0 ] );
                    action.play();
                    object.traverse( function ( child ) {
                        if(child.name == "pil"){
                            child.material = new THREE.MeshPhongMaterial( {
                                color: 0xf86708,
                                wireframe: false,
                            } );

                            child.castShadow = false;
                            child.receiveShadow = false;
                        }else{
                            if ( child.isMesh ) {
                                child.material = new THREE.MeshPhongMaterial( {
                                    color: 0xffffff,
                                    wireframe: true,
                                } );

                                child.castShadow = true;
                                child.receiveShadow = true;

                                child.material.transparent = true;
                                child.material.opacity = 0.2;
                            }
                        }
                    } );
                    document.addEventListener("mousemove", function(e){
                        let xC = e.pageX;
                        let xCalc = (xC / window.innerWidth);
                        object.rotation.y = -xCalc;
                    });
                    scene.add( object );
                }