three.js 创建一个在线720度全景展示效果
先看效果,可直接在线运行看效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=three&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <style> body { background-color: #000000; margin: 0; cursor: move; overflow: hidden; } .surface { width: 1026px; height: 1026px; background-size: cover; position: absolute; } .surface .bg { position: absolute; width: 1026px; height: 1026px; } .m { width: 200px; padding: 20px; position: fixed; z-index: 999; font-weight: bold; color: #FFFFFF; } </style> </head> <body> <div class="m"> 720度全景展示 </div> <div> <div id="surface_0" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/posx.jpg" alt=""> </div> <div id="surface_1" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/negx.jpg" alt=""> </div> <div id="surface_2" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/posy.jpg" alt=""> </div> <div id="surface_3" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/negy.jpg" alt=""> </div> <div id="surface_4" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/posz.jpg" alt=""> </div> <div id="surface_5" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/negz.jpg" alt=""> </div> </div> <script type="text/javascript"> var camera, scene, renderer; var geometry, material, mesh; var target; var lon = 90, lat = 0; var phi = 0, theta = 0; var touchX, touchY; bready(function() { use(['CSS3DRenderer.min'], function() { target = new THREE.Vector3(); init(); animate(); }); }); function init() { camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); scene = new THREE.Scene(); var sides = [{ position: [-512, 0, 0], rotation: [0, Math.PI / 2, 0] }, { position: [512, 0, 0], rotation: [0, -Math.PI / 2, 0] }, { position: [0, 512, 0], rotation: [Math.PI / 2, 0, Math.PI] }, { position: [0, -512, 0], rotation: [-Math.PI / 2, 0, Math.PI] }, { position: [0, 0, 512], rotation: [0, Math.PI, 0] }, { position: [0, 0, -512], rotation: [0, 0, 0] }]; for (var i = 0; i < sides.length; i++) { var side = sides[i]; var element = document.getElementById("surface_" + i); element.width = 1026; var object = new THREE.CSS3DObject(element); object.position.fromArray(side.position); object.rotation.fromArray(side.rotation); scene.add(object); } renderer = new THREE.CSS3DRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); document.addEventListener('mousedown', onDocumentMouseDown, false); document.addEventListener('wheel', onDocumentMouseWheel, false); document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); window.addEventListener('resize', onWindowResize, false); } function animate() { requestAnimationFrame(animate); lat = Math.max(-85, Math.min(85, lat)); phi = THREE.Math.degToRad(90 - lat); theta = THREE.Math.degToRad(lon); target.x = Math.sin(phi) * Math.cos(theta); target.y = Math.cos(phi); target.z = Math.sin(phi) * Math.sin(theta); camera.lookAt(target); renderer.render(scene, camera); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function onDocumentMouseDown(event) { event.preventDefault(); document.addEventListener('mousemove', onDocumentMouseMove, false); document.addEventListener('mouseup', onDocumentMouseUp, false); } function onDocumentMouseMove(event) { var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0; var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0; lon -= movementX * 0.1; lat += movementY * 0.1; } function onDocumentMouseUp(event) { document.removeEventListener('mousemove', onDocumentMouseMove); document.removeEventListener('mouseup', onDocumentMouseUp); } function onDocumentMouseWheel(event) { camera.fov += event.deltaY * 0.05; camera.updateProjectionMatrix(); } function onDocumentTouchStart(event) { event.preventDefault(); var touch = event.touches[0]; touchX = touch.screenX; touchY = touch.screenY; } function onDocumentTouchMove(event) { event.preventDefault(); var touch = event.touches[0]; lon -= (touch.screenX - touchX) * 0.1; lat += (touch.screenY - touchY) * 0.1; touchX = touch.screenX; touchY = touch.screenY; } </script> </body> </html>原理就是利用three.js 将6个面的照片进行合成渲染,然后利用鼠标事件进行视图控制,具体步骤就是
1、创建场景
scene = new THREE.Scene();
2、创建透视相机
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
3、创建画布
texture_placeholder = document.createElement( 'canvas' );
4.创建立方体网格模型、渲染器
网友评论0