I constructed a tunnel using cylinders. When the mouse reaches a corner, the old cylinder is replaced with a new one that has a different number of radial segments.
However, the transition between the objects now happens abruptly. Is there a way to add a smooth transition?
Could it be that removing the objects is not the right approach?
var w = window.innerWidth;
var h = window.innerHeight;
var circle = new THREE.Mesh(
new THREE.CylinderGeometry( 50, 50, 1024, 32, 1, true ),
new THREE.MeshBasicMaterial({
transparent: true,
alphaMap: tunnelTexture,
side: THREE.BackSide,
})
);
The other objects are created in a similar way, only with 3/4/6 segments
if (mouseX < w/4 && h-(h/4) < mouseY < h/4) {
scene.remove(circle);
scene.remove(triangle);
scene.remove(hexagon);
scene.add(rect);
}
if (mouseY > h-(h/4)) {
scene.remove(circle);
scene.remove(rect);
scene.remove(hexagon);
scene.add(triangle);
}
if (mouseX > w-(w/4) && h-(h/4) < mouseY < h/4) {
scene.remove(triangle);
scene.remove(rect);
scene.remove(hexagon);
scene.add(circle);
}
if (mouseY < h/4) {
scene.remove(triangle);
scene.remove(rect);
scene.remove(circle);
scene.add(hexagon);
}
Appreciate any assistance you can provide! :)