threejs-city-showcase/
├── index.html
├── src/
│   ├── index.css
│   ├── main.ts
│   ├── assets/
│   │   ├── building.glb
│   │   ├── building-texture.jpg
│   ├── tests/
│   │   ├── loader.test.ts
└── package.json

npm create vite@latest threejs-city-showcase -- --template vanilla-ts
cd threejs-city-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] 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';
import Stats from 'stats.js';
import './index.css';

// 初始化場景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
const canvas = renderer.domElement;
canvas.setAttribute('aria-label', '3D 城市建筑展示');
canvas.setAttribute('tabindex', '0');
document.getElementById('canvas')!.appendChild(canvas);

// 可訪問性：屏幕閱讀器描述
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);

// 進(jìn)度條
const progressBar = document.createElement('div');
progressBar.className = 'progress-bar';
const progressFill = document.createElement('div');
progressFill.className = 'progress-fill';
progressFill.style.width = '0%';
progressBar.appendChild(progressFill);
document.querySelector('.controls')!.appendChild(progressBar);

// 添加地面
const groundGeometry = new THREE.PlaneGeometry(20, 20);
const groundMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.name = '地面';
scene.add(ground);

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

// 初始化控制器
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.minDistance = 5;
controls.maxDistance = 50;

// 初始化 Raycaster
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const highlightMaterial = new THREE.MeshStandardMaterial({ color: 0x22c55e });
let originalMaterials = new Map();

// 加載模型
const loader = new GLTFLoader();
let currentModel: THREE.Group | null = null;
function loadModel(path: string, position: THREE.Vector3) {
  loader.load(
    path,
    (gltf) => {
      if (currentModel) scene.remove(currentModel);
      currentModel = gltf.scene;
      currentModel.position.copy(position);
      currentModel.scale.set(0.1, 0.1, 0.1); // 假設(shè)模型需要縮放
      currentModel.traverse((child) => {
        if (child instanceof THREE.Mesh) {
          originalMaterials.set(child, child.material);
          child.castShadow = true;
          child.receiveShadow = true;
        }
      });
      scene.add(currentModel);
      progressBar.style.display = 'none';
      sceneDesc.textContent = `模型 ${path} 已加載`;
    },
    (progress) => {
      progressFill.style.width = `${(progress.loaded / progress.total) * 100}%`;
    },
    (error) => {
      console.error('加載錯誤:', error);
      progressBar.style.display = 'none';
      sceneDesc.textContent = '模型加載失敗，請檢查文件';
    }
  );
}
loadModel('/src/assets/building.glb', new THREE.Vector3(0, 0, 0));

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

// 渲染循環(huán)
function animate() {
  stats.begin();
  controls.update();
  renderer.render(scene, camera);
  stats.end();
  requestAnimationFrame(animate);
}
animate();

// 鼠標(biāo)交互：點(diǎn)擊高亮
canvas.addEventListener('click', (event) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(currentModel ? currentModel.children : []);
  currentModel?.traverse((child) => {
    if (child instanceof THREE.Mesh) child.material = originalMaterials.get(child);
  });
  if (intersects.length > 0) {
    const target = intersects[0].object as THREE.Mesh;
    target.material = highlightMaterial;
    sceneDesc.textContent = `點(diǎn)擊了模型部分: ${target.name || '未命名'}`;
  }
});

// 鍵盤控制：切換模型
canvas.addEventListener('keydown', (e: KeyboardEvent) => {
  if (e.key === '1') {
    loadModel('/src/assets/building.glb', new THREE.Vector3(0, 0, 0));
    progressBar.style.display = 'block';
    sceneDesc.textContent = '正在加載模型 building.glb';
  }
});

// 響應(yīng)式調(diào)整
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

// 交互控件：重新加載模型
const reloadButton = document.createElement('button');
reloadButton.className = 'p-2 bg-primary text-white rounded';
reloadButton.textContent = '重新加載模型';
reloadButton.setAttribute('aria-label', '重新加載模型');
document.querySelector('.controls')!.appendChild(reloadButton);
reloadButton.addEventListener('click', () => {
  loadModel('/src/assets/building.glb', new THREE.Vector3(0, 0, 0));
  progressBar.style.display = 'block';
  sceneDesc.textContent = '正在加載模型 building.glb';
});

<!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 城市建筑展示</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">
      Three.js 城市建筑展示
    </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">使用鼠標(biāo)旋轉(zhuǎn)、縮放，點(diǎn)擊高亮模型，或按數(shù)字鍵 1 切換模型</p>
    </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 { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
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 loader = new GLTFLoader();
  const stats = new Stats();

  suite
    .add('GLTFLoader Load', async () => {
      stats.begin();
      await new Promise((resolve) => {
        loader.load('/src/assets/building.glb', (gltf) => {
          scene.add(gltf.scene);
          renderer.render(scene, camera);
          stats.end();
          resolve(null);
        });
      });
    })
    .on('cycle', (event: any) => {
      console.log(String(event.target));
    })
    .run({ async: true });
}

runBenchmark();

const modelSelect = document.createElement('select');
modelSelect.className = 'p-2 bg-white dark:bg-gray-800 rounded';
modelSelect.setAttribute('aria-label', '選擇模型');
['building.glb', 'building2.glb'].forEach((model) => {
  const option = document.createElement('option');
  option.value = model;
  option.textContent = model;
  modelSelect.appendChild(option);
});
document.querySelector('.controls')!.appendChild(modelSelect);
modelSelect.addEventListener('change', () => {
  loadModel(`/src/assets/${modelSelect.value}`, new THREE.Vector3(0, 0, 0));
  progressBar.style.display = 'block';
  sceneDesc.textContent = `正在加載模型 ${modelSelect.value}`;
});

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
loader.setDRACOLoader(dracoLoader);

npm run dev