基于threejs + CSS3DRenderer的3D全景

可以理解为将相机置放在一个立方体内，调整相机的位置可以拍摄到场景中不同内容。本篇是通过CSS3DRenderer来实现全景浏览，分别铺满一个立方体盒子的六个面来实现。下面分别就是左、右、上、下、后、前六个面

使用代码实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基于threejs的3D全景</title><style type="text/css">*{margin: 0;padding: 0;}body{cursor: move;overflow: hidden;}</style><script src="http://lib.22family.com/threejs/three.js"></script><script type="text/javascript" src="http://lib.22family.com/threejs/CSS3DRenderer.min.js"></script>
</head>
<body><script type="text/javascript">var img_url = 'http://img.22family.com/threejs/demo/',imgArr = [{ img: 'posx.jpg', position:[-512, 0, 0], rotation:[0, Math.PI / 2, 0] }, // 左边{ img: 'negx.jpg', position:[512, 0, 0], rotation:[0, -Math.PI / 2, 0] }, // 右边{ img: 'posy.jpg', position:[0, 512, 0], rotation:[Math.PI / 2, 0, Math.PI] },  // 上边{ img: 'negy.jpg', position:[0, -512, 0], rotation:[-Math.PI / 2, 0, Math.PI] },// 下边{ img: 'posz.jpg', position:[0, 0, 512], rotation:[0, Math.PI, 0] },      // 后面{ img: 'negz.jpg', position:[0, 0, -512], rotation:[0, 0, 0] }            // 前面],timer,userChange = false,scene, camera, renderer;var target = new THREE.Vector3();var lon = 90, lat = 0;var phi = 0, theta = 0;var touchX, touchY;function init(){scene = new THREE.Scene()camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );imgArr.forEach(function (v, k){var element = document.createElement( 'img' );element.width = 1028;element.height = 1028;element.src = img_url + v.img;var object = new THREE.CSS3DObject( element );object.rotation.fromArray( v.rotation );object.position.fromArray( v.position );scene.add( object );})renderer = new THREE.CSS3DRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );document.addEventListener( 'mousedown', onDocumentMouseDown, false );document.addEventListener( 'wheel', onDocumentMouseWheel, false );document.addEventListener( 'touchstart', onDocumentTouchStart, false );document.addEventListener( 'touchmove', onDocumentTouchMove, false );window.addEventListener( 'resize', onWindowResize, false );animate()}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function onDocumentMouseDown( event ) {event.preventDefault();document.addEventListener( 'mousemove', onDocumentMouseMove, false );document.addEventListener( 'mouseup', onDocumentMouseUp, false );}function onDocumentMouseMove( event ) {var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;// 经纬度变化lon -= movementX * 0.1;lat += movementY * 0.1;// 拖动时暂停自动平移userChange = trueclearTimeout(timer)timer = setTimeout(function(){userChange = false}, 5000)}function onDocumentMouseUp() {document.removeEventListener( 'mousemove', onDocumentMouseMove );document.removeEventListener( 'mouseup', onDocumentMouseUp );}function onDocumentMouseWheel( event ) {// 鼠标滚筒来控制相机的角度var fov = camera.fov + event.deltaY * 0.05;camera.fov = THREE.Math.clamp( fov, 10, 75 );camera.updateProjectionMatrix();}function onDocumentTouchStart( event ) {event.preventDefault();var touch = event.touches[ 0 ];touchX = touch.screenX;touchY = touch.screenY;}function onDocumentTouchMove( event ) {event.preventDefault();var touch = event.touches[ 0 ];lon -= ( touch.screenX - touchX ) * 0.1;lat += ( touch.screenY - touchY ) * 0.1;touchX = touch.screenX;touchY = touch.screenY;userChange = trueclearTimeout(timer)timer = setTimeout(function(){userChange = false}, 5000)}function animate() {requestAnimationFrame( animate );if(!userChange){// 自动平移视角，改变经度lon += 0.1;}lat = Math.max( - 85, Math.min( 85, lat ) );phi = THREE.Math.degToRad( 90 - lat );theta = THREE.Math.degToRad( lon );target.x = Math.sin( phi ) * Math.cos( theta );target.y = Math.cos( phi );target.z = Math.sin( phi ) * Math.sin( theta );camera.lookAt( target );renderer.render( scene, camera );}window.onload = init</script>
</body>
</html>

基于threejs + CSS3DRenderer的3D全景相关推荐

基于threejs(webgl)的3D元宇宙云展厅
首先看看效果图: 基于 threejs 的 3D 展厅基于 threejs 开发的 3D 展厅,展品可以自由摆放.支持 gltf/glb 格式 github地址:GitHub - mtsee/vr- ...
基于Threejs构建的3D立体空间实战入门
在现实生活中,我们有许多场景需要对真实世界进行还原,仿真.因此会有很多3D的展示需求,同时要求可以基于浏览器就可以深度交互浏览.这里关于3D方面的内容不进行赘述,同时关于opengl和webgl的发展 ...
基于Threejs的jQuery 3d图片旋转木马特效插件
这是一款基于ThreeJS的炫酷3D旋转木马图片画廊特效插件.该旋转木马特效可以设置图片预加载,带有前后导航按钮,可以使用鼠标前后旋转,并可以设置3D透视的位置. 浏览器兼容: Firefox - 3 ...
html调用手机陀螺仪,前端基于THREE.js的3D全景，支持鼠标控制和手机陀螺仪的切换...
/p> 'use strict' ;(function(_window) { var navigatorUserAgent = navigator.userAgent var iPhone = ...
基于threejs 搭建web 3D 简单编辑器
<!DOCTYPE html> <html lang="en"><head><title>智雨物联</title>< ...
DIY 3D全景摄像机
本文原载于我的主页:planckscale.info,转载于此. 版权声明:原创作品,欢迎转载,但转载请以超链接形式注明文章来源(planckscale.info).作者信息和本声明,否则将追究法律责 ...
php框架三维图展示,HTML5开发实例-3D全景(ThreeJs全景Demo) 详解（图）
前言在现在市面上很多全景H5的环境下,要实现全景的方式有很多,可以用css3直接构建也可以用基于threeJs的库来实现,还有很多别的制作全景的软件使用本教学适用于未开发过3D全景的工程狮如果觉 ...
threejs实现3d全景看房
背景随着电商时代的发展,网上购物的方式已经成为主流,良好的购物体验已经显得极为重要.展示给用户的视觉效果便不能仅仅局限于2D视觉效果,全方位的3D立体展示效果能让用户对商品进行 360度无死角的认识 ...
基于ThreeJS实现3D模型上的室内灯光效果模拟
基于ThreeJS实现3D模型上的室内灯光效果模拟示例描述与操作指南示例效果展示实现步骤示例描述与操作指南当前示例用于展示室内灯光的多角度光影效果. 示例效果展示实现步骤第一步创建聚光 ...

基于threejs + CSS3DRenderer的3D全景

基于threejs + CSS3DRenderer的3D全景

使用代码实现：

基于threejs + CSS3DRenderer的3D全景相关推荐

最新文章

热门文章