threes：Threes.js入门篇之9 - 全景图

admin 2024-04-19 19:04:20 0 0

全景图是一个当下非常流行的展示方式，在 VR | AR领域有广泛应用。

       在三维内的 全景图 通常是根据 鼠标事件调整摄像机位置（在包围球内旋转），其基本思路一致，包围球可以通过 球面、立方体来实现，在几何上面贴上全景图纹理，一个典型的全景纹理图可能是下面这几种：

    

  •                 texture.format = THREE.RGBFormat;  
  •   
  •                 var material   = new THREE.MeshBasicMaterial( { map: texture } );  
  •   
  •                 mesh = new THREE.Mesh( geometry, material );  
  •                 scene.add( mesh );  
  •   
  •                 renderer = new THREE.WebGLRenderer();  
  •                 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 );  
  •   
  •                 //  
  •   
  •                 window.addEventListener( 'resize', onWindowResize, false );  
  •   
  •             }  
  •   
  •             function onWindowResize() {  
  •   
  •                 camera.aspect = window.innerWidth / window.innerHeight;  
  •                 camera.updateProjectionMatrix();  
  •   
  •                 renderer.setSize( window.innerWidth, window.innerHeight );  
  •   
  •             }  
  •   
  •             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 = ( onPointerDownPointerY - event.clientY ) * 0.1 + onPointerDownLat;  
  •   
  •                 }  
  •   
  •             }  
  •   
  •             function onDocumentMouseUp( event ) {  
  •   
  •                 isUserInteracting = false;  
  •   
  •             }  
  •   
  •             function onDocumentMouseWheel( event ) {  
  •   
  •                 distance += event.deltaY * 0.05;  
  •   
  •             }  
  •   
  •             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 - 180 );  
  •   
  •                 camera.position.x = distance * Math.sin( phi ) * Math.cos( theta );  
  •                 camera.position.y = distance * Math.cos( phi );  
  •                 camera.position.z = distance * Math.sin( phi ) * Math.sin( theta );  
  •   
  •                 camera.lookAt( scene.position );  
  •   
  •                 renderer.render( scene, camera );  
  •   
  •             }  
  •   
  •         </script>  
  •     </body>  
  • </html>  
    • 收藏（0）
    7670m：AMD Radeon HD 7670M 显卡折腾

    上一篇

    7670m：AMD Radeon HD 76...

    相关推荐

    • threes：Threes.js入门篇之9 - ...

      全景图是一个当下非常流行的展示方式，在 VR | AR领域有广泛应用。 在三维内的 全景图 通常是根据 鼠标事件调整摄像机位置（在包围球内旋转），其...

      admin 2024-04-19 19:04:20 0 1

      threes：Threes.js入门篇之9 - 全景图

    随机阅读

    最新
    精选

    相关文章