three打造720度全景照片体验效果
代码语言:html
所属分类:三维
代码描述:利用6张照片结合three进行合成渲染,形成720度的全景照片,可自由拖拉
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=three&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <style> body { background-color: #000000; margin: 0; cursor: move; overflow: hidden; } .surface { width: 1026px; height: 1026px; background-size: cover; position: absolute; } .surface .bg { position: absolute; width: 1026px; height: 1026px; } .m { width: 200px; padding: 20px; position: fixed; z-index: 999; font-weight: bold; color: #FFFFFF; } </style> </head> <body> <div class="m"> 720度全景展示 </div> <div> <div id="surface_0" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/posx.jpg" alt=""> </div> <div id="surface_1" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/negx.jpg" alt=""> </div> <div id="surface_2" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/posy.jpg" alt=""> </div> <div id="surface_3" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/negy.jpg" alt=""> </div> <div id="surface_4" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/posz.jpg" alt=""> </div> <div id="surface_5" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/negz.jpg" alt=""> </div> </div> <script type="text/javascript"> var camera, scene, renderer; var geometry, material, mesh; var target; var lon = 90, lat = 0; var phi = 0, theta = 0; var touchX, touchY; bready(function() { use(['CSS3DRenderer.min'], function() { target = new THREE.Vector3(); init(); animate(); }); }); function init() { camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); scene = new THREE.Scene(); var sides = [{ position: [-512, 0, 0], rotation: [0, Math.PI / 2, 0] }, { position: [512, 0, 0], rotation: [0, -Math.PI / 2, 0] }, { position: [0, 512, 0], rotation: [Math.PI / 2, 0, Math.PI] }, { position: [0, -512, 0], rotat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0