如何解决随机更改数组THREE.JS中的Texture.Loader多个纹理图像
我想从数组中随机加载texture.loader中的多个纹理图像。 为什么只加载单个图像?
到目前为止,这是我的解决方案:
let scene,camera,renderer,stars,starGeo;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,1,1000);
camera.position.z = 1;
camera.rotation.x = Math.PI/2;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
starGeo = new THREE.Geometry();
for(let i=0;i<6000;i++) {
star = new THREE.Vector3(
Math.random() * 600 - 300,Math.random() * 600 - 300,Math.random() * 600 - 300
);
star.velocity = 0;
star.acceleration = 0.02;
starGeo.vertices.push(star);
}
var textureLoader = new THREE.TextureLoader();
var sprite = textureLoader.load( 'html5.png');
var sprite2 = textureLoader.load( 'css.png');
var starMaterial = new THREE.PointsMaterial({
color: 0xaaaaaa,size: 5,map: sprite2,alphaMap: sprite,});
stars = new THREE.Points(starGeo,starMaterial);
scene.add(stars);
window.addEventListener("resize",onWindowResize,false);
animate();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,window.innerHeight);
}
function animate() {
starGeo.vertices.forEach(p => {
p.velocity += p.acceleration
p.y -= p.velocity;
if (p.y < -200) {
p.y = 200;
p.velocity = 0;
}
});
starGeo.verticesNeedUpdate = true;
stars.rotation.y +=0.002;
renderer.render(scene,camera);
requestAnimationFrame(animate);
}
init();
我很想弄清楚解决方案。 谢谢,伙计们。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。