forked from ThatOpen/engine_fragment
-
Notifications
You must be signed in to change notification settings - Fork 0
/
create-merged-fragment.html
75 lines (64 loc) · 3.09 KB
/
create-merged-fragment.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport'
content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<link rel='stylesheet' href='../resources/styles.css'>
<link rel='icon' type='image/x-icon' href='../resources/favicon.ico'>
<title>Components | Merged fragment</title>
</head>
<body>
<canvas class='full-screen' id='container'></canvas>
<script type='importmap'>
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three/examples/jsm/lines/LineMaterial": "https://unpkg.com/[email protected]/examples/jsm/lines/LineMaterial.js",
"three/examples/jsm/controls/OrbitControls": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js",
"three/examples/jsm/loaders/GLTFLoader": "https://unpkg.com/[email protected]/examples/jsm/loaders/GLTFLoader.js",
"three/examples/jsm/libs/lil-gui.module.min": "https://unpkg.com/[email protected]/examples/jsm/libs/lil-gui.module.min.js",
"stats.js/src/Stats.js": "https://unpkg.com/[email protected]/src/Stats.js",
"unzipit": "https://unpkg.com/[email protected]/dist/unzipit.module.js",
"client-zip": "https://unpkg.com/[email protected]/index.js"
}
}
</script>
<script type='module'>
import { SimpleThreeScene } from '../resources/simple-three-scene.js';
import * as FRAGS from '../resources/fragment.js';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
const canvas = document.getElementById('container');
const threeScene = new SimpleThreeScene(canvas);
// Get the walls geometries
const loader = new GLTFLoader();
const rawWall1 = await loader.loadAsync('../resources/models/wall_1.glb');
const rawWall2 = await loader.loadAsync('../resources/models/wall_2.glb');
const rawWall3 = await loader.loadAsync('../resources/models/wall_3.glb');
const rawWall4 = await loader.loadAsync('../resources/models/wall_2.glb');
const wallsMeshes = [
rawWall1.scene.children[0],
rawWall2.scene.children[0],
rawWall3.scene.children[0],
rawWall4.scene.children[0]
];
const geometries = [wallsMeshes.map(wall => wall.geometry)];
// All walls have the same color, so just create a new material from the first wall
const color = wallsMeshes[0].material.color;
const material = new THREE.MeshLambertMaterial({ color });
// Each wall is a different item, so splitByBlocks = true
const geometry = FRAGS.GeometryUtils.merge(geometries, true);
// Create a new fragment and add it to the scene
// Merged fragments only have one instance that contains all items
// We can specify each wall ID with `setInstance`
// We'll also move the walls to have it's bottom part aligned with the base grid
const walls = new FRAGS.Fragment(geometry, material, 1);
const transform = new THREE.Matrix4();
transform.setPosition(-1, 0, 2);
walls.setInstance(0, {ids: ["1", "2", "3", "4"], transform });
threeScene.scene.add(walls.mesh);
</script>
</body>
</html>