threejs-product-showcase/
├── index.html
├── src/
│   ├── index.css
│   ├── main.ts
│   ├── assets/
│   │   ├── models/
│   │   │   ├── chair.glb
│   │   │   ├── table.glb
│   │   │   ├── lamp.glb
│   │   ├── textures/
│   │   │   ├── floor-texture.jpg
│   │   │   ├── wall-texture.jpg
│   │   │   ├── hotspot.png
│   ├── components/
│   │   ├── scene.ts
│   │   ├── controls.ts
│   ├── tests/
│   │   ├── showcase.test.ts
└── package.json

npm create vite@latest threejs-product-showcase -- --template vanilla-ts
cd threejs-product-showcase
npm install three@0.157.0 @types/three@0.157.0 tailwindcss postcss autoprefixer stats.js
npx tailwindcss init

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{html,js,ts}'],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#1f2937',
        accent: '#22c55e',
      },
    },
  },
  plugins: [],
};

@tailwind base;
@tailwind components;
@tailwind utilities;

.dark {
  @apply bg-gray-900 text-white;
}

#canvas {
  @apply w-full max-w-4xl mx-auto h-[600px] sm:h-[700px] md:h-[800px] rounded-lg shadow-lg;
}

.controls {
  @apply p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md mt-4 text-center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.progress-bar {
  @apply w-full h-4 bg-gray-200 rounded overflow-hidden;
}

.progress-fill {
  @apply h-4 bg-primary transition-all duration-300;
}

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

export class ShowcaseScene {
  scene: THREE.Scene;
  camera: THREE.PerspectiveCamera;
  renderer: THREE.WebGLRenderer;
  controls: OrbitControls;
  models: { [key: string]: THREE.Group };
  currentModel: THREE.Group | null = null;
  hotspots: THREE.Sprite[] = [];
  raycaster: THREE.Raycaster;
  mouse: THREE.Vector2;

  constructor(canvas: HTMLCanvasElement, sceneDesc: HTMLDivElement) {
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.camera.position.set(0, 2, 5);
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
    canvas.appendChild(this.renderer.domElement);
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    this.controls.enableDamping = true;
    this.models = {};
    this.raycaster = new THREE.Raycaster();
    this.mouse = new THREE.Vector2();

    // 加載紋理
    const textureLoader = new THREE.TextureLoader();
    const floorTexture = textureLoader.load('/src/assets/textures/floor-texture.jpg');
    const wallTexture = textureLoader.load('/src/assets/textures/wall-texture.jpg');

    // 添加展廳
    const floor = new THREE.Mesh(
      new THREE.PlaneGeometry(10, 10),
      new THREE.MeshStandardMaterial({ map: floorTexture })
    );
    floor.rotation.x = -Math.PI / 2;
    this.scene.add(floor);
    const wall = new THREE.Mesh(
      new THREE.PlaneGeometry(10, 5),
      new THREE.MeshStandardMaterial({ map: wallTexture })
    );
    wall.position.set(0, 2.5, -5);
    this.scene.add(wall);

    // 添加光源
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    this.scene.add(ambientLight);
    const pointLight = new THREE.PointLight(0xffffff, 0.5, 100);
    pointLight.position.set(2, 3, 2);
    this.scene.add(pointLight);

    // 加載模型
    this.loadModels(sceneDesc);
  }

  async loadModels(sceneDesc: HTMLDivElement) {
    const loader = new GLTFLoader();
    const modelNames = ['chair', 'table', 'lamp'];
    const progressFill = document.querySelector('.progress-fill') as HTMLDivElement;
    for (let i = 0; i < modelNames.length; i++) {
      const name = modelNames[i];
      const gltf = await loader.loadAsync(`/src/assets/models/${name}.glb`);
      this.models[name] = gltf.scene;
      this.models[name].visible = false;
      this.scene.add(this.models[name]);
      progressFill.style.width = `${((i + 1) / modelNames.length) * 100}%`;
    }
    this.currentModel = this.models['chair'];
    this.currentModel.visible = true;
    this.addHotspots();
    progressFill.parentElement!.style.display = 'none';
    sceneDesc.textContent = '商品模型加載完成，當(dāng)前展示：椅子';
  }

  addHotspots() {
    const textureLoader = new THREE.TextureLoader();
    const hotspotMaterial = new THREE.SpriteMaterial({
      map: textureLoader.load('/src/assets/textures/hotspot.png'),
      transparent: true,
    });
    const hotspot = new THREE.Sprite(hotspotMaterial);
    hotspot.position.set(0, 1, 0);
    hotspot.scale.set(0.5, 0.5, 0.5);
    hotspot.userData = { info: '椅子：￥999，現(xiàn)代簡約風(fēng)格' };
    this.hotspots.push(hotspot);
    this.scene.add(hotspot);
  }

  switchModel(name: string, sceneDesc: HTMLDivElement) {
    if (this.currentModel) this.currentModel.visible = false;
    this.currentModel = this.models[name];
    this.currentModel.visible = true;
    this.hotspots.forEach((hotspot) => {
      hotspot.userData.info = `${name}：￥${name === 'chair' ? 999 : name === 'table' ? 1999 : 499}，現(xiàn)代簡約風(fēng)格`;
    });
    sceneDesc.textContent = `切換到商品：${name}`;
  }

  handleInteraction(event: MouseEvent, sceneDesc: HTMLDivElement) {
    this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    this.raycaster.setFromCamera(this.mouse, this.camera);
    const intersects = this.raycaster.intersectObjects(this.hotspots);
    if (intersects.length > 0) {
      sceneDesc.textContent = intersects[0].object.userData.info;
    }
  }

  animate() {
    this.controls.update();
    this.renderer.render(this.scene, this.camera);
    requestAnimationFrame(() => this.animate());
  }

  resize() {
    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(window.innerWidth, window.innerHeight);
  }
}

import * as THREE from 'three';
import Stats from 'stats.js';
import { ShowcaseScene } from './components/scene';
import './index.css';

// 初始化場景
const canvas = document.getElementById('canvas') as HTMLDivElement;
const sceneDesc = document.createElement('div');
sceneDesc.id = 'scene-desc';
sceneDesc.className = 'sr-only';
sceneDesc.setAttribute('aria-live', 'polite');
sceneDesc.textContent = '3D 商品展示空間加載中';
document.body.appendChild(sceneDesc);

const showcase = new ShowcaseScene(canvas, sceneDesc);

// 性能監(jiān)控
const stats = new Stats();
stats.showPanel(0); // 顯示 FPS
document.body.appendChild(stats.dom);

// 渲染循環(huán)
function animate() {
  stats.begin();
  showcase.animate();
  stats.end();
  requestAnimationFrame(animate);
}
animate();

// 交互控件：切換模型
const modelButtons = [
  { name: 'chair', label: '椅子' },
  { name: 'table', label: '桌子' },
  { name: 'lamp', label: '臺燈' },
];
modelButtons.forEach(({ name, label }, index) => {
  const button = document.createElement('button');
  button.className = 'p-2 bg-primary text-white rounded ml-4';
  button.textContent = label;
  button.setAttribute('aria-label', `切換到${label}`);
  document.querySelector('.controls')!.appendChild(button);
  button.addEventListener('click', () => showcase.switchModel(name, sceneDesc));
});

// 鍵盤控制：切換模型
canvas.addEventListener('keydown', (e: KeyboardEvent) => {
  if (e.key === '1') showcase.switchModel('chair', sceneDesc);
  else if (e.key === '2') showcase.switchModel('table', sceneDesc);
  else if (e.key === '3') showcase.switchModel('lamp', sceneDesc);
});

// 鼠標(biāo)交互：熱點(diǎn)
canvas.addEventListener('click', (event) => showcase.handleInteraction(event, sceneDesc));

// 響應(yīng)式調(diào)整
window.addEventListener('resize', () => showcase.resize());

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js 3D 商品展示空間</title>
  <link rel="stylesheet" href="./src/index.css" rel="external nofollow"  />
</head>
<body class="bg-gray-100 dark:bg-gray-900">
  <div class="min-h-screen p-4">
    <h1 class="text-2xl md:text-3xl font-bold text-center text-gray-900 dark:text-white mb-4">
      3D 商品展示空間
    </h1>
    <div id="canvas" class="h-[600px] w-full max-w-4xl mx-auto rounded-lg shadow"></div>
    <div class="controls">
      <p class="text-gray-900 dark:text-white">使用數(shù)字鍵 1-3 或按鈕切換商品，點(diǎn)擊熱點(diǎn)查看詳情</p>
      <div class="progress-bar">
        <div class="progress-fill"></div>
      </div>
    </div>
  </div>
  <script type="module" src="./src/main.ts"></script>
</body>
</html>

#canvas {
  @apply h-[600px] sm:h-[700px] md:h-[800px] w-full max-w-4xl mx-auto;
}

.controls {
  @apply p-2 sm:p-4;
}

import Benchmark from 'benchmark';
import * as THREE from 'three';
import Stats from 'stats.js';

async function runBenchmark() {
  const suite = new Benchmark.Suite();
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  const stats = new Stats();
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshStandardMaterial();
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  suite
    .add('Scene Render', () => {
      stats.begin();
      renderer.render(scene, camera);
      stats.end();
    })
    .on('cycle', (event: any) => {
      console.log(String(event.target));
    })
    .run({ async: true });
}

runBenchmark();

const scaleInput = document.createElement('input');
scaleInput.type = 'range';
scaleInput.min = '0.5';
scaleInput.max = '2';
scaleInput.step = '0.1';
scaleInput.value = '1';
scaleInput.className = 'w-full mt-2';
scaleInput.setAttribute('aria-label', '調(diào)整模型大小');
document.querySelector('.controls')!.appendChild(scaleInput);
scaleInput.addEventListener('input', () => {
  if (showcase.currentModel) {
    const scale = parseFloat(scaleInput.value);
    showcase.currentModel.scale.set(scale, scale, scale);
    sceneDesc.textContent = `模型縮放調(diào)整為 ${scale.toFixed(1)}`;
  }
});

const lightButton = document.createElement('button');
lightButton.className = 'p-2 bg-secondary text-white rounded ml-4';
lightButton.textContent = '切換光源';
lightButton.setAttribute('aria-label', '切換光源強(qiáng)度');
document.querySelector('.controls')!.appendChild(lightButton);
lightButton.addEventListener('click', () => {
  pointLight.intensity = pointLight.intensity === 0.5 ? 1.0 : 0.5;
  sceneDesc.textContent = `光源強(qiáng)度調(diào)整為 ${pointLight.intensity}`;
});

npm run dev