57 lines
1.7 KiB
HTML
57 lines
1.7 KiB
HTML
<!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> |