threejs achieve skybox

1. Overview of sky boxes and effects

Such as this panoramic picture, the picture we cut six small images, respectively, six small pictures posted on the inside of a cube, so that when we are inside the cube being in this moment, like looking at the same panorama.

Results are as follows:

2.threejs Code

     var path = '/sky/'
     var format = '.jpg'
     var urls = [
       path + 'px' + format, path + 'nx' + format,
       path + 'py' + format, path + 'ny' + format,
       path + 'pz' + format, path + 'nz' + format
     ]
     var materials = []
     for (var i = 0; i < urls.length; ++i) {
       var loader = new this.THREE.TextureLoader()
       // loader.setCrossOrigin( this.crossOrigin );
       var texture = loader.load(urls[i], function () {}, undefined, function () {})
       materials.push(new this.THREE.MeshBasicMaterial({
         map: texture,
         side: this.THREE.BackSide
         // transparent: true,
         // needsUpdate:true
       })
       )
     }
     var cube = new this.THREE.Mesh(new this.THREE.CubeGeometry(9000, 9000, 9000), materials)
     cube.name = 'sky'
     this.scene.add(cube)
     
     var axes = new this.THREE.AxesHelper(100000)
     this.scene.add(axes)

Ideas: create a first materialsarray, each element of the array is an MeshBasicMaterialexample of using the method of adhering to the inner textures cube.
MeshBasicMaterial
Parameter maprefers to the map, the default value null.
Parameter sidemeaning that map location, where we chose this.THREE.BackSide, means that the texture is located inside the cube.
transparent: trueWhen the transparent material includes elements need to use, or else there exists a transparent color portion.

this.THREE.Mesh(new this.THREE.CubeGeometry(9000, 9000, 9000), materials)
Create a geometry, material of the second parameter is an array of objects
new this.THREE.AxesHelper(100000)
to create the axis, a length of 100 000

3. The complete code

<template>
   <div id="container">

   </div>
</template>

<style lang="scss">
html,body{
   padding: 0;
   margin: 0;
}
</style>

<script>
import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader'
import OrbitControls from 'three-orbitcontrols'
export default {
 name: 'ThreeTest',
 data () {
   return {
     camera: null,
     scene: null,
     renderer: null,
     mesh: null,
     controls: null,
     crossOrigin: ''
   }
 },
 methods: {
   init: function () {
     const that = this
     this.scene = new this.THREE.Scene()
     
     var path = '/sky/'
     var format = '.jpg'
     var urls = [
       path + 'px' + format, path + 'nx' + format,
       path + 'py' + format, path + 'ny' + format,
       path + 'pz' + format, path + 'nz' + format
     ]
     var materials = []
     for (var i = 0; i < urls.length; ++i) {
       var loader = new this.THREE.TextureLoader()
       // loader.setCrossOrigin( this.crossOrigin );
       var texture = loader.load(urls[i], function () { console.log('q') }, undefined, function (e) { console.log(e) })
       materials.push(new this.THREE.MeshBasicMaterial({
         map: texture,
         side: this.THREE.BackSide
         // transparent: true,
         // needsUpdate:true
       })
       )
     }
     var cube = new this.THREE.Mesh(new this.THREE.CubeGeometry(9000, 9000, 9000), materials)
     cube.name = 'sky'
     this.scene.add(cube)

     var ambient = new this.THREE.AmbientLight(0xcccccc)
     this.scene.add(ambient)

     var axes = new this.THREE.AxesHelper(100000)
     this.scene.add(axes)

     var width = window.innerWidth// 窗口宽度
     var height = window.innerHeight// 窗口高度
     var k = width / height// 窗口宽高比
     // 创建相机对象
     this.camera = new this.THREE.PerspectiveCamera(45, width / height, 1, 1000000)
     this.camera.position.set(1000, 0, 1000)// 设置相机位置
     this.camera.lookAt(new this.THREE.Vector3(0, 0, 0))// 设置相机方向(指向的场景对象)
     /**
        * 创建渲染器对象
        */
     this.renderer = new this.THREE.WebGLRenderer()
     this.renderer.setSize(width, height)
     this.renderer.setClearColor(0xb9d3ff, 1)// 设置背景颜色
     document.getElementById('container').appendChild(this.renderer.domElement)// body元素中插入canvas对象
     // 执行渲染操作
     this.renderer.render(this.scene, this.camera)
     this.controls = new OrbitControls(this.camera, document.getElementById('container'))// 创建控件对象
     this.controls.addEventListener('change', this.animate())
   },
   animate: function () {
     requestAnimationFrame(this.animate)
     this.renderer.render(this.scene, this.camera)
   }
 },
 mounted () {
   this.init()
   // this.animate()
 }
}
</script>