Change the texture/image of one side of a CircleGeometry object within a time interval

Questions
, ,
1

So I’m absolutely new to Three.js. I just took a brief crash course, so now I understand the 1% of its power.

For my website, I made possible to have a rotating disc with an image/texture of mine, but I wish that one side’s texture/image of that disc/circle change for another one by a time interval I mean, when 5 sec. pass, change it, then another 5 sec. change it again to the previous one, and so back and forth.

As I said, I’m absolutely new to this, so I don’t know how. I know basic/semiadvanced js stuff, though.

My code:

// Cubito 3D hecho en three.js

// Selecciona el div con el # especificado.
let cubo3d = document.querySelector('#cubo3d')
// Estos valores dependen de los del CSS para que cuadre bien el cubo en su posición.
let CANVAS_WIDTH = 450;
let CANVAS_HEIGHT = 450;

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, (CANVAS_WIDTH / CANVAS_HEIGHT), 0.1, 1000);
let renderer = new THREE.WebGLRenderer();
let geometry = new THREE.CircleGeometry(6, 32);

// Imágenes a cargar en cada lado del cubo.
let cubeMaterials = [
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('{{ "/assets/gifs/yo.jpg" }}'),
        side: THREE.DoubleSide
    })
];
let material = new THREE.MeshFaceMaterial(cubeMaterials);
let circle = new THREE.Mesh(geometry, material);

// Velocidades de rotación
let rotX = 0.008;
let rotY = 0.009;

//Cubo
scene.add(circle);

camera.position.z = 10;

renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);
cubo3d.appendChild(renderer.domElement);

animate();

function animate() {
    circle.rotation.x += rotX;
    circle.rotation.y += rotY;
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

// Resize responsivo
window.addEventListener('resize', function() {
    let width = CANVAS_WIDTH;
    let height = CANVAS_HEIGHT;
    renderer.setSize(width, height);
    camera.aspect = width/height;
    camera.updateProjectionMatrix();
});
2

/cc:

3

Yeah, what’s the problem? Wish to get as much replies as I can for knowledge.

4

I’ve added your post at stackoverflow so it’s easier for others to follow the whole discussion.

That does not work with THREE.CircleGeometry. If you apply a texture on one side, you also see it when you set THREE.Material.side to THREE.DoubleSide. You might want to work with two meshes and two independent materials.

If you change a texture of a material during rendering, you have to set THREE.Material.needsUpdate to true. Otherwise you won’t see any effect. This is explained in the following guide (section Materials):

https://threejs.org/docs/index.html#manual/en/introduction/How-to-update-things

5

The idea from the twilight zone of my mind: one mesh, two textures, gl_FrontFacing in a fragment shader.
I’m not sure that this approach is efficient enough.
Anyway, here’s a working example :slight_smile:

2 Likes