THREE 天空盒

引用于天空盒高清素材图片_一条快乐的小咸鱼的博客-CSDN博客_天空盒素材

this.scene = new Scene();  // 创建一个场景，
this.scene.background = new CubeTextureLoader()
    .setPath('assets/img/')
    .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg', ])

因为异步加载的问题，本文先请求了资源（require），然后再操作scene.background。

        // 天空盒
        initSkyBox() {
            var posx = require("@/assets/images/screen/posx.jpg");
            var negx = require("@/assets/images/screen/negx.jpg");
            var posy = require("@/assets/images/screen/posy.jpg");
            var negy = require("@/assets/images/screen/negy.jpg");
            var posz = require("@/assets/images/screen/posz.jpg");
            var negz = require("@/assets/images/screen/negz.jpg");
            this.scene.background = new THREE.CubeTextureLoader().load([
                posx,
                negx,
                posy,
                negy,
                posz,
                negz,
            ]);
            this.renderer.render(this.scene, this.camera);
        },

命名中的pos表示 + ，neg表示 - 。

在THREE的三维坐标中，右为+x，左为-x，向上为+y，向下为-y，向屏幕外为+z，向屏幕内为-z。

引用自ThreeJS创建天空盒的几种方法_xyphf_和派孔明的博客-CSDN博客_threejs天空盒

 

posx.jpg

posy.jpg

posz.jpg

negx.jpg

negy.jpg

negz.jpg