-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
79 lines (75 loc) · 2.89 KB
/
index.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
76
77
78
79
<!DOCTYPE html><html><head><meta charset="utf-8"/>
<title>vr-tree</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<!-- controller couldn't works on 1.3.0 for -->
</head><body>
<a-scene id="scene">
<a-assets>
<img id="tex_0" src="./img/soil.png">
<img id="tex_1" src="./img/dry.png">
<img id="tex_2" src="./img/leaf.png">
<img id="tex_3" src="./img/grass.png">
</a-assets>
<a-entity id="handr" oculus-touch-controls="hand: right"></a-entity>
<a-entity id="handl" oculus-touch-controls="hand: left"></a-entity>
<a-plane material="src:#tex_0;repeat:30 30" height="3" width="3" rotation="-90 0 0"></a-plane>
</a-scene>
<script type="module">
import tree from "https://code4fukui.github.io/voxel-trees/index.js";
import { deepEqual } from "https://js.sabae.cc/deepEqual.js";
const size = 0.1;
const snap = n => Math.floor(n / size) * size + size / 2;
const snap3D = p => ({ x: snap(p.x), y: snap(p.y), z: snap(p.z) });
const boxes = [];
const putBox = (p, type = 0) => {
const box = document.createElement("a-box");
const p2 = snap3D(p);
box.setAttribute("position", p2);
box.setAttribute("width", size);
box.setAttribute("height", size);
box.setAttribute("depth", size);
box.setAttribute("material", "src:#tex_" + type);
scene.appendChild(box);
boxes.push([p2, box]);
};
const toggleBox = (p, type) => {
const p2 = snap3D(p);
const idx = boxes.findIndex(b => deepEqual(b[0], p2));
if (idx >= 0) {
scene.removeChild(boxes[idx][1]);
boxes.splice(idx, 1);
} else {
putBox(p, type);
}
};
const putTree = (p0, type = 0, height = 10) => {
tree({
position: { x: 0, y: 0, z: 0 },
bark: 1, // type
leaves: 2, // type
//treeType: "fractal", // not tree
treeType: ["subspace", "guybrush"][type], // guybrush: rounded
height,
//base: 7, // length of dry for subspace
//radius: 5, // for guybrush
setBlock: (p, type) => {
putBox({ x: p0.x + p[0] * size, y: p0.y + p[1] * size, z: p0.z + p[2] * size }, type);
},
});
};
putTree({ x: 1, y: 0, z: -1 }, 0, 16);
putTree({ x: -1, y: 0, z: -1 }, 1);
const handler = function(evt) {
const p = this.object3D.getWorldPosition();
toggleBox(p);
};
handr.addEventListener("triggerdown", handler);
handl.addEventListener("triggerdown", handler);
handr.addEventListener("abuttondown", function() { toggleBox(this.object3D.getWorldPosition(), 1); });
handr.addEventListener("bbuttondown", function() { toggleBox(this.object3D.getWorldPosition(), 2); });
handr.addEventListener("gripdown", function() { toggleBox(this.object3D.getWorldPosition(), 3); });
handl.addEventListener("xbuttondown", function() { toggleBox(this.object3D.getWorldPosition(), 1); });
handl.addEventListener("ybuttondown", function() { toggleBox(this.object3D.getWorldPosition(), 2); });
handl.addEventListener("gripdown", function() { toggleBox(this.object3D.getWorldPosition(), 3); });
</script>
</body></html>