vue3+threejs搞天空盒,有些教程没说,CubeTextureLoader方法实现天空得时候,要在在加载完成之后再render一下,要不初始化黑屏。CubeTextureLoader是异步的。
const sky = new THREE.CubeTextureLoader();
const texture = sky.load(
[
"images/dark-s_px.jpg", // 前侧面的图像
"images/dark-s_nx.jpg", // 后侧面的图像
"images/dark-s_py.jpg", // 顶部面的图像
"images/dark-s_ny.jpg", // 底部面的图像
"images/dark-s_pz.jpg", // 右侧面的图像
"images/dark-s_nz.jpg", // 左侧面的图像
],
(texture) => {
console.log(texture);
renderer.render(scene, camera); //执行渲染操作、指定场景、相机作为参数
}
);
//设置scene的场景为此贴图
scene.background = texture;