@google/model-viewer
Version:
Easily display interactive 3D models on the web and in AR!
170 lines • 7.89 kB
JavaScript
/* @license
* Copyright 2020 Google LLC. All Rights Reserved.
* Licensed under the Apache License, Version 2.0 (the 'License');
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an 'AS IS' BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { property } from 'lit-element';
import { Euler } from 'three';
import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter';
import { $needsRender, $onModelLoad, $renderer, $scene } from '../model-viewer-base.js';
import { normalizeUnit } from '../styles/conversions.js';
import { parseExpressions } from '../styles/parsers.js';
import { Material } from './scene-graph/material.js';
import { Model } from './scene-graph/model.js';
const $currentGLTF = Symbol('currentGLTF');
const $model = Symbol('model');
const $variants = Symbol('variants');
/**
* SceneGraphMixin manages exposes a model API in order to support operations on
* the <model-viewer> scene graph.
*/
export const SceneGraphMixin = (ModelViewerElement) => {
var _a, _b, _c;
class SceneGraphModelViewerElement extends ModelViewerElement {
constructor() {
super(...arguments);
this[_a] = undefined;
this[_b] = null;
this[_c] = [];
this.variantName = undefined;
this.orientation = '0 0 0';
this.scale = '1 1 1';
}
// Scene-graph API:
/** @export */
get model() {
return this[$model];
}
get availableVariants() {
return this[$variants];
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('variantName')) {
const variants = this[$variants];
const threeGLTF = this[$currentGLTF];
const { variantName } = this;
const variantIndex = variants.findIndex((v) => v === variantName);
if (threeGLTF == null || variantIndex < 0) {
return;
}
const onUpdate = () => {
this[$needsRender]();
};
const updatedMaterials = threeGLTF.correlatedSceneGraph.loadVariant(variantIndex, onUpdate);
const { gltf, gltfElementMap } = threeGLTF.correlatedSceneGraph;
for (const index of updatedMaterials) {
const material = gltf.materials[index];
this[$model].materials[index] = new Material(onUpdate, gltf, material, gltfElementMap.get(material));
}
}
if (changedProperties.has('orientation') ||
changedProperties.has('scale')) {
const { modelContainer } = this[$scene];
const orientation = parseExpressions(this.orientation)[0]
.terms;
const roll = normalizeUnit(orientation[0]).number;
const pitch = normalizeUnit(orientation[1]).number;
const yaw = normalizeUnit(orientation[2]).number;
modelContainer.quaternion.setFromEuler(new Euler(pitch, yaw, roll, 'YXZ'));
const scale = parseExpressions(this.scale)[0]
.terms;
modelContainer.scale.set(scale[0].number, scale[1].number, scale[2].number);
this[$scene].updateBoundingBox();
this[$scene].updateShadow();
this[$renderer].arRenderer.onUpdateScene();
this[$needsRender]();
}
}
[(_a = $model, _b = $currentGLTF, _c = $variants, $onModelLoad)]() {
super[$onModelLoad]();
this[$variants] = [];
const { currentGLTF } = this[$scene];
if (currentGLTF != null) {
const { correlatedSceneGraph } = currentGLTF;
if (correlatedSceneGraph != null &&
currentGLTF !== this[$currentGLTF]) {
this[$model] = new Model(correlatedSceneGraph, () => {
this[$needsRender]();
});
}
// KHR_materials_variants extension spec:
// https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_variants
const { gltfExtensions } = currentGLTF.userData;
if (gltfExtensions != null) {
const extension = gltfExtensions['KHR_materials_variants'];
if (extension != null) {
this[$variants] =
extension.variants.map(variant => variant.name);
this.requestUpdate('variantName');
}
}
}
this[$currentGLTF] = currentGLTF;
// TODO: remove this event, as it is synonymous with the load event.
this.dispatchEvent(new CustomEvent('scene-graph-ready'));
}
/** @export */
async exportScene(options) {
const scene = this[$scene];
return new Promise(async (resolve) => {
// Defaults
const opts = {
binary: true,
onlyVisible: true,
maxTextureSize: Infinity,
forcePowerOfTwoTextures: false,
includeCustomExtensions: false,
embedImages: true
};
Object.assign(opts, options);
// Not configurable
opts.animations = scene.animations;
opts.truncateDrawRange = true;
const shadow = scene.shadow;
let visible = false;
// Remove shadow from export
if (shadow != null) {
visible = shadow.visible;
shadow.visible = false;
}
const exporter = new GLTFExporter();
exporter.parse(scene.modelContainer, (gltf) => {
return resolve(new Blob([opts.binary ? gltf : JSON.stringify(gltf)], {
type: opts.binary ? 'application/octet-stream' :
'application/json'
}));
}, opts);
if (shadow != null) {
shadow.visible = visible;
}
});
}
}
__decorate([
property({ type: String, attribute: 'variant-name' })
], SceneGraphModelViewerElement.prototype, "variantName", void 0);
__decorate([
property({ type: String, attribute: 'orientation' })
], SceneGraphModelViewerElement.prototype, "orientation", void 0);
__decorate([
property({ type: String, attribute: 'scale' })
], SceneGraphModelViewerElement.prototype, "scale", void 0);
return SceneGraphModelViewerElement;
};
//# sourceMappingURL=scene-graph.js.map