39 lines
1.5 KiB
HTML
39 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title><model-viewer></title>
|
|
<meta charset="utf-8">
|
|
<meta name="description" content="<model-viewer>">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link type="text/css" href="../styles/ux-test.css" rel="stylesheet" />
|
|
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"/>
|
|
|
|
|
|
|
|
<script type='module' src='https://modelviewer.dev/node_modules/@google/model-viewer/dist/model-viewer.min.js'></script>
|
|
</head>
|
|
<body>
|
|
<h1>Background scene</h1>
|
|
<model-viewer
|
|
src='../assets/ShopifyModels/Chair.glb'
|
|
poster='../assets/ShopifyModels/Chair.png'
|
|
camera-controls
|
|
shadow-intensity='1'
|
|
touch-action='none'>
|
|
</model-viewer>
|
|
<label for="background">Use background: </label>
|
|
<input id="background" type="checkbox">
|
|
<p>Try the "Use background" checkbox - which version do you prefer? Are they useful for different things?</p>
|
|
|
|
<script type='module'>
|
|
const modelViewer = document.querySelector('model-viewer');
|
|
const checkbox = document.querySelector('#background');
|
|
|
|
checkbox.addEventListener('change',() => {
|
|
modelViewer.skyboxImage = checkbox.checked ? '../shared-assets/environments/lebombo_1k.hdr' : '';
|
|
modelViewer.maxCameraOrbit = checkbox.checked ? 'auto 100deg auto' : 'auto auto auto';
|
|
modelViewer.shadowIntensity = checkbox.checked ? 0 : 1;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |