86 lines
3.2 KiB
HTML
86 lines
3.2 KiB
HTML
<!--
|
|
/* @license
|
|
* Copyright 2019 Google Inc. 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>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
<title><model-viewer> Fidelity Tests</title>
|
|
|
|
<style>
|
|
body { margin: 0; }
|
|
model-viewer {
|
|
--progress-bar-color: transparent;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<renderer-harness id="harness">
|
|
<span slot="title"><model-viewer></span>
|
|
<model-viewer id="modelViewer"
|
|
slot="renderer"
|
|
camera-controls
|
|
interaction-prompt="none">
|
|
</model-viewer>
|
|
</renderer-harness>
|
|
<script type="module" src="../../../dist/renderer-harness.js"></script>
|
|
<script type="module" src="../../../../../node_modules/@google/model-viewer/dist/model-viewer.min.js"></script>
|
|
<script type="module">
|
|
customElements.get("model-viewer").minimumRenderScale = 1;
|
|
</script>
|
|
<script>
|
|
const harness = document.getElementById('harness');
|
|
const modelViewer = document.getElementById('modelViewer');
|
|
harness.addEventListener('scenario-change', () => {
|
|
const {scenario} = harness;
|
|
modelViewer.addEventListener('poster-dismissed', () => {
|
|
// Sometimes the screenshot is taken when the poster hasn't faded away.
|
|
// This is a temporary workaround so that the screenshot is taken two frames after the poster-dismissed event fires.
|
|
// TODO(sun765): Remove this when the bug is fixed.
|
|
requestAnimationFrame(()=>{
|
|
requestAnimationFrame(()=>{
|
|
requestAnimationFrame(()=>{
|
|
this.dispatchEvent(new CustomEvent('model-ready'));
|
|
})
|
|
})
|
|
});
|
|
}, {once: true});
|
|
|
|
modelViewer.style.width = `${scenario.dimensions.width}px`;
|
|
modelViewer.style.height = `${scenario.dimensions.height}px`;
|
|
|
|
modelViewer.style.backgroundColor = "rgba(255,255,255,0)";
|
|
|
|
modelViewer.src = scenario.model;
|
|
|
|
modelViewer.environmentImage = scenario.lighting;
|
|
modelViewer.skyboxImage = scenario.renderSkybox? scenario.lighting: null;
|
|
|
|
const {theta, phi, radius} = scenario.orbit;
|
|
modelViewer.minCameraOrbit = `auto auto ${radius}m`;
|
|
modelViewer.maxCameraOrbit = `auto auto ${radius}m`;
|
|
modelViewer.cameraOrbit = `${theta}deg ${phi}deg ${radius}m`;
|
|
const {x, y, z} = scenario.target;
|
|
modelViewer.cameraTarget = `${x}m ${y}m ${z}m`;
|
|
modelViewer.maxFieldOfView = `${scenario.verticalFoV}deg`;
|
|
modelViewer.minFieldOfView = `${scenario.verticalFoV}deg`;
|
|
modelViewer.fieldOfView = `${scenario.verticalFoV}deg`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|