feat(v3.3): WebGL 3D viewer + tutorial docs

2026-07-24 12:42:49 +00:00
parent 36c55eb663
commit acc26e3a4b
4 changed files with 830 additions and 0 deletions
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title>ViewDesignEngine 3D Viewer</title>
+<style>
+  body { margin: 0; overflow: hidden; font-family: sans-serif; }
+  canvas { display: block; }
+  #info { position: absolute; top: 10px; left: 10px; color: white; background: rgba(0,0,0,0.7); padding: 8px 12px; border-radius: 4px; font-size: 12px; }
+  #drop { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #aaa; font-size: 18px; pointer-events: none; }
+  #toolbar { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
+  #toolbar button { padding: 6px 14px; border: 1px solid #666; background: rgba(0,0,0,0.6); color: white; border-radius: 3px; cursor: pointer; font-size: 12px; }
+  #toolbar button:hover { background: rgba(255,255,255,0.2); }
+  #file-input { display: none; }
+</style>
+</head>
+<body>
+<div id="info">ViewDesignEngine 3D Viewer</div>
+<div id="drop">拖放 .glb / .stl 文件到这里</div>
+<div id="toolbar">
+  <button onclick="document.getElementById('file-input').click()">📁 打开文件</button>
+  <button onclick="toggleWireframe()">🔲 线框</button>
+  <button onclick="resetCamera()">🔄 重置视角</button>
+</div>
+<input type="file" id="file-input" accept=".glb,.gltf,.stl">
+
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
+    "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
+  }
+}
+</script>
+<script type="module">
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import { STLLoader } from 'three/addons/loaders/STLLoader.js';
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x222233);
+
+const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
+camera.position.set(5, 4, 8);
+
+const renderer = new THREE.WebGLRenderer({antialias: true});
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.setPixelRatio(window.devicePixelRatio);
+document.body.appendChild(renderer.domElement);
+
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+
+const ambientLight = new THREE.AmbientLight(0x404050);
+scene.add(ambientLight);
+const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
+dirLight.position.set(10, 15, 10);
+scene.add(dirLight);
+
+const gridHelper = new THREE.GridHelper(10, 10, 0x444466, 0x333344);
+scene.add(gridHelper);
+
+let currentMesh = null;
+
+function loadGLB(url) {
+  new GLTFLoader().load(url, (gltf) => {
+    if (currentMesh) scene.remove(currentMesh);
+    currentMesh = gltf.scene;
+    scene.add(currentMesh);
+    document.getElementById('drop').style.display = 'none';
+    document.getElementById('info').textContent = `GLB loaded: ${url.split('/').pop()}`;
+  });
+}
+
+function loadSTL(url) {
+  new STLLoader().load(url, (geometry) => {
+    if (currentMesh) scene.remove(currentMesh);
+    const material = new THREE.MeshPhongMaterial({color: 0x4499cc, specular: 0x111111, shininess: 30});
+    currentMesh = new THREE.Mesh(geometry, material);
+    scene.add(currentMesh);
+    document.getElementById('drop').style.display = 'none';
+    document.getElementById('info').textContent = `STL loaded: ${url.split('/').pop()}`;
+  });
+}
+
+// File open
+document.getElementById('file-input').addEventListener('change', (e) => {
+  const file = e.target.files[0];
+  if (!file) return;
+  const url = URL.createObjectURL(file);
+  if (file.name.endsWith('.stl')) loadSTL(url);
+  else loadGLB(url);
+});
+
+// Drag & drop
+document.addEventListener('dragover', (e) => { e.preventDefault(); });
+document.addEventListener('drop', (e) => {
+  e.preventDefault();
+  const file = e.dataTransfer.files[0];
+  if (!file) return;
+  const url = URL.createObjectURL(file);
+  if (file.name.endsWith('.stl')) loadSTL(url);
+  else loadGLB(url);
+});
+
+window.toggleWireframe = () => {
+  if (currentMesh) {
+    currentMesh.traverse((child) => { if (child.isMesh) child.material.wireframe = !child.material.wireframe; });
+  }
+};
+
+window.resetCamera = () => {
+  camera.position.set(5, 4, 8);
+  controls.target.set(0, 0, 0);
+  controls.update();
+};
+
+function animate() {
+  requestAnimationFrame(animate);
+  controls.update();
+  renderer.render(scene, camera);
+}
+animate();
+window.addEventListener('resize', () => {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+});
+</script>
+</body>
+</html>