three.js全景视频

来源：互联网发布：网络视听审核员证书编辑：程序博客网时间：2024/05/05 20:48
小生最近学习three.js，将three.js官网提供的网站实例翻译翻译，共同学习。接下来翻译一下 webgl_video_panorama_equirectangular.html
运行结果https://threejs.org/examples/#webgl_video_panorama_equirectangular
<!DOCTYPE html><html lang="en"><head><title>three.js webgl - equirectangular video panorama</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style>body {background-color: #000000;margin: 0px;overflow: hidden;}#info {position: absolute;top: 0px; width: 100%;color: #ffffff;padding: 5px;font-family:Monospace;font-size:13px;font-weight: bold;text-align:center;}a {color: #ffffff;}</style></head><body><div id="container"></div><script src="../build/three.js"></script><script>    //原理：通过three.js建立一个球模型,将视频贴到球模型上,通过矩阵变换将视频贴到模型内部,观察点不动,通过鼠标拖动,改变相机的位置来实现全景视频的观看。    //当然需要将模型添加到场景中，通过渲染器不断的渲染 var camera, scene, renderer;var texture_placeholder,//多余代码isUserInteracting = false,//鼠标按下的标志，开始鼠标没有按下为falseonMouseDownMouseX = 0, onMouseDownMouseY = 0,lon = 0,//记录水平方向的偏角,即水平角            onMouseDownLon = 0,//多余代码lat = 0,//记录竖直方向的偏角,即仰俯角            onMouseDownLat = 0,//多余代码phi = 0,//在three.js中 phi代表与xoy平面的夹角,即仰俯角            theta = 0, //theta代表与xoy平面的夹角, 即水平角distance = 500,//观察点到相机的距离,即球半径onPointerDownPointerX = 0,//记录鼠标按下瞬间的屏幕x值onPointerDownPointerY = 0,//记录鼠标按下瞬间的屏幕x值onPointerDownLon = 0,//记录上一次鼠标水平移动的角度.onPointerDownLat = 0;//记录上一次鼠标竖直移动的角度.init();animate();function init() {var container, mesh;container = document.getElementById( 'container' );camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);//透视投影,即远景相机,模仿人眼camera.target = new THREE.Vector3( 0, 0, 0 );//初始化相机观察点scene = new THREE.Scene();//初始化场景var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );//建立半径为500,水平垂直分割面分别为60,40的缓冲球面geometry.scale(  -1, 1, 1 );//进行缩放，进行矩阵变换,将视频贴在球内表面var video = document.createElement( 'video' );video.width = 640;video.height = 360;video.loop = true;//视频是否循环video.muted = true;//是否关闭音频video.src = "textures/pano.webm";video.setAttribute( 'webkit-playsinline', 'webkit-playsinline' );video.play();var texture = new THREE.VideoTexture( video );//视频纹理texture.minFilter = THREE.LinearFilter;//纹理在缩小时的过滤方式,默认THREE.LinearMipMapNearestFilter选择最临近的mip层，并执行线性过滤texture.format = THREE.RGBFormat;//像素数据的颜色格式, 默认为THREE.RGBAFormat,还有以下可选参数    //THREE.AlphaFormat = 1019;//GL_ALPHA Alpha 值    //THREE.RGBFormat = 1020;//Red, Green, Blue 三原色值    //THREE.RGBAFormat = 1021;//Red, Green, Blue 和 Alpha 值    //THREE.LuminanceFormat = 1022;//灰度值    //THREE.LuminanceAlphaFormat = 1023;//灰度值和 Alpha 值var material = new THREE.MeshBasicMaterial({ map: texture });//基础网孔材料mesh = new THREE.Mesh( geometry, material );scene.add( mesh );renderer = new THREE.WebGLRenderer();//webGL渲染器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() {                //将角度转化为弧度lat = Math.max( - 85, Math.min( 85, lat ) );phi = THREE.Math.degToRad( 90 - lat );theta = THREE.Math.degToRad( lon );                //球面坐标计算公式,相当于相机在球面移动,观察点不动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( camera.target );/*// distortioncamera.position.copy( camera.target ).negate();*/                //渲染renderer.render( scene, camera );}
阅读全文
1 0