HTML 三維全景代碼
三維全景是一種制作展示場景效果的技術，可以讓用戶仿佛置身于現實場景中。在HTML中，我們可以使用三維全景代碼來實現該效果。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js panorama example</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script>
var renderer, scene, camera, controls;
init();
animate();
function init() {
// 構建渲染器
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// 構建場景
scene = new THREE.Scene();
// 構建相機
camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 0, 0.1 );
// 構建控制器
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = false;
controls.enablePan = false;
controls.minPolarAngle = Math.PI/3;
controls.maxPolarAngle = Math.PI/2;
// 加載全景貼圖
var loader = new THREE.TextureLoader();
var texture = loader.load( 'panorama.jpg' );
texture.minFilter = THREE.NearestFilter;
texture.format = THREE.RGBFormat;
// 創建球體
var geometry = new THREE.SphereGeometry( 100, 64, 32 );
geometry.scale( - 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
}
function animate() {
requestAnimationFrame( animate );
// 更新控制器
controls.update();
// 渲染場景
renderer.render( scene, camera );
}
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
</script>
</body>
</html>