JSDM

HTML

 
1

CSS

xxxxxxxxxx
22
 
1
      body {
2
        background-color: #FFF;
3
        margin: 0;
4
        cursor: move;
5
        overflow: hidden;
6
      }
7
8
      a {
9
        color: #ffffff;
10
      }
11
12
      #info {
13
        position: absolute;
14
        width: 100%;
15
        color: #ffffff;
16
        padding: 5px;
17
        font-family: Monospace;
18
        font-size: 13px;
19
        font-weight: bold;
20
        text-align: center;
21
        z-index: 1;
22
      }
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
127
 
1
var camera, scene, renderer;
2
var geometry, material, mesh;
3
var target = new THREE.Vector3();
4
var lon = 90, lat = 0;
5
var phi = 0, theta = 0;
6
var touchX, touchY;
7
8
init();
9
animate();
10
11
function init() {
12
  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
13
  scene = new THREE.Scene();
14
  var sides = [
15
    {
16
      url: 'https://d13yacurqjgara.cloudfront.net/users/165589/screenshots/947782/attachments/107093/flat-ui.png',
17
      position: [ -512, 0, 0 ],
18
      rotation: [ 0, Math.PI / 2, 0 ]
19
    },
20
    {
21
      url: 'http://cdn.designfreebies.com/wp-content/uploads/2013/03/flat-ui-blog-large-1.gif',
22
      position: [ 512, 0, 0 ],
23
      rotation: [ 0, -Math.PI / 2, 0 ]
24
    },
25
    {
26
      url: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkFBQoFBQUFBQ8ICQUKFBEWFhQRExMYHCggGBolGxMTITEhJSkrLi4uFx8zODMsNygtLisBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAK8BHwMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAAB//EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AuIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/Z',
27
      position: [ 0,  512, 0 ],
28
      rotation: [ Math.PI / 2, 0, Math.PI ]
29
    },
30
    {
31
      url: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkFBQoFBQUFBQ8ICQUKFBEWFhQRExMYHCggGBolGxMTITEhJSkrLi4uFx8zODMsNygtLisBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAK8BHwMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAAB//EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AuIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/Z',
32
      position: [ 0, -512, 0 ],
33
      rotation: [ - Math.PI / 2, 0, Math.PI ]
34
    },
35
    {
36
      url: 'http://inspirationhut.net/wp-content/uploads/2013/08/42.png',
37
      position: [ 0, 0,  512 ],
38
      rotation: [ 0, Math.PI, 0 ]
39
    },
40
    {
41
      url: 'http://inspirationhut.net/wp-content/uploads/2013/08/42.png',
42
      position: [ 0, 0, -512 ],
43
      rotation: [ 0, 0, 0 ]
44
    }
45
  ];
46
47
  for ( var i = 0; i < sides.length; i ++ ) {
48
    var side = sides[ i ];
49
    var element = document.createElement( 'img' );
50
    element.width = 1026; // 2 pixels extra to close the gap.
51
    element.src = side.url;
52
53
    var object = new THREE.CSS3DObject( element );
54
    object.position.fromArray( side.position );
55
    object.rotation.fromArray( side.rotation );
56
    scene.add( object );
57
58
  }
59
60
  renderer = new THREE.CSS3DRenderer();
61
  renderer.setSize( window.innerWidth, window.innerHeight );
62
  document.body.appendChild( renderer.domElement );
63
  document.addEventListener( 'mousedown', onDocumentMouseDown, false );
64
  document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
65
  document.addEventListener( 'touchstart', onDocumentTouchStart, false );
66
  document.addEventListener( 'touchmove', onDocumentTouchMove, false );
67
  window.addEventListener( 'resize', onWindowResize, false );
68
}
69
70
function onWindowResize() {
71
  camera.aspect = window.innerWidth / window.innerHeight;
72
  camera.updateProjectionMatrix();
73
  renderer.setSize( window.innerWidth, window.innerHeight );
74
}
75
76
function onDocumentMouseDown( event ) {
77
  event.preventDefault();
78
  document.addEventListener( 'mousemove', onDocumentMouseMove, false );
79
  document.addEventListener( 'mouseup', onDocumentMouseUp, false );
80
}
81
82
function onDocumentMouseMove( event ) {
83
  var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
84
  var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
85
  lon -= movementX * 0.1;
86
  lat += movementY * 0.1;
87
}
88
89
function onDocumentMouseUp( event ) {
90
  document.removeEventListener( 'mousemove', onDocumentMouseMove );
91
  document.removeEventListener( 'mouseup', onDocumentMouseUp );
92
}
93
94
function onDocumentMouseWheel( event ) {
95
  camera.fov -= event.wheelDeltaY * 0.05;
96
  camera.updateProjectionMatrix();
97
}
98
99
function onDocumentTouchStart( event ) {
100
  event.preventDefault();
101
  var touch = event.touches[ 0 ];
102
  touchX = touch.screenX;
103
  touchY = touch.screenY;
104
}
105
106
function onDocumentTouchMove( event ) {
107
  event.preventDefault();
108
  var touch = event.touches[ 0 ];
109
  lon -= ( touch.screenX - touchX ) * 0.1;
110
  lat += ( touch.screenY - touchY ) * 0.1;
111
  touchX = touch.screenX;
112
  touchY = touch.screenY;
113
114
}
115
116
function animate() {
117
  requestAnimationFrame( animate );
118
  lon +=  0.0;
119
  lat = Math.max( - 85, Math.min( 85, lat ) );
120
  phi = THREE.Math.degToRad( 90 - lat );
121
  theta = THREE.Math.degToRad( lon );
122
  target.x = Math.sin( phi ) * Math.cos( theta );
123
  target.y = Math.cos( phi );
124
  target.z = Math.sin( phi ) * Math.sin( theta );
125
  camera.lookAt( target );
126
  renderer.render( scene, camera );
127
}
必须是有效的URL
请输入有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................