javascript - 在一个时间间隔内更改 CircleGeometry 对象一侧的纹理/图像

Question

所以 我对 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();
});

Answer 1

您的变量命名约定非常困惑，因为您交替使用 cubeXX 和 circleXX，所以我将提供一些伪代码。这个想法是你可以加载 2 个纹理，然后使用 setInterval每 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;
    }
}

旁注:如果您不介意我问的话，您参加了哪个速成类？ MeshFaceMaterial has been deprecated since 2015