further decompose device image loading
This commit is contained in:
parent
69e4db9ee6
commit
a341def747
1 changed files with 60 additions and 50 deletions
110
src/kiri/init.js
110
src/kiri/init.js
|
|
@ -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(),
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue