gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 14:13:31 25 4
gpt4 key购买 nike

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

最佳答案

您的变量命名约定非常困惑,因为您交替使用 cubeXXcircleXX,所以我将提供一些伪代码。这个想法是你可以加载 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

关于javascript - 在一个时间间隔内更改 CircleGeometry 对象一侧的纹理/图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53963693/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com