io3fix
Version:
toolkit for interior apps
133 lines (122 loc) • 5.86 kB
HTML
<html>
<head>
<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 id="rnd-btn">pick random</button>
<button id="change-btn">replace with similar furniture</button><br>
<input id="inpt-id" placeholder="enter id" style="width: 250px;"/>
<input id="inpt-filter" placeholder="filter results" style="width: 150px;"/>
</div>
<div id="panel" style="position:absolute; overflow: auto; white-space: nowrap; padding:15px; vertical-align:top; bottom: 0; width: 100%; height: 150px; z-index: 1000; background: white"></div>
<a-scene antialias="true" shadow="type: pcfsoft" vr-mode-ui="enabled: false" embedded style="height: calc(100vh - 150px)">
<a-entity light="type:directional; castShadow: true; intensity:0.3; shadowMapHeight:1024; shadowMapWidth:1024;" position="4 3 3"></a-entity>
<a-entity light="type:ambient; color:#bbb" position="0 5 3"></a-entity>
<a-entity id="furniture" io3d-furniture position="0 0 -3" rotation="0 0 0" shadow="cast:true; receive:false;">
<a-animation
attribute="rotation"
easing="linear"
dur="40000"
to="0 360 0"
repeat="indefinite">
</a-animation>
</a-entity>
<a-sky color="#eee"></a-sky>
<a-entity camera position="0 1.6 0"></a-entity>
<a-cylinder shadow="receive:true" color="#eee" position="0 -0.02 -3" rotation="0 0 0" scale="5 0.04 5"></a-cylinder>
<a-camera></a-camera>
</a-scene>
<script>
// 38e0fe6d-2a95-49f9-94fd-7fddc7db1b5d
// bf209a61-c34a-4f72-9bf5-2610a99e6572
const furnitureEl = document.querySelector('a-entity#furniture')
const rndBtn = document.querySelector('#rnd-btn')
const idInput = document.querySelector('input#inpt-id')
const queryInput = document.querySelector('input#inpt-filter')
const changeBtn = document.querySelector('#change-btn')
const panelEl = document.querySelector('#panel')
let alternatives = []
// preset id input
idInput.value = furniture.getAttribute('io3d-furniture').id
getAlternatives(idInput.value, {query: queryInput.value})
idInput.addEventListener('input', function() {
var furnitureId = idInput.value
if (validateUuid(furnitureId)) {
furniture.setAttribute('io3d-furniture', {'id': furnitureId})
// find alternative items
getAlternatives(furnitureId, {query: queryInput.value})
}
else io3d.ui.message('no valid id', 4000, 'warning')
})
rndBtn.addEventListener('click', function() {
let userQuery = queryInput.value
let query = '-accessories -decoration ' + userQuery
io3d.furniture.search(query.trim() , {limit: 200}).then(result => {
let furnitureInfo = result[Math.floor(Math.random() * result.length)]
furniture.setAttribute('io3d-furniture', {'id': furnitureInfo.id})
furniture.setAttribute('position', '0 0 -3')
idInput.value = furnitureInfo.id
// find alternative items
getAlternatives(furnitureInfo.id, {query: queryInput.value})
})
})
changeBtn.addEventListener('click', function() {
let query = queryInput.value.trim()
// call replace furniture method by providing the furniture DOM element
io3d.staging.replaceFurniture(furnitureEl, {query})
.then(result => {
if (!result) return
console.log(result)
// apply values from result
furnitureEl.setAttribute('position', result.components.position.attrValue)
furnitureEl.setAttribute('io3d-furniture', result.components['io3d-furniture'].attrValue)
// find alternative items
getAlternatives(result.components['io3d-furniture'].attrValue.id, {query: queryInput.value})
})
})
function replaceFurniture(el) {
let newPos = getNewPosition(furnitureEl, el.offset)
furnitureEl.setAttribute('position', newPos)
furnitureEl.setAttribute('io3d-furniture', {id: el.furniture.id})
getAlternatives(el.furniture.id, {query: queryInput.value})
}
function getAlternatives(id) {
io3d.staging.getFurnitureAlternatives(id)
.then(result => {
if (result) {
console.log(result.length, 'elements found')
alternatives = result
let images = result.map(item => item.furniture.thumb)
let imgStr = ''
images.forEach((img, i) => {
imgStr += `<img height="100" onclick="replaceFurniture(alternatives[${i}])" style="display:inline-block; max-width: 180px;; margin-right: 10px;" src="${img}"></img>`
})
panelEl.innerHTML = imgStr
} else panelEl.innerHTML = 'nothing found =('
})
.catch(console.error)
}
function validateUuid (str) {
if (!str || typeof str !== "string") return false
return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(str)
}
// compute new position based on bounding boxes
function getNewPosition(el, offset) {
let element3d = el.getAttribute('position')
element3d.ry = el.getAttribute('rotation').y
var s = Math.sin(element3d.ry / 180 * Math.PI)
var c = Math.cos(element3d.ry / 180 * Math.PI)
var newPosition = {
x: element3d.x + offset.x * c + offset.z * s,
y: element3d.y + offset.y,
z: element3d.z - offset.x * s + offset.z * c
}
return newPosition
}
</script>
</body>
</html>