上一篇是通过WebGlRenderer
渲染器,加上几何贴图实现的一张全景浏览,但是会出现,图片的大小和画质会被改变,导致渲染的不清晰,那么本篇是通过CSS3DRenderer
来实现全景浏览,和上次不同的是这次是六张图,分别铺满一个立方体盒子的六个面。
示例
https://ithanmang.gitee.io/threejs/home/example/css3drenderer/index.html
效果
代码贴上,有注释,可以自己研究
示例代码
<!DOCTYPE html>
<html>
<head>
<title>three.js css3d - 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 {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../../libs/build/three-r93.js"></script>
<script src="../../libs/examples/js/renderers/CSS3DRenderer.js"></script>
<script>
var camera, scene, renderer;
/* 相机聚焦点 */
var target = new THREE.Vector3();
/* lon:经度, lat:维度 经纬度是相机的聚焦点 */
var lon = 90, lat = 0;
/* 相机聚焦点,弧度制 */
var phi = 0, theta = 0;
/* 移动端输入的x,y */
var touchX, touchY;
/* 图片路径 */
var src = 'images/siximg/par.front.jpg';
/* 因为图片加载比较慢可以先设置一个背景图 */
document.body.style.backgroundImage = 'url('+src+")";
document.body.style.backgroundRepeat = 'no-repeat';
document.body.style.backgroundSize = window.innerWidth+'px '+window.innerHeight+'px';
var img = new Image();
img.src = src;
/* 图片加载完之后调用 */
img.onload = function () {
init(img.width, src);
animate();
};
function init