php框架三维图展⽰,HTML5开发实例-3D全景（ThreeJs全景 Demo）详解（图）
前⾔
在现在市⾯上很多全景H5的环境下，要实现全景的⽅式有很多，可以⽤css3直接构建也可以⽤基于threeJs的库来实现，还有很多别的制作全景的软件使⽤
本教学适⽤于未开发过3D全景的⼯程狮
如果觉得内容太⽆聊可以直接跳到最后
下载代码
理论
整个3D全景所⽤的相关理论就不多说了，就稍微讲⼀下本案例⽤到的相关理论
相信程序猿们会更加关注代码实现的内容
这次讲解的demo是⽤css3DRender来构建⼀个正⽅体的全景场景 想象⼀下，我们需要做的就是构建⼀个正⽅体的盒⼦
然后把镜头放在以下这个正⽅体盒⼦⾥
每个⾯都贴上我们场景的⼀个⾯，那么当镜头转动时看到的就是置⾝其中的全景
详细理论的东西以后再说，这次先跑起来⼀个简单的demo吧
demo解析
本教学⽤到两个库：
threeJS和基于它的CSS3DRender.js
代码是从官⽹上样例上扒下来做了⼀点调整。
three.js css3d - panorama
body {
uu定制网
background-color: #000000;
margin: 0;
cursor: move;
overflow: hidden;
}
.surface { width: 1026px; height: 1026px; background-size: cover; position: absolute; }
.surface .bg { position: absolute; width: 1026px; height: 1026px; }
html这边没什么特别的，⾸先把每个⾯放进去，⽤p把每个⾯的图⽚放进去。
没有⽤官⽹demo的实现⽅式是因为官⽹是create⼀个img插⼊到页⾯，我们在对每个⾯添加元素的时候不太⽅便
先把六个⾯定义好，如果要在每个⾯上加⼊⼀些交互的元素，直接在html上添加dom就可以了
⼀共就引⼊了3个js，除了index另外两个都是压缩过的js，不⽤关⼼，看⼀下index.js的实现camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
scene = new THREE.Scene();
那么很明显这两⾏代码，字⾯上的意思就是创建了⼀个相机，创建了⼀个场景。
那这⾥稍微解释⼀下这两个类
PerspectiveCamera
以下是官⽹的解释
⼤概意思：
这是⼀个模仿⼈眼的投影模式，它是⽤于渲染3D场景最常见的投影模式。 总之这个类就是new⼀个镜头
下⾯是样例代码
这个类的构造函数接受四个参数
那么这四个参数具体是什么东西？
分别表⽰的
镜头夹⾓，宽⾼⽐，最近焦距，最远焦距
Scene
接下来，⽤Scene类创建场景
以下官⽅说明
这东西创建了⼀个场景，这个场景允许你对某个东西某个位置通过threeJs渲染场景创建了场景和相机，我们需要往场景⾥⾯放⼊之前说的正⽅体
⾸先定义好六个⾯的数据，每个⾯的位置，3D旋转的旋转⾓度。
position三个参数分别对应的x,y,z轴的位置
network ntr
因为我选的⾯宽度是1024px
所以位置是基于中⼼点的正负1024/2
rotation的三个参数分贝对应xyz轴的旋转⾓度
Math.PI/2代表90度var sides = [
{
position: [ -512, 0, 0 ],//位置
rotation: [ 0, Math.PI / 2, 0 ]//⾓度
},
{
position: [ 512, 0, 0 ],
rotation: [ 0, -Math.PI / 2, 0 ]
},
{
position: [ 0, 512, 0 ],
rotation: [ Math.PI / 2, 0, Math.PI ]
},
索尼爱立信c702{
position: [ 0, -512, 0 ],
rotation: [ - Math.PI / 2, 0, Math.PI ]
},
小冰期{
position: [ 0, 0, 512 ],
rotation: [ 0, Math.PI, 0 ]
},
{
position: [ 0, 0, -512 ],
rotation: [ 0, 0, 0 ]
}
];
/**
* 根据六个⾯的信息，new出六个对象放⼊场景中
*/
for ( var i = 0; i < sides.length; i ++ ) {
var side = sides[ i ];
var element = ElementById("surface_"+i);
element.width = 1026; // 2 pixels extra to close the gap.多余的2像素⽤于闭合正⽅体var object = new THREE.CSS3DObject( element );
object.position.fromArray( side.position );
scene.add( object );
}
CSS3DObject
那么这⾥有⼀个新出现的类CSS3DObject
不过这个类不属于官⽅类，⽽是我们引⽤的3DRender库⾥的类
没有⽂档我们看⼀下代码THREE.CSS3DObject = function (element) {
THREE.Object3D.call(this);
this.element = element;
this.element.style.position = 'absolute';
this.addEventListener('removed', function (event) {
if (this.element.parentNode !== null) {
阿比丹 艾山this.veChild(this.element);
for (var i = 0, l = this.children.length; i < l; i++) {dppb
this.children[i].dispatchEvent(event)
}
}
})
}
;
THREE.CSS3DObject.prototype = ate(THREE.Object3D.prototype);
可以看出这是⼀个继承于THREE.Object3D的类
将传⼊的element的postion改为绝对定位，然后加了个被移除时的事件。
没有定义什么别的特别的东西，那么我们查⼀下官⽅Object3D的类
Object3D
这个类就是⼀个定义对象的基本类，其中new的对象包含以下两个属性.position
The object's local position.
.rotation
Object's local rotation (see Euler angles), in radians.
分别表⽰对象的位置和旋转⾓度。
那么for循环就是定义六个对象加⼊场景中
好，我们继续renderer = new THREE.CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
CSS3DRenderer
这是我们引⽤的库⾥的类
这个类的主要功能是根据three中的场景和镜头的相关信息
使⽤dom元素和css3D的属性来渲染出来
在这⾥只是new了这个类和设置了宽⾼
但是CSS3DRender在这⾥还没有开始渲染页⾯document.addEventListener( 'mousedown', onDocumentMouseDown, false ); document.addEventListener( 'wheel', onDocumentMouseWheel, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
window.addEventListener( 'resize', onWindowResize, false );
这⾥的事件绑定就不详细说了
接下来解析⼀下渲染时的代码animate();function animate() {
requestAnimationFrame( animate );
// lat += 0.1;
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议