npm init vue@latest
# 選擇Vue3 + TypeScript + Vite
cd your-project-name
npm install

npm install three @types/three three-stdlib

<template>
  <div ref="sceneContainer" class="scene-container"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three-stdlib/controls/OrbitControls';

const sceneContainer = ref(null);

// 核心Three.js對(duì)象
let scene, camera, renderer, controls, cube;

// 初始化場(chǎng)景
function initScene() {
  // 1. 創(chuàng)建場(chǎng)景
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x1a1a2e);
  
  // 2. 創(chuàng)建相機(jī)
  camera = new THREE.PerspectiveCamera(
    75, 
    window.innerWidth / window.innerHeight, 
    0.1, 
    1000
  );
  camera.position.z = 5;
  
  // 3. 創(chuàng)建渲染器
  renderer = new THREE.WebGLRenderer({ 
    antialias: true,
    alpha: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  
  // 4. 添加到DOM
  sceneContainer.value.appendChild(renderer.domElement);
  
  // 5. 添加軌道控制器
  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.05;
  
  // 6. 添加光源
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
  scene.add(ambientLight);
  
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(5, 5, 5);
  scene.add(directionalLight);
  
  // 7. 創(chuàng)建立方體
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshStandardMaterial({ 
    color: 0x00a8ff,
    metalness: 0.7,
    roughness: 0.2
  });
  cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  
  // 8. 添加網(wǎng)格地板
  const floorGeometry = new THREE.PlaneGeometry(10, 10);
  const floorMaterial = new THREE.MeshStandardMaterial({
    color: 0x393e46,
    side: THREE.DoubleSide
  });
  const floor = new THREE.Mesh(floorGeometry, floorMaterial);
  floor.rotation.x = Math.PI / 2;
  floor.position.y = -1.5;
  scene.add(floor);
  
  // 9. 開始動(dòng)畫循環(huán)
  animate();
}

// 動(dòng)畫循環(huán)
function animate() {
  requestAnimationFrame(animate);
  
  // 立方體旋轉(zhuǎn)
  if (cube) {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
  }
  
  // 更新控制器
  if (controls) controls.update();
  
  // 渲染場(chǎng)景
  renderer.render(scene, camera);
}

// 響應(yīng)式調(diào)整大小
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

onMounted(() => {
  initScene();
  window.addEventListener('resize', onWindowResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', onWindowResize);
  // 清理資源
  if (renderer) renderer.dispose();
});
</script>

<style scoped>
.scene-container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
</style>

<template>
  <div class="home-view">
    <ThreeScene />
    <div class="overlay">
      <h1>Vue3 + Three.js 3D場(chǎng)景</h1>
      <p>旋轉(zhuǎn)視角: 按住鼠標(biāo)左鍵拖動(dòng)</p>
      <p>縮放場(chǎng)景: 使用鼠標(biāo)滾輪</p>
    </div>
  </div>
</template>

<script setup>
import ThreeScene from '@/components/ThreeScene.vue';
</script>

<style>
.home-view {
  position: relative;
  height: 100vh;
}

.overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 15px;
  border-radius: 10px;
  max-width: 300px;
  z-index: 10;
}
</style>

<template>
  <div class="model-loader">
    <button @click="loadModel">加載模型</button>
    <select v-model="selectedModel">
      <option value="robot">機(jī)器人</option>
      <option value="car">汽車</option>
    </select>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { GLTFLoader } from 'three-stdlib/loaders/GLTFLoader';

const emit = defineEmits(['model-loaded']);
const selectedModel = ref('robot');

async function loadModel() {
  const loader = new GLTFLoader();
  
  try {
    const modelPath = selectedModel.value === 'robot' 
      ? '/models/robot.glb' 
      : '/models/car.glb';
      
    const gltf = await loader.loadAsync(modelPath);
    
    // 調(diào)整模型大小和位置
    gltf.scene.scale.set(0.5, 0.5, 0.5);
    gltf.scene.position.y = -1;
    
    // 發(fā)送到父組件
    emit('model-loaded', gltf.scene);
  } catch (error) {
    console.error('模型加載失敗:', error);
  }
}
</script>

// ThreeScene.vue 中添加

import { onMounted } from 'vue';

// 添加模型狀態(tài)
const currentModel = ref(null);

// 加載模型
function handleModelLoaded(model) {
  // 移除舊模型
  if (currentModel.value) {
    scene.remove(currentModel.value);
  }
  
  // 添加新模型
  scene.add(model);
  currentModel.value = model;
}

// 在initScene函數(shù)中添加
function initRaycaster() {
  const raycaster = new THREE.Raycaster();
  const mouse = new THREE.Vector2();
  
  function onMouseClick(event) {
    // 計(jì)算鼠標(biāo)位置
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    
    // 更新射線
    raycaster.setFromCamera(mouse, camera);
    
    // 檢測(cè)相交物體
    const intersects = raycaster.intersectObjects(scene.children);
    
    if (intersects.length > 0) {
      const clickedObject = intersects[0].object;
      
      // 高亮顯示被點(diǎn)擊的物體
      clickedObject.material.emissive = new THREE.Color(0xffff00);
      
      setTimeout(() => {
        clickedObject.material.emissive = new THREE.Color(0x000000);
      }, 1000);
      
      console.log('點(diǎn)擊了物體:', clickedObject);
    }
  }
  
  window.addEventListener('click', onMouseClick);
  
  onUnmounted(() => {
    window.removeEventListener('click', onMouseClick);
  });
}

// 在initScene中調(diào)用
initRaycaster();

import { ref, onUnmounted } from 'vue';
import * as THREE from 'three';

export function useThree(container) {
  const scene = new THREE.Scene();
  const camera = ref(null);
  const renderer = ref(null);
  
  function initCamera() {
    camera.value = new THREE.PerspectiveCamera(
      75, 
      window.innerWidth / window.innerHeight, 
      0.1, 
      1000
    );
    camera.value.position.z = 5;
  }
  
  function initRenderer() {
    renderer.value = new THREE.WebGLRenderer({ 
      antialias: true,
      alpha: true
    });
    renderer.value.setSize(window.innerWidth, window.innerHeight);
    renderer.value.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    container.value.appendChild(renderer.value.domElement);
  }
  
  function onWindowResize() {
    camera.value.aspect = window.innerWidth / window.innerHeight;
    camera.value.updateProjectionMatrix();
    renderer.value.setSize(window.innerWidth, window.innerHeight);
  }
  
  function init() {
    initCamera();
    initRenderer();
    window.addEventListener('resize', onWindowResize);
  }
  
  onUnmounted(() => {
    window.removeEventListener('resize', onWindowResize);
    if (renderer.value) renderer.value.dispose();
  });
  
  return {
    scene,
    camera,
    renderer,
    init
  };
}

// ThreeScene.vue 中
import { useThree } from '@/composables/useThree';

const { scene, camera, renderer } = useThree(sceneContainer);

onMounted(() => {
  init(); // 調(diào)用組合式函數(shù)中的初始化
  // 其他初始化代碼...
});