您的位置：首页 > Web前端 > JavaScript
three.js全景

2016-11-22 15:38 274 查看
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - equirectangular 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>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js webgl</a> - equirectangular panorama demo. photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank">Jón Ragnarsson</a>.<br />
drag equirectangular texture into the page.
</div>

<script src="../build/three.js"></script>

<script>

var camera, scene, renderer;//相机 场景 渲染器

var isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 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.SphereGeometry( 500, 60, 40 );//SphereGeometry用来在三维空间内创建一个球体对象.
geometry.scale( - 1, 1, 1 );

var material = new THREE.MeshBasicMaterial( { //使用基本材质（BasicMaterial）的物体，渲染后物体的颜色始终为该材质的颜色，不会由于光照产生明暗、阴影效果
map: new THREE.TextureLoader().load( 'textures/quanjing1.jpg' )
} );

mesh = new THREE.Mesh( geometry, material );//Mesh（图元装配函数）   生成三维物体

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 );

//

document.addEventListener( 'dragover', function ( event ) {

event.preventDefault();
event.dataTransfer.dropEffect = 'copy';

}, false );

document.addEventListener( 'dragenter', function ( event ) {

document.body.style.opacity = 0.5;

}, false );

document.addEventListener( 'dragleave', function ( event ) {

document.body.style.opacity = 1;

}, false );

document.addEventListener( 'drop', function ( event ) {

event.preventDefault();

var reader = new FileReader();
reader.addEventListener( 'load', function ( event ) {

material.map.image.src = event.target.result;
material.map.needsUpdate = true;

}, false );
reader.readAsDataURL( event.dataTransfer.files[ 0 ] );

document.body.style.opacity = 1;

}, 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 = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

}

}

function onDocumentMouseUp( event ) {

isUserInteracting = false;

}

function onDocumentMouseWheel( event ) {

camera.fov += event.deltaY * 0.05;
camera.updateProjectionMatrix();

}

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 );

camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
camera.target.y = 500 * Math.cos( phi );
camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

camera.lookAt( camera.target );

/*
// distortion
camera.position.copy( camera.target ).negate();
*/

renderer.render( scene, camera );

}

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航