720全景VR图 three.js

1.three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各...

1.three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。

Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。

2.three.js制作官网demo全景图

一.引入js文件

1
2
3
<script src="three.js-dev/build/three.js"></script>
<script src="three.js-dev/examples/js/renderers/Projector.js"></script>
<script src="three.js-dev/examples/js/renderers/CanvasRenderer.js"></script>

二.使用pano2vr软件制作6张全景图

官网demo中需要6张图片, 这里使用pano2vr生成, 但可以用, 网上搜索都是千篇一律的使用blender, 不会搞

在官网demo的全景图中的6张图在, 我在ps里还原成 (https://threejs.org/examples/?q=pano#canvas_geometry_panorama)

 

1
2
3
4
5
6
7
8
nx.jpg ==> 左1
pz.jpg ==> 左2
px.jpg ==> 左3
nz.jpg ==> 左4
py.jpg ==> 上5
ny.jpg ==> 下6
1.pano生成的顶部图,在ps中先将py逆时针处理90度
2.pano生成的顶部图, 在ps中先将ny顺时针处理90度

然后在pano2vr生成的6张图分别按照以上命名, py.jpg与ny.jpg需要重新处理下

三.复制官网demo的panorama例子

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
var camera, scene, renderer;
 
var texture_placeholder,
isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 90, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0,
target = new THREE.Vector3();
 
init();
animate();
 
function init() {
 
    var container, mesh;
 
    container = document.getElementById( 'container' );
 
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
 
    scene = new THREE.Scene();
 
    texture_placeholder = document.createElement( 'canvas' );
    texture_placeholder.width = 128;
    texture_placeholder.height = 128;
 
    var context = texture_placeholder.getContext( '2d' );
    context.fillStyle = 'rgb( 200, 200, 200 )';
    context.fillRect( 0, 0, texture_placeholder.width, texture_placeholder.height );
 
    var materials = [
 
        loadTexture( 'images/skybox/px.jpg' ), // right
        loadTexture( 'images/skybox/nx.jpg' ), // left
 
        /* pano生成的顶部图, 底部图, 在ps中先将py逆时针处理90度 */
        loadTexture( 'images/skybox/py.jpg' ), // top
 
        /* pano生成的顶部图, 底部图, 在ps中先将ny顺时针处理90度 */
        loadTexture( 'images/skybox/ny.jpg' ), // bottom
 
        loadTexture( 'images/skybox/pz.jpg' ), // back
        loadTexture( 'images/skybox/nz.jpg' )  // front
 
    ];
 
    mesh = new THREE.Mesh( new THREE.BoxGeometry( 300, 300, 300, 7, 7, 7 ), materials );
    mesh.scale.x = - 1;
    scene.add( mesh );
 
    renderer = new THREE.CanvasRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );
 
    document.addEventListener( 'mousedown', onDocumentMouseDown, false );
    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    document.addEventListener( 'mouseup', onDocumentMouseUp, false );
    document.addEventListener( 'wheel', onDocumentMouseWheel, false );
 
    document.addEventListener( 'touchstart', onDocumentTouchStart, false );
    document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
    //
 
    window.addEventListener( 'resize', onWindowResize, false );
 
}
 
function onWindowResize() {
 
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
 
    renderer.setSize( window.innerWidth, window.innerHeight );
 
}
 
function loadTexture( path ) {
 
    var texture = new THREE.Texture( texture_placeholder );
    var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
 
    var image = new Image();
    image.onload = function () {
 
        texture.image = this;
        texture.needsUpdate = true;
 
    };
    image.src = path;
 
    return material;
 
}
 
function onDocumentMouseDown( event ) {
 
    event.preventDefault();
 
    isUserInteracting = true;
 
    onPointerDownPointerX = event.clientX;
    onPointerDownPointerY = event.clientY;
 
    onPointerDownLon = lon;
    onPointerDownLat = lat;
 
}
 
function onDocumentMouseMove( event ) {
 
    if ( isUserInteracting === true ) {
 
        lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
        lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
 
    }
 
}
 
function onDocumentMouseUp( event ) {
 
    isUserInteracting = false;
 
}
 
function onDocumentMouseWheel( event ) {
 
    var fov = camera.fov + event.deltaY * 0.05;
 
    camera.fov = THREE.Math.clamp( fov, 10, 75 );
 
    camera.updateProjectionMatrix();
 
}
 
 
function onDocumentTouchStart( event ) {
 
    if ( event.touches.length == 1 ) {
 
        event.preventDefault();
 
        onPointerDownPointerX = event.touches[ 0 ].pageX;
        onPointerDownPointerY = event.touches[ 0 ].pageY;
 
        onPointerDownLon = lon;
        onPointerDownLat = lat;
 
    }
 
}
 
function onDocumentTouchMove( event ) {
 
    if ( event.touches.length == 1 ) {
 
        event.preventDefault();
 
        lon = ( onPointerDownPointerX - event.touches[0].pageX ) * 0.1 + onPointerDownLon;
        lat = ( event.touches[0].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
 
    }
 
}
 
function animate() {
 
    requestAnimationFrame( animate );
    update();
 
}
 
function update() {
 
    // 自动旋转
    // if ( isUserInteracting === false ) {
 
    //     lon += 0.1;
 
    // }
 
    lat = Math.max( - 85, Math.min( 85, lat ) );
    phi = THREE.Math.degToRad( 90 - lat );
    theta = THREE.Math.degToRad( lon );
 
    target.x = 500 * Math.sin( phi ) * Math.cos( theta );
    target.y = 500 * Math.cos( phi );
    target.z = 500 * Math.sin( phi ) * Math.sin( theta );
 
    camera.lookAt( target );
 
    renderer.render( scene, camera );
 
}

 

来源:https://www.cnblogs.com/alantao/p/7905127.html

uni-app video标签打包H5Android上支持播放.m3u8 hls直播流 最后一页
Tags:  
联系我们

Contact us

青岛

电话:133 9639 4503

地址:青岛市市南区三度空间2309

诸城

电话:133 0646 1744

地址:诸城市繁荣东路74号楼12F

×