three.js 创建一个在线720度全景展示效果
先看效果，可直接在线运行看效果
<!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],
...点击查看剩余70%
{{collectdata}}
网友评论0