As a novice in the world of Three.js, I recently completed a crash course and now have a basic understanding of its capabilities.
I managed to create a rotating disc on my website with my own image/texture, but I would like to change the texture/image on one side at set time intervals. For example, after 5 seconds, switch it out, then switch back after another 5 seconds, and continue this cycle.
Since I am new to this technology, I am not sure how to achieve this. However, I do have some knowledge of basic to semi-advanced JavaScript concepts.
Below is the code snippet that I have been working on:
// 3D Cube created in three.js
// Select the div with the specified ID.
let cube3d = document.querySelector('#cube3d')
// These values depend on the CSS for properly positioning the cube.
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);
// Images to load on each face of the cube.
let cubeMaterials = [
new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load('{{ "/assets/gifs/me.jpg" }}'),
side: THREE.DoubleSide
})
];
let material = new THREE.MeshFaceMaterial(cubeMaterials);
let circle = new THREE.Mesh(geometry, material);
// Rotation speeds
let rotX = 0.008;
let rotY = 0.009;
//Cube
scene.add(circle);
camera.position.z = 10;
renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);
cube3d.appendChild(renderer.domElement);
animate();
function animate() {
circle.rotation.x += rotX;
circle.rotation.y += rotY;
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
// Responsive resizing
window.addEventListener('resize', function() {
let width = CANVAS_WIDTH;
let height = CANVAS_HEIGHT;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
});