<!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>HTML5 Three.js 3D人偶玩具自动化生产车间动画</title>
<style>
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script>
"use strict";
console.clear();
TweenMax.lagSmoothing(0);
THREE.ImageUtils.crossOrigin = '';
var colors = {
blue: '#4281A4',
green: '#48A9A6',
background: '#D0CBC7',
ground: '#E4DFDA',
yellow: '#D4B483',
red: '#C1666B',
lid: '#B05D62',
skin: '#F5D6BA'
};
var settings = {
openSpeed: 0.8
};
var Utils = {
degToRad: function(degrees) {
return degrees * Math.PI / 180;
}
};
var Stage = (function() {
function Stage() {
// container
this.render = function() {
this.renderer.render(this.scene, this.camera);
};
this.add = function(elem) {
this.scene.add(elem);
};
this.remove = function(elem) {
this.scene.remove(elem);
};
this.container = document.createElement('div');
document.body.appendChild(this.container);
// renderer
this.renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: false
});
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setClearColor(colors.background, 1);
this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
this.container.appendChild(this.renderer.domElement);
// scene
this.scene = new THREE.Scene();
//this.scene.fog = new THREE.Fog( colors.ground, 0, 10);
// camera
var aspect = window.innerWidth / window.innerHeight;
var d = 20;
this.camera = new THREE.OrthographicCamera(-d * aspect, d * aspect, d, -d, -100, 1000);
this.camera.position.x = 30;
this.camera.position.y = 10;
this.camera.position.z = -10;
this.camera.lookAt(new THREE.Vector3(0, 5, 0));
//light
this.light = new THREE.DirectionalLight(0xffffff, 0.5);
this.light.castShadow = true;
this.light.position.set(8, 15, -5);
this.scene.add(this.light);
this.softLight = new THREE.AmbientLight(0xffffff, 0.5);
this.scene.add(this.softLight);
// floor
var width = 500;
var depth = 1000;
var geometry = new THREE.PlaneGeometry(depth, width);
var material = new THREE.MeshBasicMaterial({
color: colors.ground,
shading: THREE.FlatShading
});
var plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -Utils.degToRad(90); //1.57079633;
plane.position.y = 0;
plane.position.z = -width / 2;
this.floor = new THREE.Group();
this.floor.add(plane);
this.scene.add(this.floor);
// group
this.group = new THREE.Group();
this.scene.add(this.group);
}
return Stage;
}());
var Box = (function() {
function Box() {
this.openAnimation = new TimelineMax();
this.closeAnimation = new TimelineMax();
this.dropAnimation = new TimelineMax();
this.fallAnimation = new TimelineMax();
this.setAnimation = function() {
var _this = this;
var speed = 1;
var boxBounceSpeed = speed / 3;
this.openAnimation.clear();
this.openAnimation.stop();
this.openAnimation.to(this.group.position, boxBounceSpeed, {
y: 4,
delay: 0,
ease: Power2.easeInOut
});
this.openAnimation.to(this.group.position, boxBounceSpeed * 2, {
y: 0,
x: 0,
z: 0,
ease: Bounce.easeOut
});
this.openAnimation.to(this.lid.rotation, speed, {
z: 2,
ease: Bounce.easeOut
}, 0);
this.openAnimation.to(this.crank.rotation, speed * 3, {
z: Utils.degToRad(180),
ease: Elastic.easeOut
}, 0);
// -----
this.crankSpeed = 0;
this.crankAnimation = setInterval(function() {
_this.moveCrank();
}, 20);
// -----
this.dropAnimation.clear();
this.dropAnimation.stop();
this.dropAnimation.to(this.group.position, 1, {
y: 0,
delay: 0.5,
ease: Bounce.easeOut
});
// -----
this.fallAnimation.clear();
this.fallAnimation.stop();
this.fallAnimation.to(this.group.position, 1, {
y: -20,
delay: 0.2,
ease: Power3.easeIn
});
this.fallAnimation.to(this.group.rotation, 1, {
x: Utils.degToRad(120),
delay: 0.2,
ease: Power3.easeIn
}, 0);
};
this.moveCrank = function() {
if (this.closed) {
this.crank.rotation.z = this.crank.rotation.z > Utils.degToRad(360) ? 0 : this.crank.rotation.z + this.crankSpeed;
if (this.crankSpeed < 0.1)
this.crankSpeed += 0.005;
}
};
this.add = function(elem) {
this.group.add(elem);
};
this.stopAnimations = function() {
this.openAnimation.stop();
this.closeAnimation.stop();
};
this.open = function(skipAnimation) {
if (skipAnimation === void 0) {
skipAnimation = false;
}
this.closed = false;
//this.stopAnimations();
this.openAnimation.duration(skipAnimation ? 0.1 : 3);
this.openAnimation.restart();
};
this.close = function() {
this.closed = true;
//this.stopAnimations();
this.closeAnimation.duration(3);
this.closeAnimation.restart();
};
this.drop = function(skipAnimation) {
if (skipAnimation === void 0) {
skipAnimation = false;
}
this.dropAnimation.duration(skipAnimation ? 0.1 : 1);
this.dropAnimation.restart();
};
this.fall = function(skipAnimation) {
if (skipAnimation === void 0) {
skipAnimation = false;
}
this.fallAnimation.duration(skipAnimation ? 0.1 : 1);
this.fallAnimation.restart();
};
this.closed = true;
this.group = new THREE.Group();
var material = new THREE.MeshToonMaterial({
color: colors.red
});
var geometry = new THREE.BoxGeometry(4, 1, 4);
var boxBottom = new THREE.Mesh(geometry, material);
boxBottom.position.y = 0.5;
//boxBottom.castShadow = true;
//boxBottom.receiveShadow = true;
var geometry = new THREE.BoxGeometry(6, 1, 6);
var boxBack = new THREE.Mesh(geometry, material);
boxBack.position.y = 2.5;
boxBack.position.x = -2.5;
boxBack.rotation.z = Utils.degToRad(90);
//boxBack.castShadow = true;
//boxBack.receiveShadow = true;
var geometry = new THREE.BoxGeometry(6, 1, 6);
var boxFront = new THREE.Mesh(geometry, material);
boxFront.position.y = 2.5;
HTML5+Three.js实现带3D效果的人偶玩具自动化生产车间动画源码.zip
版权申诉
114 浏览量
2022-11-03
23:52:35
上传
评论
收藏 171KB ZIP 举报
HTML5+Three.js实现带3D效果的人偶玩具自动化生产车间动画源码.zip （3个子文件） 
132686860473281603 
index.html 28KB js 
TweenMax.min.js 110KB three.min.js 493KB资源评论
