# 創(chuàng)建 Vue 3 項(xiàng)目
npm create vite@latest vue-3d-viewer --template vue
cd vue-3d-viewer

# 安裝 Three.js
···l three

// ThreeDViewer.vue
<template>
  <div ref="threeContainer" class="three-container"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as THREE from "three";

const threeContainer = ref(null);

onMounted(() => {
  // 創(chuàng)建場景
  const scene = new THREE.Scene();

  // 創(chuàng)建相機(jī)（透視相機(jī)）
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(0, 0, 5); // 設(shè)置相機(jī)位置

  // 創(chuàng)建渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  threeContainer.value.appendChild(renderer.domElement);

  // 創(chuàng)建一個(gè)立方體
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshStandardMaterial({ color: 0x0077ff });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  // 添加光源
  const light = new THREE.AmbientLight(0xffffff, 1);
  scene.add(light);

  // 渲染循環(huán)
  function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }
  animate();
});
</script>

<style>
.three-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>

npm install three/examples/jsm

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

// 加載 3D 商品模型
const loader = new GLTFLoader();
loader.load("/models/product.glb", (gltf) => {
  const model = gltf.scene;
  model.scale.set(1, 1, 1); // 調(diào)整模型大小
  scene.add(model);
});

npm install three-orbitcontrols

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 使旋轉(zhuǎn)更流暢
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false;
controls.minDistance = 1; // 最小縮放距離
controls.maxDistance = 10; // 最大縮放距離

// 添加環(huán)境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// 添加聚光燈
const spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(5, 5, 5);
scene.add(spotLight);
{javascript}

并開啟陰影：

{javascript}
renderer.shadowMap.enabled = true;
cube.castShadow = true;
cube.receiveShadow = true;
spotLight.castShadow = true;

// App.vue
<template>
  <ThreeDViewer />
</template>

<script setup>
import ThreeDViewer from "./components/ThreeDViewer.vue";
</script>