feat(all): sdk 测试 index.html

2026-04-20 10:35:55 +08:00
parent 5d7f479765
commit 8a1436d3a8
7 changed files with 59 additions and 108 deletions
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/three@0.184.0/build/three.webgpu.js",
+                "three/webgpu": "https://unpkg.com/three@0.184.0/build/three.webgpu.js",
+                "three/tsl": "https://unpkg.com/three@0.184.0/build/three.tsl.js",
+                "three/examples/": "https://unpkg.com/three@0.184.0/examples/",
+                 "three/addons/": "https://unpkg.com/three@0.184.0/examples/jsm/",
+                "@deep/engine":"./DeepEngine.es.js"
+            }
+        }
+    </script>
+    <style>
+        html,body,#container {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+<div id="container"></div>
+
+<script type="module">
+    import * as THREE from 'three/webgpu';
+    import {Tool, Viewer, ViewerEvents} from "@deep/engine";
+    import {color} from "three/tsl"
+    const viewer = new Viewer("container", {
+        initCameraState: {
+            position: {x: 5, y: 5, z: 5},
+            target: {x: 0, y: 0, z: 0},
+        },
+    });
+    viewer.emitter.once(ViewerEvents.INIT).then(() => {
+        viewer.scene.backgroundNode = color("#aaaaaa");
+        // 创建一个 box
+        const geometry = new THREE.BoxGeometry(1, 1, 1);
+        const material = new THREE.MeshBasicMaterial({
+            color: 0x00ff00
+        });
+        const box = new THREE.Mesh(geometry, material);
+
+        // 设置位置
+        box.position.set(0, 0.5, 0);
+
+        // 添加到场景
+        viewer.scene.add(box);
+    });
+</script>
+</body>
+</html>