参考网页：https://www.x3dom.org/x3dom/example/x3dom_turntable.html
源码：
<!DOCTYPE html>
<html style='width:100%; height:100%; border:0; margin:0; padding:0;'>
<head>
<meta http-equiv='X-UA-Compatible' content='chrome=1'></meta>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'></meta>
<link rel='stylesheet' type='text/css' href='x3dom.css'></link>
<script type='text/javascript' src='x3dom.js'></script>
<style>
a:link, a:visited, a:active { color: #000; }
a:hover { color: #fff; }
input { width: 50px; height: 20px;}
.x3dom-logContainer { bottom: 0px; position: absolute; }
#input-container { text-align: center; width: 180px; margin-left:120px;}
#description-container {
position: absolute;
width: 440px;
left: 25px;
top: 25px;
padding: 10px;
background-color: rgba(255, 255, 255, 0.5);
z-index: 1000;
}
#theCanvas {
margin-left: 180px;
}
#showHide {
position: absolute;
top: 35px;
right: 10px;
display: block;
}
</style>
</head>
<body style='width:100%; height:100%; border:none; margin:0; padding:0; background: linear-gradient(Grey 0%, White 100%);'>
<div id='description-container'>
<h1>Turntable-Mode Example</h1>
<a href='javascript:showHide();' id='showHide'>Hide description</a>
<div id='description'>
<p>To use the new Turntable-Mode in X3DOM you have to set the <strong>type</strong>-Parameter of the <strong>NavigationInfo</strong>-Node to <strong>turntable</strong>.</p>
<p>
<span style='color:blue;'><NavigationInfo</span>
<span style='color:red;'>type</span>=
<span style='color:purple'>'turntable'</span>
<span style='color:blue;'>></NavigationInfo></span>
</p>
<p>With the <strong>third</strong> and <strong>fourth</strong> value of the <strong>typeParams</strong>-Parameter you can set the <strong>minimal</strong> and <strong>maximal</strong> vertical rotation angle.</p>
<p>Accepted values are between <strong>0</strong> and <strong>PI</strong>, starting from <strong>+Y (0)</strong> down to <strong>-Y (PI)</strong>.</p>
<p>
<span style='color:blue;'><NavigationInfo</span>
<span style='color:red;'>type</span>=
<span style='color:purple'>'turntable'</span>
<span style='color:red;'>typeParams</span>=
<span id='example' style='color:purple'>'0.0 0.0 0.2 1.4'</span>
<span style='color:blue;'>></NavigationInfo></span>
</p>
<p>
<canvas id='theCanvas' width='80px' height='80px'></canvas>
<br>
<div id='input-container'>
min: <input type='number' id='min' value='0.2' min='0' max='3.14' step='0.1'>
max: <input type='number' id='max' value='1.4' min='0' max='3.14' step='0.1'>
</div>
</p>
</div>
</div>
<x3d id='x3dElement' showStat='false' showLog='false' style='width:100%; height:100%; border:none'>
<scene DEF='scene'>
<viewpoint position="-24.77034 15.54358 24.85343" orientation="-0.44786 -0.87474 -0.18507 0.88266"></viewpoint>
<navigationInfo id='nav' headlight='false' type='turntable' typeParams="0 0 0.2 1.4"></navigationInfo>
<transform DEF='Ground'>
<shape DEF='SP_3'>
<appearance DEF='_03_-_Default'>
<imageTexture url='"texture/building/ground.jpg"'></imageTexture>
</appearance>
<binaryGeometry DEF='Ground_0-GEOMETRY' solid='true' vertexCount='4' primType='"TRIANGLESTRIP"' size='50 0 50' index='binGeo/Ground_0-GEOMETRY_indexBinary.bin' coord='binGeo/Ground_0-GEOMETRY_coordNormalBinary.bin+8' texCoord='binGeo/Ground_0-GEOMETRY_texCoordBinary.bin+4' coordType='Uint16' texCoordType='Uint16' normalAsSphericalCoordinates='true'></binaryGeometry>
</shape>
</transform>
<transform DEF='Building' translation='1.7027 0.905127 -0.364374'>
<shape DEF='SP_4'>
<appearance DEF='_02_-_Default'>
<imageTexture url='"texture/building/building.png"'></imageTexture>
</appearance>
<binaryGeometry DEF='Building_0-GEOMETRY' solid='false' vertexCount='15062 87477' primType='"TRIANGLESTRIP" "TRIANGLES"' position='-1.70269489288 2.45732712746 0.364373683929' size='24.8268699646 6.68882608414 14.8100013733' coord='binGeo/Building_0-GEOMETRY_coordNormalBinary.bin+8' texCoord='binGeo/Building_0-GEOMETRY_texCoordBinary.bin+4' coordType='Uint16' texCoordType='Uint16' normalAsSphericalCoordinates='true'></binaryGeometry>
</shape>
<shape DEF='SP_7'>
<appearance USE='_02_-_Default'></appearance>
<binaryGeometry DEF='Building_1-GEOMETRY' solid='false' vertexCount='1322 11937' primType='"TRIANGLESTRIP" "TRIANGLES"' position='-1.70269489288 2.44684505463 0.362128734589' size='24.8268699646 6.7097902298 14.6059093475' index='binGeo/Building_1-GEOMETRY_indexBinary.bin' coord='binGeo/Building_1-GEOMETRY_coordNormalBinary.bin+8' texCoord='binGeo/Building_1-GEOMETRY_texCoordBinary.bin+4' coordType='Uint16' texCoordType='Uint16' normalAsSphericalCoordinates='true'></binaryGeometry>
</shape>
<shape DEF='SP_0'>
<appearance USE='_02_-_Default'></appearance>
<binaryGeometry DEF='Building_2-GEOMETRY' solid='false' vertexCount='595 6036' primType='"TRIANGLESTRIP" "TRIANGLES"' position='-1.94029140472 2.24684500694 0.214373588562' size='24.3516769409 6.30979013443 14.3099994659' index='binGeo/Building_2-GEOMETRY_indexBinary.bin' coord='binGeo/Building_2-GEOMETRY_coordNormalBinary.bin+8' texCoord='binGeo/Building_2-GEOMETRY_texCoordBinary.bin+4' coordType='Uint16' texCoordType='Uint16' normalAsSphericalCoordinates='true'></binaryGeometry>
</shape>
<shape DEF='SP_2'>
<appearance USE='_02_-_Default'></appearance>
<binaryGeometry DEF='Building_3-GEOMETRY' solid='false' vertexCount='320 363' primType='"TRIANGLESTRIP" "TRIANGLES"' position='-1.60769557953 1.8018450737 0.0456223487854' size='24.6368675232 5.41979026794 13.39249897' index='binGeo/Building_3-GEOMETRY_indexBinary.bin' coord='binGeo/Building_3-GEOMETRY_coordNormalBinary.bin+8' texCoord='binGeo/Building_3-GEOMETRY_texCoordBinary.bin+4' coordType='Uint16' texCoordType='Uint16' normalAsSphericalCoordinates='true'></binaryGeometry>
</shape>
<shape DEF='SP_5'>
<appearance USE='_02_-_Default'></appearance>
<binaryGeometry DEF='Building_4-GEOMETRY' solid='false' vertexCount='980 11733' primType='"TRIANGLESTRIP" "TRIANGLES"' position='-1.35274505615 1.83184552193 0.164373874664' size='24.1269683838 5.4797911644 13.2100000381' index='binGeo/Building_4-GEOMETRY_indexBinary.bin' coord='binGeo/Building_4-GEOMETRY_coordNormalBinary.bin+8' texCoord='binGeo/Building_4-GEOMETRY_texCoordBinary.bin+4' coordType='Uint16' texCoordType='Uint16' normalAsSphericalCoordinates='true'></binaryGeometry>
</shape>
<shape DEF='SP_6'>
<appearance USE='_02_-_Default'></appearance>
<binaryGeometry DEF='Building_5-GEOMETRY' solid='false' vertexCount='218 1836' primType='"TRIANGLESTRIP" "TRIANGLES"' position='-0.290195465088 1.831594944 1.55937314034' size='22.0018692017 5.47929000854 10.329000473' index='binGeo/Building_5-GEOMETRY_indexBinary.bin' coord='binGeo/Building_5-GEOMETRY_coordNormalBinary.bin+8' texCoord='binGeo/Building_5-GEOMETRY_texCoordBinary.bin+4' coordType='Uint16' texCoordType='Uint16' normalAsSphericalCoordinates='true'></binaryGeometry>
</shape>
<shape DEF='SP_1'>
<appearance USE='_02_-_Default'></appearance>
<binaryGeometry DEF='Building_6-GEOMETRY' solid='false' vertexCount='120 1029' primType='"TRIANGLESTRIP" "TRIANGLES"' position='4.07137012482 0.48423999548 -0.235626220703' size='6.06500005722 2.16499996185 12.4099998474' index='binGeo/Building_6-GEOMETRY_indexBinary.bin' coord='binGeo/Building_6-GEOMETRY_coordNormalBinary.bin+8' texCoord='binGeo/Building_6-GEOMETRY_texCoordBinary.bin+4' coordType='Uint16' texCoordType='Uint16' normalAsSphericalCoordinates='true'></binaryGeometry>
</shape>
</transform>
</scene>
</x3d>
<script>
var active = true;
var showHide = function() {
if (active) {
document.getElementById('description').style.display = 'none';
document.getElementById('showHide').innerHTML = 'Show description';
} else {
document.getElementById('description').style.display = 'block';
document.getElementById('showHide').innerHTML = 'Hide description';
}
active = !active;
}
var updateArc = function(min, max)
{
var centerX = canvas.width/2;
var centerY = canvas.height/2;
var radius = canvas.width/2-10;
min = min - Math.PI/2;
max = max - Math.PI/2
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'white';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#999';
context.stroke();
context.beginPath();
context.arc(centerX, centerY, radius, min, max, false);
context.strokeStyle = '#003300';
context.stroke();
context.beginPath();
context.moveTo(centerX, centerY);
context.lineTo(centerX + (radius * Math.cos(min)), centerY + (radius * Math.sin(min)));
context.strokeStyle = '#0000FF';
context.stroke();
context.beginPath();
context.moveTo(centerX, centerY);
context.lineTo(centerX + (radius * Math.cos(max)), centerY + (radius * Math.sin(max)));
context.strokeStyle = '#FF0000';
context.stroke();
}
var example = document.getElementById('example');
var nav = document.getElementById('nav');
var canvas = document.getElementById('theCanvas');
var context = canvas.getContext('2d');
var minInput = document.getElementById('min');
var maxInput = document.getElementById('max');
minInput.onchange = function() {
var min = parseFloat(minInput.value);
var max = parseFloat(maxInput.value);
if (min < max) {
var str = '0.0 0.0 ' + min.toFixed(1) + ' ' + max.toFixed(1);
example.innerHTML = str;
nav.setAttribute('typeParams', str);
updateArc(min, max);
} else {
minInput.value = (max - 0.1).toFixed(1);
}
}
maxInput.onchange = function() {
var min = parseFloat(minInput.value);
var max = parseFloat(maxInput.value);
if (max > min) {
var str = '0.0 0.0 ' + min.toFixed(1) + ' ' + max.toFixed(1);
example.innerHTML = str;
nav.setAttribute('typeParams', str);
updateArc(min, max);
} else {
maxInput.value = (min + 0.1).toFixed(1);
}
}
updateArc(0.2, 1.4);
</script>
</body>
</html>