Three.js - 通过球形贴图实现全景浏览

最新推荐文章于 2024-04-24 09:26:10 发布

「已注销」

最新推荐文章于 2024-04-24 09:26:10 发布

阅读量8.4k

点赞数 3

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/82013009

版权

一般的全景图分为两种，一种是由六张正方形的图组成，一种是由一张宽2高1的图，本示例，就是利用一张全景图，来给球体几何贴图实现，全景的浏览。

单张全景图：
这里写图片描述
六张全景图：

示例是基于一张全景图制作的，因为图片的比例不是2的幂，所以会被拉伸，因此看着不清晰。
示例：https://ithanmang.gitee.io/threejs/home/201808/20180822/01-single-img-panorama.html

效果：
这里写图片描述
实现方法
1、首先，把图片加载进来。

 let texture = new THREE.TextureLoader().load('../../images/scenery.jpg');

2、创建一个球形几何

 let sphereGeometry = new THREE.SphereGeometry(1000, 50, 50);

3、对球形几何网格进行x轴反转，使所有的面点向内，否则就是朝外

sphereGeometry.scale(-1, 1, 1);

4、创建材质，加入map

let sphereMaterial = new THREE.MeshBasicMaterial({
   map: texture});

let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

scene.add(sphere);

其实将相机的距离拉远会到一个贴着纹理的球体
这里写图片描述
六张的图类似，只是改变一下，几何体为BoxGeometry，然后把留个面贴上纹理即可，但是可能会有图片显示清晰度的问题，六张的可以使用CSS3DRenderer渲染器，来实现全景。
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>THREE.Group 对象组合</

最低0.47元/天解锁文章

「已注销」

关注

3
点赞
踩
23

收藏

觉得还不错? 一键收藏
5
评论
Three.js - 通过球形贴图实现全景浏览

一般的全景图分为两种，一种是由六张正方形的图组成，一种是由一张宽2高1的图，本示例，就是利用一张全景图，来给球体几何贴图实现，全景的浏览。单张全景图：六张全景图：示例是基于一张全景图制作的，因为图片的比例不是2的幂，所以会被拉伸，因此看着不清晰。示例：http://ithanmang.com/threeJs/homesingle-img-panorama.html 效果：...
复制链接

扫一扫