简介
一般网页中使用的全景图为两种，一种是由六张正方形图片组成的，另一种就是一整张的宽高比为2比1的全景图片。前面，第一节的案例就是一个六张正方形。今天我就实现一整张的案例文件引入。
实现思路
一张全景图都是这样的
这是一张three.js官方的全景图片。我们通过这张全景图实现全景查看。
首先我们需要一个球体的网格
var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
1
然后对网格进行x轴反转，使所有的面点向内。
geometry.scale( – 1, 1, 1 );
1
如果不进行这段代码执行的话，那就相当于制作地球了。而我们需要的是从球内去看球，所以，将面的显示朝向都朝向中心。
然后我们将纹理图片加载，生成纹理，供网格使用，并添加到场景中
var material = new THREE.MeshBasicMaterial( {
map: new THREE.TextureLoader().load( '2294472375_24a3b8ef46_o.jpg' ) //加载一整张纹理图片
} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );1
2
3
4
5
最后设置好相机为球的中心点，我们置身于了全景当中了。
如果进行缩小，我们还是能看出来这是一个球
我们现在已经实现最简单的全景图查看了。撒花撒花~~~
案例代码
现在贴出全部代码
Title
本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请添加站长微信举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.ibjoo.com/306.html
