vue 中使用three.js创建天空盒

vue 中使用three.js创建天空盒

首先要有六张图片对应天空盒的六个面

// 创建天空盒
addPanorama() {
//相应面对应相应图片const imgUrl = ['Image/Skybox03_textures/sanlan2.jpg','Image/Skybox03_textures/sanlan4.jpg','Image/Skybox03_textures/sanlan5.jpg','Image/Skybox03_textures/sanlan6.jpg','Image/Skybox03_textures/sanlan1.jpg','Image/Skybox03_textures/sanlan3.jpg']// 调用getTexturesFromAtlasFile() 给每个材质加上相应的图片const textures = TexturesFromAtlasFile(imgUrl, 6)const materials = []for (let i = 0; i < 6; i++) {// 创造六个面的材质materials.push(new THREE.MeshBasicMaterial({ map: textures[ i ] }))}
//创造包围盒const skyBox = new THREE.Mesh(new THREE.BoxBufferGeometry(1024, 1024, 1024), materials)// skyBox.position.set(0, 0, 0);ry.scale(1, 1, -1)scene.add(skyBox)
},// 六个面添加图片
getTexturesFromAtlasFile(atlasImgUrl, tilesNum) {const textures = []for (let i = 0; i < tilesNum; i++) {textures[ i ] = new THREE.Texture()}for (let i = 0; i < textures.length; i++) {const imageObj = new Image()imageObj.src = atlasImgUrl[load = () => {let context = ''// let tileWidth = imageObj.height;// let tileWidth = 5000;const canvas = ateElement('canvas')// const canvas: HTMLCanvasElement = this.canvasRef.nativeElement;  // 得到canvas 元素context = Context('2d')const canvasHeight = 720canvas.height = canvasHeightcanvas.width = canvasHeight// context.drawImage( imageObj, canvasHeight * i, 0, canvasHeight, canvasHeight, 0, 0, canvasHeight, canvasHeight );context.drawImage(imageObj, 0, 0, canvasHeight, canvasHeight)textures[ i ].image = canvastextures[ i ].needsUpdate = true}} return textures
},
调用addPanorama() 方法给场景添加天空盒