Question

所以我绝对是Three.js的新手。我只是参加了一次简短的速成课程，所以现在我了解了它的1％功能。

对于我的网站，我可以制作一张带有我的图像/纹理的旋转光盘，但我希望该光盘/圆的一侧的纹理/图像在一定时间间隔内改变另一张 strong>我的意思是说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个纹理，然后每5秒使用setInterval交换它们：

// 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

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

1 个答案: