简介
一般网页中使用的全景图为两种,一种是由六张正方形图片组成的,另一种就是一整张的宽高比为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