正方体全景图是把一个全景图切成 6 张图片分别贴到一个正方体的 6 个面上。相机放在正方体中间，旋转时改变相机的指向即可。
texture.png
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>正方体全景图</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<script src="three.js"></script>
<script src="OrbitControls.js"></script>
<script>
var scene, camera, renderer;
var controls;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 0.01;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera);
controls.enableZoom = false;
controls.enablePan = false;
var textures = getTexturesFromFile('sun_temple_stripe.jpg', 6);
var materials = [];
for (var i = 0; i < 6; i++) {
materials.push(new THREE.MeshBasicMaterial({map: textures[i]}));
}
// 经测试 6 个面的排列顺序是 左右 上下 前后 （从屏幕里面往 Z 轴正方向看）
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), materials);
cube.applyMatrix(new THREE.Matrix4().makeScale(1, 1, -1));
scene.add(cube);
window.addEventListener('resize', onWindowResize, false);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function getTexturesFromFile(imgUrl, tilesNum) {
var textures = [];
for (var i = 0; i < tilesNum; i++) {
textures[i] = new THREE.Texture();
}
var image = new Image();
image.onload = function () {
var canvas, context;
var tileWidth = image.height;
for (var i = 0; i < textures.length; i++) {
canvas = document.createElement('canvas');
context = canvas.getContext('2d');
canvas.width = tileWidth;
canvas.height = tileWidth;
context.drawImage(image, tileWidth * i, 0, tileWidth, tileWidth, 0, 0, tileWidth, tileWidth);
textures[i].image = canvas;
textures[i].needsUpdate = true;
}
};
image.src = imgUrl;
return textures;
}
</script>
</body>
</html>
网友评论