Javascript 在时间间隔内更改圆几何对象一侧的纹理/图像

所以我对Three.js绝对是新手。我刚刚参加了一个简短的速成班，所以现在我明白了它1%的威力

对于我的网站，我可以使用带有我的图像/纹理的旋转光盘，但我希望该光盘/圆圈的一边的纹理/图像以时间间隔改变为另一边的我的意思是，5秒后。通过，改变它，然后再过5秒。再次将其更改为上一个，如此反复

正如我所说的，我对这件事完全陌生，所以我不知道怎么做。不过，我知道基本/半高级js的东西

我的代码：

// 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();
});

---

您的变量命名约定非常混乱，因为您可以互换使用

cubeXX

和

circleXX

，所以我只提供一些伪代码。其思想是，您可以加载2个纹理，然后使用每5秒交换一次：

// Load 2 separate textures
let textureLoader = new THREE.TextureLoader();
let texture1 = textureLoader.load("/assets/gifs/yo.jpg");
let texture2 = textureLoader.load("/assets/gifs/yoTambien.jpg");

// Build geom, material & mesh
let circleGeom = new THREE.CircleGeometry(6, 32);
let circleMat = new THREE.MeshBasicMaterial({
    map: texture1,
    side: THREE.DoubleSide
});
let circleMesh = new THREE.Mesh(circleGeom, circleMat);
scene.add(circleMesh);

// Sets an interval to be called every 5000 miliseconds
window.setInterval(swapTextures, 5000);

// Checks the active texture, and swaps it for the other
function swapTextures() {
    if (circleMat.map === texture1) {
        circleMat.map = texture2;
    } else {
        circleMat.map = texture1;
    }
}

---

旁注：如果你不介意我问的话，你参加了哪门速成班<代码>网面材质

谢谢。对于命名约定，我很抱歉，通常我会尝试，但忘记正确格式化。还有，我从一个俄罗斯网站上下载了一个。另外，我想问你，为什么不推荐，它仍然有效？使用它会有什么后果呢？我正在使用Three.js的97版，我得到一个控制台警告“Three.MeshFaceMaterial已被删除。请改用数组。”它只返回用于构建它的数组。在将来的版本中，这个有用的警告+转换可能会被完全删除，您的代码将被破坏。