創(chuàng)建項目

• vue create app
• cd app
• npm add three

App.vue

1 用幾何體的方式來實現(xiàn)（貼圖6張）

<template>
  <div class="container" ref="container"></div>
</template>
<script setup>
import * as THREE from 'three';
import { onMounted, reactive, ref } from "vue";
// 導(dǎo)入軌道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

//創(chuàng)建場景
const scene = new THREE.Scene();
//創(chuàng)建相機
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 設(shè)置相機位置
camera.position.z = 0.1;
//初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
const container = ref(null)

//封裝渲染函數(shù)
const render = () => {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
//添加立方體
const geometry = new THREE.BoxGeometry(10, 10, 10); //幾何體 
//存放貼圖名稱列表
var arr = ["4_l", "4_r", "4_u", "4_d", "4_b", "4_f"];
var boxMaterials = [];
arr.forEach((item) => {
  // 紋理加載
  let texture = new THREE.TextureLoader().load(`./imgs/living/${item}.jpg`);
  // 創(chuàng)建材質(zhì)
  if (item === "4_u" || item === "4_d") {
    texture.rotation = Math.PI; //旋轉(zhuǎn)180°
    texture.center = new THREE.Vector2(0.5, 0.5); //按照紋理中心進行旋轉(zhuǎn)
    boxMaterials.push(new THREE.MeshBasicMaterial({ map: texture }));
  } else {
    boxMaterials.push(new THREE.MeshBasicMaterial({ map: texture }));
  }
});
const cube = new THREE.Mesh(geometry, boxMaterials);
cube.geometry.scale(1, 1, -1);
scene.add(cube);

onMounted(() => {
  // 添加軌道控制器
  const control = new OrbitControls(camera,container.value);
  control.enableDamping = true; //添加阻尼
  //掛載完畢后獲取DMO ref="container"
  container.value.appendChild(renderer.domElement);
  render();
})

</script>
<style>
.container{
  height: 100vh;
  width: 100vw;
  background-color: #f0f0f0;
}
</style>

立方體方式實現(xiàn)

用球體方式實現(xiàn)(使用hdr，導(dǎo)入RGBELoader)

<template>
  <div class="container" ref="container"></div>
</template>

<script setup>
import * as THREE from 'three';
import { onMounted, reactive, ref } from "vue";
// 導(dǎo)入軌道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"; //hdr

//創(chuàng)建場景
const scene = new THREE.Scene();
//創(chuàng)建相機
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 設(shè)置相機位置
camera.position.z = 0.5;
//初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
const container = ref(null)

//封裝渲染函數(shù)
const render = () => {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

//創(chuàng)建球體
const geometry = new THREE.SphereGeometry(5, 32, 32);
const loader = new RGBELoader();
loader.load('./imgs/hdr/Living.hdr',(texture) =>{
  const material = new THREE.MeshBasicMaterial({ map: texture });
  const sphere = new THREE.Mesh(geometry, material);
  sphere.geometry.scale(1,1,-1);
  scene.add(sphere);
})

onMounted(() => {
  // 添加軌道控制器
  const control = new OrbitControls(camera,container.value);
  control.enableDamping = true; //添加阻尼
  //掛載完畢后獲取DMO ref="container"
  container.value.appendChild(renderer.domElement);
  render();
})
</script>

<style>
.container{
  height: 100vh;
  width: 100vw;
  background-color: #f0f0f0;
}
</style>

球體方式實現(xiàn)