const INTERACTION_GROUP_ELEMENTS = 'elements';
const INTERACTION_GROUP_ELEMENTS_NEW = 'elements_new';
const INTERACTION_GROUP_PROXIES = 'proxies';
const PROXY_ASSET_ID_POSTFIX = '_proxy';
class ProductLogic {
constructor(api) {
// keep a reference to the viewer API
this.api = api;
// defines the assets of the default scene
this.ASSET_DEFINITIONS = {
cabinet: {
content: [
{
href:
"https://shapediverexternalgeometry.s3.amazonaws.com/wardrobe/220_8150_cabinet_987mm_484mm.glb",
format: "glb"
},
//{
// format: "material",
// data: {
// version: '2.0',
// color: 'red'
// }
//}
],
defaultPosition: new THREE.Matrix4()
},
drawer: {
content: [
{
href:
"https://shapediverexternalgeometry.s3.amazonaws.com/wardrobe/220_287_Drawer_987mm.glb",
format: "glb"
}
],
defaultPosition: [
(new THREE.Matrix4()).makeTranslation(16, 20, 100),
(new THREE.Matrix4()).makeTranslation(16, 20, 270)
],
interactionGroup: INTERACTION_GROUP_ELEMENTS
},
clothes_rail: {
content: [
{
href:
"https://shapediverexternalgeometry.s3.amazonaws.com/wardrobe/231_231_clothes_rail_987mm.glb",
format: "glb"
}
],
defaultPosition: (new THREE.Matrix4()).makeTranslation(16, 285, 1900),
interactionGroup: INTERACTION_GROUP_ELEMENTS
},
shelf: {
content: [
{
href:
"https://shapediverexternalgeometry.s3.amazonaws.com/wardrobe/231_261_shelf_987mm.glb",
format: "glb"
}
],
defaultPosition: [
(new THREE.Matrix4()).makeTranslation(16, 20, 800),
(new THREE.Matrix4()).makeTranslation(16, 20, 460)
],
interactionGroup: INTERACTION_GROUP_ELEMENTS
}
};
// defines which proxies to show depending on type of asset being dragged
this.PROXY_SLOTS = {
drawer: {
basePosition: (new THREE.Matrix4()).makeTranslation(16, 20, 100),
height: 170,
count: 12
},
clothes_rail: {
basePosition: (new THREE.Matrix4()).makeTranslation(16, 285, 100),
height: 50,
count: 41
},
shelf: {
basePosition: (new THREE.Matrix4()).makeTranslation(16, 20, 100),
height: 40,
count: 51
}
};
// material to use for proxies
this.PROXY_MATERIAL_CONTENT_ITEM = {
format: 'material',
data: {
version: '2.0',
color: 'rgb(180,180,180)',
transparency: 0.5
}
};
// last saved state of assets
this.wardrobeAssets = null;
// proxy assets currently part of the scene
this.proxyAssets = null;
// item data for the currently hovered item (if any)
this.hoveredItemData = null;
// #SS-2092
this.wasUp = false;
this.resetUp = () => { this.wasUp = false; };
document.addEventListener('mouseup', () => { this.wasUp = true; });
}
/**
* Get default asset by name from internal database
*/
getDefaultAssetByName(name) {
let asset = { id: name, version: "default", content: [] };
let namedAsset = this.ASSET_DEFINITIONS[name];
if (namedAsset) {
asset.content = JSON.parse(JSON.stringify(namedAsset.content));
if (namedAsset.defaultPosition) {
asset.content.forEach(
item => (item.transformations = Array.isArray(namedAsset.defaultPosition) ? namedAsset.defaultPosition : [namedAsset.defaultPosition])
);
}
if (namedAsset.interactionGroup) {
asset.interactionGroup = namedAsset.interactionGroup;
asset.dragPlaneNormal = [0,1,0];
asset.interactionMode = 2; // we want interaction tp happen at the level of transformations
}
}
return asset;
}
/**
* Default assets to initialize the wardrobe with
*/
getDefaultAssets() {
let assets = [];
for (let name in this.ASSET_DEFINITIONS) {
let asset = this.ASSET_DEFINITIONS[name];
if (asset.defaultPosition) {
assets.push(this.getDefaultAssetByName(name));
}
}
return assets;
}
/**
* Get new asset for dragging from "outside" the viewer
*/
getNewAssetForDraggingByName(name) {
let asset = { id: name + '_new', version: 'default', content: [] };
let namedAsset = this.ASSET_DEFINITIONS[name];
if (namedAsset) {
asset.content = JSON.parse(JSON.stringify(namedAsset.content));
if (namedAsset.defaultPosition) {
asset.content.forEach(
item => {delete item.transformations;}
);
}
asset.interactionGroup = INTERACTION_GROUP_ELEMENTS_NEW;
asset.dragPlaneNormal = [0,1,0];
asset.interactionMode = 2; // we want interaction to happen at the level of transformations
}
return asset;
}
/**
* Default light scene
*/
getDefaultLightScene() {
return {
"id": "scene_1",
"lights": {
"ambient0": {
"id": "ambient0",
"type": "ambient",
"properties": {
"color": "white",
"intensity": 0.5
}
},
"directional0": {
"id": "directional0",
"type": "directional",
"properties": {
"color": "rgb(255, 252, 249)",
"intensity": 0.5,
"castShadow": true,
"direction": {
"x": 0.5774,
"y": -0.5774,
"z": 0.5774
}
}
},
"directional1": {
"id": "directional1",
"type": "directional",
"properties": {
"color": "rgb(255, 251, 231)",
"intensity": 0.5,
"castShadow": true,
"direction": {
"x": -0.25,
"y": -1,
"z": 0.6
}
}
},
"SPOT": {
"id": "SPOT",
"type": "spot",
"properties": {
"color": "rgb(255, 242, 184)",
"intensity": 0.4,
"distance": 0,
"angle": 0.34,
"penumbra": 0.49,
"decay": 0.19,
"position": {
"x": 855.1426952119964,
"y": -1688.8295554696597,
"z": -148.4294032070402
},
"target": {
"x": 741.3149983403828,
"y": 737.2080705888891,
"z": 2389.0669602811713
}
}
}
}
};
}
/**
* Default viewer settings
*/
getDefaultSettings() {
return {
scene: {
render: {
//clearColor: '#FF0000'
},
camera: {
defaults: {
perspective: {
position: {x: -1e4, y: -3e4, z: 7e3},
target: {x: 0, y: 0, z: 0}
}
},
zoomExtentsFactor: 1.25
}
}
};
}
/**
* Default interaction groups for wardrobe elements and proxies
*/
getDefaultInteractionGroups() {
return [
{
id: INTERACTION_GROUP_ELEMENTS,
hoverable: true,
hoverEffect: {
active: {
name: 'colorHighlight',
options: {
color: 'rgb(255, 179, 31)'
}
}
},
draggable: true
},
{
id: INTERACTION_GROUP_ELEMENTS_NEW,
draggable: true
},
{
id: INTERACTION_GROUP_PROXIES,
hoverable: true,
hoverEffect: {
active: {
name: 'colorHighlight',
options: {
color: 'rgb(0, 165, 255)'
}
}
},
}
];
}
/**
* Get proxy geometry for the given dragged item
*
* This contains some dumb placeholder logic, not taking care of
* the current configuration.
*/
getProxyGeometryAssetsForItem(itemData) {
let itemId = itemData.id;
if (itemId.endsWith('_new')) {
itemId = itemId.substring(0, itemId.length - 4);
}
// compose an array of transformations to place proxy geometry
let proxyData = this.PROXY_SLOTS[itemId];
let position = proxyData.basePosition.clone();
let translation = (new THREE.Matrix4()).makeTranslation(0, 0, proxyData.height);
let transformations = [];
for ( let i=0; i<proxyData.count; i++) {
transformations.push( position );
position = position.clone().multiply(translation);
}
// use the original geometry of the dragged item for proxy geometry
let asset = this.getDefaultAssetByName(itemId);
asset.id = asset.id + PROXY_ASSET_ID_POSTFIX;
asset.content.forEach(
item => (item.transformations = transformations)
);
return [asset];
}
/**
* Add proxy geometry for the given dragged item to the scene
*/
async addProxyGeometryForItem(itemData) {
if (!this.proxyAssets) {
this.proxyAssets = this.getProxyGeometryAssetsForItem(itemData);
this.proxyAssets.forEach(
item => {
item.interactionGroup = INTERACTION_GROUP_PROXIES;
item.content.push( this.PROXY_MATERIAL_CONTENT_ITEM );
}
);
console.time('api.scene.updateAsync');
const result = await this.api.scene.updateAsync(this.proxyAssets);
console.timeEnd('api.scene.updateAsync');
return result;
}
}
/**
* Remove all proxy geometry from the scene
*/
removeProxyGeometry() {
this.proxyAssets = null;
return this.api.scene.removeAsync({interactionGroup: INTERACTION_GROUP_PROXIES});
}
/**
* Remove external drag geometry
*/
removeExternalDragGeometry(itemData) {
if (itemData.id.endsWith('_new')) {
return this.api.scene.removeAsync({id: itemData.id});
}
}
/**
* Get transformation of a proxy asset content item
*/
getProxyTransformation(itemData) {
if (!this.proxyAssets) return;
let asset = this.proxyAssets.find((asset) => asset.id === itemData.id);
if (!asset) return;
return asset.content[itemData.content].transformations[itemData.transformation];
}
/**
* Parse a scene path, return an object containing the:
* - id: asset item id
* - content: index into the content array of the asset
* - transformation: index into the transformation array of the content item
*/
getItemDataFromScenePath(scenePath) {
let parts = scenePath.split('.');
return {
id: parts[1],
content: parts.length > 2 ? parseInt(parts[2].split('_')[1]) : null,
transformation: parts.length > 3 ? parseInt(parts[3].split('_')[1]) : null
}
}
/**
* Compute the squared euclidean length of a vector
*/
vectorLengthSquared(v) {
return v.x*v.x + v.y*v.y + v.z*v.z;
}
handleDragStart(event) {
let itemData = this.getItemDataFromScenePath(event.scenePath);
console.log(event.type, itemData, event);
}
handleDragMove(event) {
let itemData = this.getItemDataFromScenePath(event.scenePath);
//console.log(event.type, itemData, event);
// add hoverable proxy geometry (if none)
this.addProxyGeometryForItem(itemData);
}
handleDragEnd(event) {
let itemData = this.getItemDataFromScenePath(event.scenePath);
console.log(event.type, itemData, event);
// if dragging was just a click, zoom to the scenePath
if ( this.vectorLengthSquared(event.dragPosRel) < 1e-6 ) {
this.api.scene.camera.zoomAsync([event.scenePath]);
return;
}
// check if a proxy geometry was hovered, update or reset position of dragged object accordingly
if (this.hoveredItemData && this.hoveredItemData.id.endsWith(PROXY_ASSET_ID_POSTFIX)) {
let transformation = this.getProxyTransformation(this.hoveredItemData);
this.setWardrobeItemTransformation(itemData, transformation);
}
// remove hoverable proxy geometry (if any)
this.removeProxyGeometry();
// remove external drag geometry (if any)
this.removeExternalDragGeometry(itemData);
// update assets
this.resetWardrobeAssets(itemData);
}
handleHoverOn(event) {
let itemData = this.getItemDataFromScenePath(event.scenePath);
//console.log(event.type, itemData, event);
// remember currently hovered asset
this.hoveredItemData = itemData;
}
handleHoverOff(event) {
//let itemData = this.getItemDataFromScenePath(event.scenePath);
//console.log(event.type, itemData, event);
// reset currently hovered asset
this.hoveredItemData = null;
}
/**
* Set transformations for the given item
*/
setWardrobeItemTransformation(itemData, transformation) {
let itemId = itemData.id;
let newItem = false;
if (itemId.endsWith('_new')) {
itemId = itemId.substring(0, itemId.length - 4);
newItem = true;
}
let asset = this.wardrobeAssets.find((asset) => asset.id === itemId);
console.log(itemId, asset);
if (!asset) return;
if (newItem) {
asset.content[itemData.content].transformations.push(transformation);
}
else {
asset.content[itemData.content].transformations[itemData.transformation] = transformation;
}
}
/**
* Replace the current state of the wardrobe assets,
* and update the scene.
*/
setWardrobeAssets(assets) {
this.wardrobeAssets = assets;
//console.log('wardrobe assets', assets);
return this.api.scene.updateAsync(assets);
}
/**
* Reset the wardrobe assets to their last known state,
* typically the state before a dragging operation.
* Optionally reset a selected asset only.
*/
resetWardrobeAssets(itemData) {
this.wardrobeAssets.forEach((asset) => {
if ( !itemData || itemData.id.startsWith(asset.id) ) {
asset.version = this.api.utils.createRandomId();
}
});
return this.api.scene.updateAsync(this.wardrobeAssets);
}
/**
* Update interaction group for wardrobe assets which already have an interaction group
*/
setWardrobeInteractionGroup(group) {
this.wardrobeAssets.forEach((asset) => {
if (asset.interactionGroup) {
asset.interactionGroup = group;
}
});
return this.resetWardrobeAssets();
}
/**
* Handler for starting external drag event
* - adds asset for dragging to scene, hides it immediately
* - tells the viewer that external dragging started
*/
async handleExternalDragStart(eventType, name) {
// #SS-2092
this.resetUp();
console.log('external drag start', name);
let asset = this.getNewAssetForDraggingByName(name);
let res = await api.scene.updateAsync(asset);
this.api.scene.toggleGeometry([], res.data[0].scenePath);
// #SS-2092
if(this.wasUp === false) {
this.api.scene.startExternalDragEvent(res.data[0].scenePath, eventType);
} else {
await api.scene.removeAsync({id: asset.id});
}
};
};
/**
* ShapeDiver viewer initialisation
*/
async function initSdvApp () {
// Constructor settings can be defined here, or as attributes of the viewport container.
// Settings defined here take precedence.
let settings = {
showControlsButton: false,
showControlsInitial: false,
showSettingsInitial: false,
showBusySpinner: false,
loggingLevel: -1,
messageLoggingLevel: 3
};
// See https://viewer.shapediver.com/v2/2.14.0/doc/SDVApp.ParametricViewer.html
// for all settings available via the constructor.
let api = new SDVApp.ParametricViewer(settings);
window.api = api;
// create product logic
let logic = new ProductLogic(api);
window.logic = logic;
window.api.scene.addEventListener(window.api.scene.EVENTTYPE.VISIBILITY_ON, () => {
setTimeout(() => {api.scene.camera.zoomAsync();})
});
// default settings
await api.updateSettingsAsync(logic.getDefaultSettings());
await api.updateSettingAsync('scene.camera.defaults.perspective', logic.getDefaultSettings().scene.camera.defaults.perspective);
// restore light scene
await api.scene.lights.setLightSceneFromDefinition(logic.getDefaultLightScene());
// create interaction groups
await api.scene.updateInteractionGroups(logic.getDefaultInteractionGroups());
// set up event handlers
api.scene.addEventListener(api.scene.EVENTTYPE.HOVER_ON, (e) => logic.handleHoverOn(e));
api.scene.addEventListener(api.scene.EVENTTYPE.HOVER_OFF, (e) => logic.handleHoverOff(e));
api.scene.addEventListener(api.scene.EVENTTYPE.DRAG_START, (e) => logic.handleDragStart(e));
api.scene.addEventListener(api.scene.EVENTTYPE.DRAG_MOVE, (e) => logic.handleDragMove(e));
api.scene.addEventListener(api.scene.EVENTTYPE.DRAG_END, (e) => logic.handleDragEnd(e));
// event handlers for externally triggered dragging (adding of new elements)
['drawer','shelf','clothes_rail'].forEach(name => {
let elem = document.getElementById(name + '_new');
elem.addEventListener('mousedown', () => logic.handleExternalDragStart('mouse', name));
elem.addEventListener('touchstart', () => logic.handleExternalDragStart('touch', name));
});
// setup default scene
await logic.setWardrobeAssets(logic.getDefaultAssets());
};
// there is a slight chance that loading has been completed already
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initSdvApp, false);
} else {
initSdvApp();
}
!
