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

Three.js 是一款運(yùn)行在瀏覽器中的 3D 引擎，你可以用它創(chuàng)建各種三維場(chǎng)景，包括了攝影機(jī)、光影、材質(zhì)等各種對(duì)象。你可以在它的主頁(yè)上看到許多精彩的演示。

2.three.js制作官網(wǎng)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張全景圖

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

在官網(wǎng)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逆時(shí)針處理90度 2.pano生成的頂部圖, 在ps中先將ny順時(shí)針處理90度

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

三.復(fù)制官網(wǎng)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逆時(shí)針處理90度 */loadTexture( 'images/skybox/py.jpg' ), // top/* pano生成的頂部圖, 底部圖, 在ps中先將ny順時(shí)針處理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() {// 自動(dòng)旋轉(zhuǎn)// 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 );}

?

轉(zhuǎn)載于:https://www.cnblogs.com/alantao/p/7905127.html

總結(jié)

以上是生活随笔為你收集整理的360全景图three.js的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。