further decompose device image loading

This commit is contained in:
Stewart Allen 2020-11-28 19:02:28 -05:00
commit a341def747

View file

@ -741,10 +741,8 @@
deviceURL = dev.imageURL; deviceURL = dev.imageURL;
loadDeviceImage(dev); loadDeviceImage(dev);
} }
} else if (deviceImage) { } else {
SPACE.world.remove(deviceImage); clearDeviceTexture();
deviceImage = null;
deviceURL = null;
} }
} catch (e) { } catch (e) {
console.log({error:e, device:code, devicename}); console.log({error:e, device:code, devicename});
@ -757,55 +755,67 @@
API.event.settings(); API.event.settings();
} }
function loadDeviceImage(dev) { function clearDeviceTexture() {
new THREE.TextureLoader().load(dev.imageURL, texture => { if (deviceImage) {
if (deviceImage) { SPACE.world.remove(deviceImage);
SPACE.world.remove(deviceImage); deviceImage = null;
deviceImage = null; }
} }
if (!texture) {
return; function loadDeviceImage(dev, url) {
} new THREE.TextureLoader().load(url || dev.imageURL, texture => {
let { width, height } = texture.image; loadDeviceTexture(dev, texture);
let { bedWidth, bedDepth, bedHeight } = dev; }, inc => {
let scale = dev.imageScale || 0.75; console.log({load_inc: inc});
let img_ratio = width / height; }, error => {
if (scale <= 1) { console.log({load_error: error});
let dev_ratio = bedWidth / bedDepth;
if (dev_ratio > img_ratio) {
scale *= bedDepth / height;
} else {
scale *= bedWidth / width;
}
} else if (scale > 1) {
scale = (scale / Math.max(width, height));
}
width *= scale;
height *= scale;
let pos = null;
if (true) switch (dev.imageAnchor) {
case 1: pos = { x: -(bedWidth - width)/2, y: (bedDepth - height)/2 }; break;
case 2: pos = { x: 0, y: (bedDepth - height)/2 }; break;
case 3: pos = { x: (bedWidth - width)/2, y: (bedDepth - height)/2 }; break;
case 4: pos = { x: -(bedWidth - width)/2, y: 0 }; break;
case 5: pos = { x: (bedWidth - width)/2, y: 0 }; break;
case 6: pos = { x: -(bedWidth - width)/2, y: -(bedDepth - height)/2 }; break;
case 7: pos = { x: 0, y: -(bedDepth - height)/2 }; break;
case 8: pos = { x: (bedWidth - width)/2, y: -(bedDepth - height)/2 }; break;
}
let geometry = new THREE.PlaneBufferGeometry(width, height, 1),
material = new THREE.MeshBasicMaterial({ map: texture, transparent: true }),
mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -bedHeight;
mesh.renderOrder = -1;
if (pos) {
mesh.position.x = pos.x;
mesh.position.y = pos.y;
}
SPACE.world.add(deviceImage = mesh);
}); });
} }
function loadDeviceTexture(dev, texture) {
clearDeviceTexture();
if (!texture) {
return;
}
let { width, height } = texture.image;
let { bedWidth, bedDepth, bedHeight } = dev;
let scale = dev.imageScale || 0.75;
let img_ratio = width / height;
if (scale <= 1) {
let dev_ratio = bedWidth / bedDepth;
if (dev_ratio > img_ratio) {
scale *= bedDepth / height;
} else {
scale *= bedWidth / width;
}
} else if (scale > 1) {
scale = (scale / Math.max(width, height));
}
width *= scale;
height *= scale;
let pos = null;
if (true) switch (dev.imageAnchor) {
case 1: pos = { x: -(bedWidth - width)/2, y: (bedDepth - height)/2 }; break;
case 2: pos = { x: 0, y: (bedDepth - height)/2 }; break;
case 3: pos = { x: (bedWidth - width)/2, y: (bedDepth - height)/2 }; break;
case 4: pos = { x: -(bedWidth - width)/2, y: 0 }; break;
case 5: pos = { x: (bedWidth - width)/2, y: 0 }; break;
case 6: pos = { x: -(bedWidth - width)/2, y: -(bedDepth - height)/2 }; break;
case 7: pos = { x: 0, y: -(bedDepth - height)/2 }; break;
case 8: pos = { x: (bedWidth - width)/2, y: -(bedDepth - height)/2 }; break;
}
let geometry = new THREE.PlaneBufferGeometry(width, height, 1),
material = new THREE.MeshBasicMaterial({ map: texture, transparent: true }),
mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -bedHeight;
mesh.renderOrder = -1;
if (pos) {
mesh.position.x = pos.x;
mesh.position.y = pos.y;
}
SPACE.world.add(deviceImage = mesh);
}
function updateDeviceName() { function updateDeviceName() {
let newname = UI.deviceName.value, let newname = UI.deviceName.value,
selected = API.device.get(), selected = API.device.get(),