基于threejs + CSS3DRenderer的3D全景_three.js css3render

作者：我家小花儿 | 2024-02-23 09:01:25

踩

three.js css3render

基于threejs + CSS3DRenderer的3D全景

可以理解为将相机置放在一个立方体内，调整相机的位置可以拍摄到场景中不同内容。本篇是通过CSS3DRenderer来实现全景浏览，分别铺满一个立方体盒子的六个面来实现。下面分别就是左、右、上、下、后、前六个面

使用代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基于threejs的3D全景</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    body{
      cursor: move;
      overflow: hidden;
    }
  </style>
  <script src="http://lib.22family.com/threejs/three.js"></script>
  <script type="text/javascript" src="http://lib.22family.com/threejs/CSS3DRenderer.min.js"></script>
</head>
<body>
  <script type="text/javascript">
    var img_url = 'http://img.22family.com/threejs/demo/',
        imgArr = [
          { img: 'posx.jpg', position:[-512, 0, 0], rotation:[0, Math.PI / 2, 0] }, // 左边
          { img: 'negx.jpg', position:[512, 0, 0], rotation:[0, -Math.PI / 2, 0] }, // 右边
          { img: 'posy.jpg', position:[0, 512, 0], rotation:[Math.PI / 2, 0, Math.PI] },  // 上边
          { img: 'negy.jpg', position:[0, -512, 0], rotation:[-Math.PI / 2, 0, Math.PI] },// 下边
          { img: 'posz.jpg', position:[0, 0, 512], rotation:[0, Math.PI, 0] },      // 后面
          { img: 'negz.jpg', position:[0, 0, -512], rotation:[0, 0, 0] }            // 前面
        ],
        timer,
        userChange = false,
        scene, camera, renderer;
    var target = new THREE.Vector3();
    var lon = 90, lat = 0;
    var phi = 0, theta = 0;
    var touchX, touchY;

    function init(){
      scene = new THREE.Scene()
      camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
      
      imgArr.forEach(function (v, k){
        var element = document.createElement( 'img' );
        element.width = 1028;
        element.height = 1028;
        element.src = img_url + v.img;

        var object = new THREE.CSS3DObject( element );
        object.rotation.fromArray( v.rotation );
        object.position.fromArray( v.position );
        scene.add( object );
      })

      renderer = new THREE.CSS3DRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );

      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 onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize( window.innerWidth, window.innerHeight );
    }

    function onDocumentMouseDown( event ) {
      event.preventDefault();
      document.addEventListener( 'mousemove', onDocumentMouseMove, false );
      document.addEventListener( 'mouseup', onDocumentMouseUp, false );
    }

    function onDocumentMouseMove( event ) {
      var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
      var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;

      // 经纬度变化
      lon -= movementX * 0.1;
      lat += movementY * 0.1;

      // 拖动时暂停自动平移
      userChange = true
      clearTimeout(timer)
      timer = setTimeout(function(){
        userChange = false
      }, 5000)
    }

    function onDocumentMouseUp() {
      document.removeEventListener( 'mousemove', onDocumentMouseMove );
      document.removeEventListener( 'mouseup', onDocumentMouseUp );
    }

    function onDocumentMouseWheel( event ) {
      // 鼠标滚筒来控制相机的角度
      var fov = camera.fov + event.deltaY * 0.05;
      camera.fov = THREE.Math.clamp( fov, 10, 75 );
      camera.updateProjectionMatrix();
    }

    function onDocumentTouchStart( event ) {
      event.preventDefault();
      var touch = event.touches[ 0 ];
      touchX = touch.screenX;
      touchY = touch.screenY;
    }

    function onDocumentTouchMove( event ) {
      event.preventDefault();
      var touch = event.touches[ 0 ];
      lon -= ( touch.screenX - touchX ) * 0.1;
      lat += ( touch.screenY - touchY ) * 0.1;
      touchX = touch.screenX;
      touchY = touch.screenY;

      userChange = true
      clearTimeout(timer)
      timer = setTimeout(function(){
        userChange = false
      }, 5000)
    }

    function animate() {
      requestAnimationFrame( animate );
      if(!userChange){
        // 自动平移视角，改变经度
        lon += 0.1;
      }
      lat = Math.max( - 85, Math.min( 85, lat ) );
      phi = THREE.Math.degToRad( 90 - lat );
      theta = THREE.Math.degToRad( lon );
      target.x = Math.sin( phi ) * Math.cos( theta );
      target.y = Math.cos( phi );
      target.z = Math.sin( phi ) * Math.sin( theta );

      camera.lookAt( target );
      renderer.render( scene, camera );
    }

    window.onload = init
  </script>
</body>
</html>
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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/135215