three.js给一个立方体贴图片

three.js给一个立方体贴图片

<template>
    <section class="sky3d-wrap" id="three3dWrap">
    </section>
</template>
<script>
// 通过访问 https://cdn.skypack.dev/three 来查找最新版本。
// import * as THREE from 'https://cdn.skypack.dev/pin/three@v0.143.0-Cpkbmg37IsbIniRRPFSZ/mode=imports,min/optimized/three.js';
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
// 方式 2: 仅导入你所需要的部分
// import { Scene } from 'three';
export default {
    name: 'sky-box',
    data() {
      return {
      }
    },
    created() {
    },
    mounted() {
      const scene = new THREE.Scene();

      const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
      camera.position.set( 0, 0, 200);
      camera.lookAt( 0, 0, 0);

      const geometry = new THREE.BoxGeometry( 50, 50, 50);
      const textureLoader = new THREE.TextureLoader();
      // const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
      const cube = new THREE.Mesh(
        geometry,
        [
          // 右面材质
          new THREE.MeshBasicMaterial({
            map: textureLoader.load(require('@images/hyc1/1_front_01.jpg'))
          }),
          // 左面材质
          new THREE.MeshBasicMaterial({
            map: textureLoader.load(require('@images/hyc1/1_front_01.jpg'))
          }),
          // 上面材质
          new THREE.MeshBasicMaterial({
            map: textureLoader.load(require('@images/hyc1/1_front_01.jpg'))
          }),
          // 下面材质
          new THREE.MeshBasicMaterial({
            map: textureLoader.load(require('@images/hyc1/1_front_01.jpg'))
          }),
          // 前面材质
          new THREE.MeshBasicMaterial({
            map: textureLoader.load(require('@images/hyc1/1_front_01.jpg'))
          }),
          // 后面材质
          new THREE.MeshBasicMaterial({
            map: textureLoader.load(require('@images/hyc1/1_front_01.jpg'))
          }),
        ]
      );
      scene.add( cube );

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.getElementById('three3dWrap').appendChild( renderer.domElement );

      const controls = new OrbitControls( camera, renderer.domElement );

      //controls.update() must be called after any manual changes to the camera's transform
      animate()

      function animate() {

        requestAnimationFrame( animate );

        // required if controls.enableDamping or controls.autoRotate are set to true
        controls.update();

        renderer.render( scene, camera );

      }
    },
    methods: {
    }
}
</script>
<style lang="less" scoped>
.sky3d-wrap {
    width: 100vw; height: 100vh; position: relative;
}
</style>