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

 

 

 

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值