cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
195 lines (194 loc) • 7.8 kB
JavaScript
import { property as e } from "../../../../_@lit_reactive-element@1.6.1@@lit/reactive-element/decorators/property.mjs";
import "../../../../_@lit_reactive-element@1.6.1@@lit/reactive-element/decorators/query-assigned-elements.mjs";
import { sRGBEncoding, RepeatWrapping, VideoTexture, CanvasTexture } from "../../../../_three@0.150.1@three/build/three.module.mjs";
import { GLTFExporter } from "../../../../_three@0.150.1@three/examples/jsm/exporters/GLTFExporter.mjs";
import { $needsRender, $renderer, $progressTracker, $scene, $onModelLoad } from "../model-viewer-base.mjs";
import GLTFExporterMaterialsVariantsExtension from "../three-components/gltf-instance/VariantMaterialExporterPlugin.mjs";
import { $availableVariants, $switchVariant, Model, $prepareVariantsForExport, $materialFromPoint } from "./scene-graph/model.mjs";
import { Texture } from "./scene-graph/texture.mjs";
/* @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 = globalThis && globalThis.__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;
};
const $currentGLTF = Symbol("currentGLTF");
const $originalGltfJson = Symbol("originalGltfJson");
const $model = Symbol("model");
const $getOnUpdateMethod = Symbol("getOnUpdateMethod");
const $buildTexture = Symbol("buildTexture");
const SceneGraphMixin = (ModelViewerElement) => {
var _a, _b, _c;
class SceneGraphModelViewerElement extends ModelViewerElement {
constructor() {
super(...arguments);
this[_a] = void 0;
this[_b] = null;
this[_c] = null;
this.variantName = null;
this.orientation = "0 0 0";
this.scale = "1 1 1";
}
get model() {
return this[$model];
}
get availableVariants() {
return this.model ? this.model[$availableVariants]() : [];
}
get originalGltfJson() {
return this[$originalGltfJson];
}
[(_a = $model, _b = $currentGLTF, _c = $originalGltfJson, $getOnUpdateMethod)]() {
return () => {
this[$needsRender]();
};
}
[$buildTexture](texture) {
texture.encoding = sRGBEncoding;
texture.wrapS = RepeatWrapping;
texture.wrapT = RepeatWrapping;
return new Texture(this[$getOnUpdateMethod](), texture);
}
async createTexture(uri, type = "image/png") {
const { textureUtils } = this[$renderer];
const texture = await textureUtils.loadImage(uri);
texture.userData.mimeType = type;
return this[$buildTexture](texture);
}
async createLottieTexture(uri, quality = 1) {
const { textureUtils } = this[$renderer];
const texture = await textureUtils.loadLottie(uri, quality);
return this[$buildTexture](texture);
}
createVideoTexture(uri) {
const video = document.createElement("video");
video.src = uri;
video.muted = true;
video.play();
video.loop = true;
const texture = new VideoTexture(video);
return this[$buildTexture](texture);
}
createCanvasTexture() {
const canvas = document.createElement("canvas");
const texture = new CanvasTexture(canvas);
return this[$buildTexture](texture);
}
async updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has("variantName")) {
const updateVariantProgress = this[$progressTracker].beginActivity();
updateVariantProgress(0.1);
const model = this[$model];
const { variantName } = this;
if (model != null) {
await model[$switchVariant](variantName);
this[$needsRender]();
this.dispatchEvent(new CustomEvent("variant-applied"));
}
updateVariantProgress(1);
}
if (changedProperties.has("orientation") || changedProperties.has("scale")) {
if (!this.loaded) {
return;
}
const scene = this[$scene];
scene.applyTransform();
scene.updateBoundingBox();
scene.updateShadow();
this[$renderer].arRenderer.onUpdateScene();
this[$needsRender]();
}
}
[$onModelLoad]() {
super[$onModelLoad]();
const { currentGLTF } = this[$scene];
if (currentGLTF != null) {
const { correlatedSceneGraph } = currentGLTF;
if (correlatedSceneGraph != null && currentGLTF !== this[$currentGLTF]) {
this[$model] = new Model(correlatedSceneGraph, this[$getOnUpdateMethod]());
this[$originalGltfJson] = JSON.parse(JSON.stringify(correlatedSceneGraph.gltf));
}
if ("variants" in currentGLTF.userData) {
this.requestUpdate("variantName");
}
}
this[$currentGLTF] = currentGLTF;
}
async exportScene(options) {
const scene = this[$scene];
return new Promise(async (resolve, reject) => {
const opts = {
binary: true,
onlyVisible: true,
maxTextureSize: Infinity,
includeCustomExtensions: false,
forceIndices: false
};
Object.assign(opts, options);
opts.animations = scene.animations;
opts.truncateDrawRange = true;
const shadow = scene.shadow;
let visible = false;
if (shadow != null) {
visible = shadow.visible;
shadow.visible = false;
}
await this[$model][$prepareVariantsForExport]();
const exporter = new GLTFExporter().register((writer) => new GLTFExporterMaterialsVariantsExtension(writer));
exporter.parse(scene.model, (gltf) => {
return resolve(new Blob([opts.binary ? gltf : JSON.stringify(gltf)], {
type: opts.binary ? "application/octet-stream" : "application/json"
}));
}, () => {
return reject("glTF export failed");
}, opts);
if (shadow != null) {
shadow.visible = visible;
}
});
}
materialFromPoint(pixelX, pixelY) {
const model = this[$model];
if (model == null) {
return null;
}
const scene = this[$scene];
const ndcCoords = scene.getNDC(pixelX, pixelY);
const hit = scene.hitFromPoint(ndcCoords);
if (hit == null || hit.face == null) {
return null;
}
return model[$materialFromPoint](hit);
}
}
__decorate([
e({ type: String, attribute: "variant-name" })
], SceneGraphModelViewerElement.prototype, "variantName", void 0);
__decorate([
e({ type: String, attribute: "orientation" })
], SceneGraphModelViewerElement.prototype, "orientation", void 0);
__decorate([
e({ type: String, attribute: "scale" })
], SceneGraphModelViewerElement.prototype, "scale", void 0);
return SceneGraphModelViewerElement;
};
export { $currentGLTF, $model, $originalGltfJson, SceneGraphMixin };