This repository has been archived by the owner on Oct 19, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 74
/
index.html
93 lines (90 loc) · 3.49 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
<title>3dio for Aframe</title>
<!-- aframe library -->
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="../../../build/3dio.js"></script>
<link href="../style.css" rel="stylesheet">
</head>
<body>
<div class="controls">
<button>furnish</button><br>
<input id="inpt-filter" placeholder="filter results" style="width: 200px;"/>
</div>
<a-scene vr-mode-ui="enabled: false">
<a-camera position="0 5 5" rotation="-20 0 0"></a-camera>
<a-entity id="cursor" cursor="rayOrigin: mouse"></a-entity>
<a-image id="floor-plan" width="15.00" height="15.00" src="https://storage.3d.io/132f8fd0-f7e0-432a-ad21-732f3307e77e/170912-1650-8w2re2/floorplan.jpg" rotation="-90 0 0"></a-image>
</a-scene>
<script>
io3d.config({
// floor plan recognition and home staging need api keys
// get yours from https://3d.io
publishableApiKey: null
})
const cursorEl = document.querySelector('#cursor')
const btnEl = document.querySelector('button')
const inputEl = document.querySelector('input')
var sceneEl = document.querySelector('a-scene')
// bind events
cursorEl.addEventListener('click', elementClick)
btnEl.addEventListener('click', furnish)
var addedItems = []
function furnish() {
let query = inputEl.value.trim()
// let's show some status messages
var msgRecogntionStart, msgStagingStart
msgRecogntionStart = io3d.utils.ui.message('start recognition')
// floor plan recognition call
io3d.floorPlan.recognize('#floor-plan')
.then(sceneStructure => {
// update ui messages
msgRecogntionStart.close()
msgStagingStart = io3d.utils.ui.message('start home staging')
// get home staging furnishings
return io3d.staging.getFurnishings(sceneStructure)
})
// replace generic furniture with real products
.then(result => {
return io3d.staging.replaceFurniture(result, {query})
})
.then(results => {
msgStagingStart.close()
io3d.utils.ui.message('home staging finished')
// convert sceneStructure to aframe Html so we can place it in the scene
var elements = io3d.scene.getAframeElementsFromSceneStructure(results)
// check for previously added elements
addedItems.forEach(el => {
el.parentNode.removeChild(el)
})
// add elements to the scene
elements.forEach(el => {
sceneEl.appendChild(el)
})
addedItems = elements
})
.catch(function(error) {
console.error('something went wrong', error)
})
}
function elementClick() {
let el = cursor.components.raycaster.intersectedEls[0]
let furniture = el.getAttribute('io3d-furniture')
let query = inputEl.value.trim()
console.log(furniture)
if (furniture) {
io3d.staging.replaceFurniture(el, {query})
.then(result => {
if (!result) return
el.setAttribute('position', result.components.position.attrValue)
el.setAttribute('io3d-furniture', result.components['io3d-furniture'].attrValue)
})
.catch(error => {
console.error(error)
})
}
}
</script>
</body>
</html>