<!--
The Metareal Corporation (c) 2015-2021 Metareal Inc. All right reserved
-->
<!DOCTYPE html>
<head>
</head>
<header>
<script src="https://stage.metareal.com/playersdk/playersdk.min.1.0.js"></script>
<style>
.title {
position: absolute;
width: calc(100vw - 128px);
height: calc(64px);
margin-left: calc(64px);
margin-top: calc(32px);
font-size: 24px;
font-weight: bold;
font-family: 'Lato',Helvetica,Arial,sans-serif;
}
.description {
position: absolute;
width: calc(100vw - 128px);
height: calc(64px);
margin-left: calc(64px);
margin-top: calc(64px);
font-family: 'Lato',Helvetica,Arial,sans-serif;
}
.webapp {
position: absolute;
width: calc(100vw - 128px);
height: calc(100vh - 192px);
margin-left: calc(64px);
margin-top: calc(128px);
background-color: black
}
</style>
</header>
<body>
<div class="title">Turn Table</div>
<div class="description">This sample shows how to change the view mode to the MODEL view and control the camera programmatically. This tour has been set to start in MODEL view in the tour editor.</div>
<div class="webapp" id="myWebApp"></div>
<script lang="javascript">
// Create the player that will be embedded inside myWebApp
let player = MetarealPlayerSDK.create( "myWebApp" );
let tourURL = "https://tour.metareal.com/apps/player?asset=d47dab18-926f-4b55-89d2-dc0b0ec11287";
// Load the tour
player.load( tourURL, () => {
console.log( "Tour is loaded" );
player.startShowcase( true );
} );
// When the player is ready, switch to the model view and set the camera
player.setEventListener( "ready", () => {
player.setViewMode( "MODEL" );
let camera = player.user.modelViewCamera;
let distanceWave = 0;
setInterval( () => {
// we animate the rotation around the Y axis to
// create the turn table effect
camera.orbitRotation.y += 0.5;
// we animated the distance between the camera
// and the point of interest so that we also have
// an animated dolly effect (getting close or far)
distanceWave += 0.01;
camera.distance = ( Math.sin( distanceWave ) * 2 ) + 5;
player.setModelViewCamera(
camera.orbitRotation, // orbit rotation
undefined, // look at position
undefined, // Field of view
camera.distance, // distance of the camera to the point of interest
);
}, 1000 / 60 /* 60 FPS */ );
} );
</script>
</body>
<footer>
</footer>
</html>
