<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>太空站3D模型</title>
<style>
html {
overflow: hidden;
touch-action: none;
content-zooming: none;
}
body {
width: 100%;
height: 100%;
background: #eee;
margin: 0;
padding: 0;
}
#screen {
position: absolute;
width: 100%;
height: 100%;
perspective: 300px;
background: #ddd;
cursor: pointer;
}
#world {
position: absolute;
left: 50%;
top: 50%;
transform-style: preserve-3d;
pointer-events: none;
}
#world .cube {
position: absolute;
transform-style: preserve-3d;
}
#world .face {
position: absolute;
backface-visibility: hidden;
}
</style>
</head>
<body>
<div id="screen">
<div id="world"></div>
</div>
<script>
~ function() {
'use strict';
function run() {
requestAnimationFrame(run);
r += 0.2;
if (pointer.isDown) {
cx += (pointer.x - pointer.xb);
cy -= (pointer.y - pointer.yb);
}
dx += (cx - dx) * 0.05;
dy += (cy - dy) * 0.05;
worldcss.transform = 'translateZ(-130px) rotateX(' + (-90 + dy * 0.5) + 'deg) rotateZ(' + (dx * 0.5 + r) + 'deg)';
screen.style.background = 'hsl(0,0%,' + (90 * Math.cos(dy / 100)) + '%)';
pointer.xb = pointer.x;
pointer.yb = pointer.y;
}
var world = document.getElementById('world');
var worldcss = world.style;
var screen = document.getElementById('screen');
var r = 0,
dx = 0,
dy = 0,
cx = 0,
cy = 0;
var pointer = {
x: 0,
y: 0,
xb: 0,
yb: 0,
isDown: false,
add: function(elem, events, fn) {
for (var i = 0, e = events.split(','); i < e.length; i++) {
elem.addEventListener(e[i], fn.bind(pointer), false);
}
},
pointer: function(e) {
var touchMode = e.targetTouches,
pointer;
if (touchMode) {
e.preventDefault();
pointer = touchMode[0];
} else pointer = e;
this.x = pointer.clientX;
this.y = pointer.clientY;
}
};
pointer.add(window, 'mousemove,touchmove', function(e) {
this.pointer(e);
});
pointer.add(document.getElementById('screen'), 'mousedown,touchstart', function(e) {
this.pointer(e);
this.xb = this.x;
this.yb = this.y;
this.isDown = true;
});
pointer.add(window, 'mouseup,touchend,touchcancel', function(e) {
this.isDown = false;
});
function appendChild(elem, attributes, css) {
var child = document.createElement('div');
if (attributes)
for (var i in attributes) child.setAttribute(i, attributes[i]);
if (css)
for (var i in css) child.style[i] = css[i];
elem.appendChild(child);
return child;
}
function createCube(cx, cy, cz, length, width, height, level) {
var x = -cy,
y = -cx,
z = cz;
var l = length + 'px',
w = width + 'px',
h = height + 'px';
var cube = appendChild(world, {
class: 'cube'
}, {
transform: 'translate3d(' + (x - width / 2) + 'px, ' + (y - length / 2) + 'px, ' + (z - height / 2) + 'px)'
});
appendChild(cube, {
class: 'face'
}, {
width: w,
height: l,
background: '#333',
transform: 'rotateX(180deg)'
});
appendChild(cube, {
class: 'face'
}, {
width: w,
height: l,
background: '#333',
transform: 'translateZ(' + (height) + 'px)'
});
appendChild(cube, {
class: 'face'
}, {
width: h,
height: l,
background: '#fff',
transform: 'translateX(' + (-height / 2) + 'px) translateZ(' + (height / 2) + 'px) rotateY(-90deg)'
});
appendChild(cube, {
class: 'face'
}, {
width: h,
height: l,
background: '#fff',
transform: 'translateX(' + (-height / 2 + width) + 'px) translateZ(' + (height / 2) + 'px) rotateY(90deg)'
});
appendChild(cube, {
class: 'face'
}, {
width: w,
height: h,
background: '#aaa',
transform: 'translateZ(' + (height / 2) + 'px) translateY(' + (length - height / 2) + 'px) rotateX(-90deg)'
});
appendChild(cube, {
class: 'face'
}, {
width: w,
height: h,
background: '#aaa',
transform: 'translateZ(' + (height / 2) + 'px) translateY(' + (-height / 2) + 'px) rotateX(90deg)'
});
if (level) {
createCube(cx, cy, cz, level, 6, 6);
createCube(cx, cy, cz, 6, level, 6);
createCube(cx, cy, cz, 6, 6, level);
}
return cube;
}
function init() {
createCube(0, 0, 100, 200, 400, 200, 700);
createCube(200, 0, 100, 50, 50, 400);
createCube(300, 0, 100, 50, 50, 50);
createCube(0, 0, -100, 100, 100, 100);
createCube(0, 0, 300, 100, 100, 100);
createCube(-150, 0, -200, 350, 200, 20);
createCube(-270, 0, 100, 6, 400, 6);
createCube(-270, 0, 100, 50, 50, 50);
createCube(0, 300, 100, 50, 50, 350);
createCube(0, -300, 100, 50, 50, 350);
}
init();
run();
}();
</script>
</body>
</html>
HTML5实现的3D旋转太空站模型动画效果源码.zip
版权申诉
164 浏览量
2022-11-04
23:39:26
上传
评论
收藏 2KB ZIP 举报
HTML5实现的3D旋转太空站模型动画效果源码.zip （1个子文件） 
132689867725236225 
index.html 6KB资源评论
毕业_设计
- 粉丝: 1945
- 资源: 1万+
