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
It seems like the swiper isn’t connected to three in any way in the codepen
?
In any way - if you are able to listen to swipes, you can remove previous model by simply doing:
model.parent.remove(model);
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 );
}