293 lines
7.7 KiB
HTML
293 lines
7.7 KiB
HTML
<!--
|
|
@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.
|
|
|
|
-->
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="description" content="<model-viewer> editor">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
|
<meta property="og:title" content='﹤model-viewer﹥ Editor - Edit your asset files for 3D & AR' />
|
|
<meta property="og:description"
|
|
content="A tool to edit glTF and glb files ✏️, and configure them to use the ﹤model-viewer﹥ 3D & AR web component 🌐" />
|
|
<title>Model Editor</title>
|
|
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
|
|
<link rel="shortcut icon" type="image/png" href="../../shared-assets/icons/favicon.png" />
|
|
<script defer src="https://web3dsurvey.com/collector.js"></script>
|
|
<!-- Web animations for paper-dropdown -->
|
|
<script src="../../../node_modules/web-animations-js/web-animations-next-lite.min.js"></script>
|
|
<script src="../../../node_modules/js-beautify/js/lib/beautify-html.js"></script>
|
|
<script src="../../../node_modules/js-beautify/js/lib/beautify-css.js"></script>
|
|
<script>
|
|
// Necessary hack for Redux. See: https://github.com/reduxjs/redux/pull/2910
|
|
window.process = {
|
|
env: {
|
|
NODE_ENV: 'production'
|
|
}
|
|
};
|
|
</script>
|
|
<script type="module" src="../dist/space-opera.js">
|
|
|
|
</script>
|
|
<script>
|
|
window.ga = window.ga || function () { (ga.q = ga.q || []).push(arguments) }; ga.l = +new Date;
|
|
ga('create', 'UA-169901325-1', { 'storage': 'none' });
|
|
ga('set', 'referrer', document.referrer.split('?')[0]);
|
|
ga('set', 'anonymizeIp', true);
|
|
ga('send', 'pageview');
|
|
</script>
|
|
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
|
</head>
|
|
<style>
|
|
:root {
|
|
--expandable-section-background: #2b2d30;
|
|
--expandable-section-text: #EEEEEE;
|
|
--text-on-expandable-background: #F5F5F5;
|
|
--number-input-background: #212121;
|
|
}
|
|
|
|
html, body {
|
|
width: 100vw;
|
|
height: 100lvh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hamburger {
|
|
position: absolute;
|
|
z-index: 999;
|
|
top: 0.72rem;
|
|
left: 0.72rem;
|
|
border-radius: 4px;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
cursor: pointer;
|
|
box-shadow: 2.75px 2.75px 4px 0px #00000024;
|
|
background: #ffffffc4;
|
|
backdrop-filter: blur(4px) brightness(0.92);
|
|
display: none;
|
|
}
|
|
|
|
.hamburger input {
|
|
display: none;
|
|
}
|
|
|
|
.hamburger svg {
|
|
/* The size of the SVG defines the overall size */
|
|
height: 3em;
|
|
/* Define the transition for transforming the SVG */
|
|
transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.line {
|
|
fill: none;
|
|
stroke: #3c4043;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 3;
|
|
/* Define the transition for transforming the Stroke */
|
|
transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.line-top-bottom {
|
|
stroke-dasharray: 12 63;
|
|
}
|
|
|
|
.hamburger input:checked+svg {
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.hamburger input:checked+svg .line-top-bottom {
|
|
stroke-dasharray: 20 300;
|
|
stroke-dashoffset: -32.42;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
align-items: center;
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
height: 48px;
|
|
justify-content: space-between;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
/* Container for renderer (left) and tabs (right). */
|
|
.editor-body-root {
|
|
display: flex;
|
|
flex: auto;
|
|
/* Grows to fill space under header */
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mvContainer {
|
|
align-items: stretch;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
model-viewer-preview {
|
|
height: 100%;
|
|
}
|
|
|
|
me-tabs {
|
|
background-color: #202124;
|
|
/* GOOGLE_GREY_900 */
|
|
padding: 0;
|
|
width: 360px;
|
|
min-width: 360px;
|
|
max-width: 360px;
|
|
}
|
|
|
|
me-tabs a {
|
|
color: #dadcff;
|
|
/* GOOGLE_GREY_300, but.. bluer */
|
|
}
|
|
|
|
me-tabbed-panel {
|
|
max-height: calc(100vh - 105px);
|
|
overflow-y: auto;
|
|
display: block;
|
|
}
|
|
|
|
me-tabbed-panel::-webkit-scrollbar {
|
|
width: 8px;
|
|
background-color: #c1c1c1;
|
|
border-radius: 0.2rem;
|
|
}
|
|
|
|
me-tabbed-panel::-webkit-scrollbar-thumb {
|
|
background-color: #202124b0;
|
|
border-radius: 0.2rem;
|
|
}
|
|
|
|
me-tabbed-panel::-webkit-scrollbar-thumb:hover {
|
|
background-color: #202124b8;
|
|
}
|
|
|
|
.privacy {
|
|
color: #BDBDBD;
|
|
padding: 5px 16px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
font-size: small;
|
|
z-index: 0;
|
|
background-color: rgba(32, 33, 36, .75);
|
|
backdrop-filter: blur(5px) brightness(0.92) saturate(1.27) contrast(1.2);
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
me-tabs {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
transform: translateX(100%);
|
|
transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
min-height: 100%;
|
|
}
|
|
|
|
.hamburger {
|
|
display: block;
|
|
}
|
|
|
|
.hamburger:has(>input:checked)+model-editor me-tabs {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (max-width: 450px) {
|
|
me-tabs {
|
|
min-width: 100%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-height: 600px) {
|
|
.privacy {
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
.privacy-link {
|
|
color: #BDBDBD;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<label class="hamburger">
|
|
<input type="checkbox">
|
|
<svg viewBox="0 0 32 32">
|
|
<path class="line line-top-bottom"
|
|
d="M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22">
|
|
</path>
|
|
<path class="line" d="M7 16 27 16"></path>
|
|
</svg>
|
|
</label>
|
|
<model-editor>
|
|
<div class="app">
|
|
<div class="editor-body-root">
|
|
<div class="mvContainer">
|
|
<model-viewer-preview id="editing_adapter">
|
|
</model-viewer-preview>
|
|
</div>
|
|
<me-tabs>
|
|
<me-tabbed-panel icon="import_export">
|
|
<me-export-panel></me-export-panel>
|
|
<div style="margin-bottom: 70px;"></div>
|
|
<div class="privacy">
|
|
This <model-viewer> editor does not send any imported content to servers except to deploy to your
|
|
mobile device:
|
|
<a href="https://policies.google.com/privacy" class="privacy-link" target="_blank">
|
|
Privacy
|
|
</a>
|
|
</div>
|
|
</me-tabbed-panel>
|
|
<me-tabbed-panel icon="create">
|
|
<me-export-panel header></me-export-panel>
|
|
<me-ibl-selector></me-ibl-selector>
|
|
<me-animation-controls></me-animation-controls>
|
|
<me-hotspot-panel></me-hotspot-panel>
|
|
</me-tabbed-panel>
|
|
<me-tabbed-panel icon="photo_camera">
|
|
<me-export-panel header></me-export-panel>
|
|
<me-camera-settings></me-camera-settings>
|
|
</me-tabbed-panel>
|
|
<me-tabbed-panel icon="color_lens">
|
|
<me-materials-panel></me-materials-panel>
|
|
</me-tabbed-panel>
|
|
<me-tabbed-panel icon="search">
|
|
<me-inspector-panel></me-inspector-panel>
|
|
</me-tabbed-panel>
|
|
</me-tabs>
|
|
</div>
|
|
</div>
|
|
</model-editor>
|
|
</body> |