1.three.js是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。

Three.js 是一款運行在瀏覽器中的 3D 引擎，你可以用它創建各種三維場景，包括了攝影機、光影、材質等各種對象。你可以在它的主頁上看到許多精彩的演示。

2.three.js制作官網demo全景圖

一.引入js文件

<script src="three.js-dev/build/three.js"></script> <script src="three.js-dev/examples/js/renderers/Projector.js"></script> <script src="three.js-dev/examples/js/renderers/CanvasRenderer.js"></script>

二.使用pano2vr軟件制作6張全景圖

官網demo中需要6張圖片, 這里使用pano2vr生成, 但可以用, 網上搜索都是千篇一律的使用blender, 不會搞

在官網demo的全景圖中的6張圖在, 我在ps里還原成 (https://threejs.org/examples/?q=pano#canvas_geometry_panorama)

?

nx.jpg ==> 左1 pz.jpg ==> 左2 px.jpg ==> 左3 nz.jpg ==> 左4 py.jpg ==> 上5 ny.jpg ==> 下6 1.pano生成的頂部圖,在ps中先將py逆時針處理90度 2.pano生成的頂部圖, 在ps中先將ny順時針處理90度

然后在pano2vr生成的6張圖分別按照以上命名, py.jpg與ny.jpg需要重新處理下

三.復制官網demo的panorama例子

?

var camera, scene, renderer;var texture_placeholder, isUserInteracting = false, onMouseDownMouseX = 0, onMouseDownMouseY = 0, lon = 90, onMouseDownLon = 0, lat = 0, onMouseDownLat = 0, phi = 0, theta = 0, target = new THREE.Vector3();init(); animate();function init() {var container, mesh;container = document.getElementById( 'container' );camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );scene = new THREE.Scene();texture_placeholder = document.createElement( 'canvas' );texture_placeholder.width = 128;texture_placeholder.height = 128;var context = texture_placeholder.getContext( '2d' );context.fillStyle = 'rgb( 200, 200, 200 )';context.fillRect( 0, 0, texture_placeholder.width, texture_placeholder.height );var materials = [loadTexture( 'images/skybox/px.jpg' ), // rightloadTexture( 'images/skybox/nx.jpg' ), // left/* pano生成的頂部圖, 底部圖, 在ps中先將py逆時針處理90度 */loadTexture( 'images/skybox/py.jpg' ), // top/* pano生成的頂部圖, 底部圖, 在ps中先將ny順時針處理90度 */loadTexture( 'images/skybox/ny.jpg' ), // bottomloadTexture( 'images/skybox/pz.jpg' ), // backloadTexture( 'images/skybox/nz.jpg' ) // front];mesh = new THREE.Mesh( new THREE.BoxGeometry( 300, 300, 300, 7, 7, 7 ), materials );mesh.scale.x = - 1;scene.add( mesh );renderer = new THREE.CanvasRenderer();renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );container.appendChild( renderer.domElement );document.addEventListener( 'mousedown', onDocumentMouseDown, false );document.addEventListener( 'mousemove', onDocumentMouseMove, false );document.addEventListener( 'mouseup', onDocumentMouseUp, false );document.addEventListener( 'wheel', onDocumentMouseWheel, false );document.addEventListener( 'touchstart', onDocumentTouchStart, false );document.addEventListener( 'touchmove', onDocumentTouchMove, false );//window.addEventListener( 'resize', onWindowResize, false );}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function loadTexture( path ) {var texture = new THREE.Texture( texture_placeholder );var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );var image = new Image();image.onload = function () {texture.image = this;texture.needsUpdate = true;};image.src = path;return material;}function onDocumentMouseDown( event ) {event.preventDefault();isUserInteracting = true;onPointerDownPointerX = event.clientX;onPointerDownPointerY = event.clientY;onPointerDownLon = lon;onPointerDownLat = lat;}function onDocumentMouseMove( event ) {if ( isUserInteracting === true ) {lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;}}function onDocumentMouseUp( event ) {isUserInteracting = false;}function onDocumentMouseWheel( event ) {var fov = camera.fov + event.deltaY * 0.05;camera.fov = THREE.Math.clamp( fov, 10, 75 );camera.updateProjectionMatrix();}function onDocumentTouchStart( event ) {if ( event.touches.length == 1 ) {event.preventDefault();onPointerDownPointerX = event.touches[ 0 ].pageX;onPointerDownPointerY = event.touches[ 0 ].pageY;onPointerDownLon = lon;onPointerDownLat = lat;}}function onDocumentTouchMove( event ) {if ( event.touches.length == 1 ) {event.preventDefault();lon = ( onPointerDownPointerX - event.touches[0].pageX ) * 0.1 + onPointerDownLon;lat = ( event.touches[0].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;}}function animate() {requestAnimationFrame( animate );update();}function update() {// 自動旋轉// if ( isUserInteracting === false ) {// lon += 0.1;// }lat = Math.max( - 85, Math.min( 85, lat ) );phi = THREE.Math.degToRad( 90 - lat );theta = THREE.Math.degToRad( lon );target.x = 500 * Math.sin( phi ) * Math.cos( theta );target.y = 500 * Math.cos( phi );target.z = 500 * Math.sin( phi ) * Math.sin( theta );camera.lookAt( target );renderer.render( scene, camera );}

?

轉載于:https://www.cnblogs.com/alantao/p/7905127.html

總結

以上是生活随笔為你收集整理的360全景图three.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。