<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5鳄鱼嘴巴喷火交互特效 - 【更多源码：www.96flw.com】</title>
<script type='text/javascript' src='js/TweenMax.min.js'></script>
<script type='text/javascript' src='js/three.min.js'></script>
<script type='text/javascript' src='js/OrbitControls.js'></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#world {
background: #652e37;
position:absolute;
width:100%;
height:100%;
overflow:hidden;
}
#instructions{
position:absolute;
width:100%;
top:50%;
margin: auto;
margin-top:120px;
font-family:'Open Sans', sans-serif;
color:#fdde8c;
font-size:.8em;
text-transform: uppercase;
text-align : center;
line-height : 1.5;
user-select: none;
}
.lightInstructions {
color:#f89a78;
font-size:.9em;
}
#credits{
position:absolute;
width:100%;
margin: auto;
bottom:0;
margin-bottom:20px;
font-family:'Open Sans', sans-serif;
color:#f7575f;
font-size:0.6em;
text-transform: uppercase;
text-align : center;
}
#credits a {
color:#f7575f;
}
#power {
position:absolute;
width:100%;
top:50%;
margin: auto;
margin-top:-220px;
font-family:'Open Sans', sans-serif;
color:#481f26;
font-size: 4em;
text-transform: uppercase;
text-align : center;
line-height : 1.5;
user-select: none;
}
</style>
</head>
<body>
<div id="world"></div>
<div id="power">00</div>
<script>
//THREEJS RELATED VARIABLES
var scene,
camera,
controls,
fieldOfView,
aspectRatio,
nearPlane,
farPlane,
shadowLight,
backLight,
light,
renderer,
container;
//SCENE
var env, floor, dragon, pepperBottle,
sneezingRate = 0,
fireRate = 0,
maxSneezingRate = 8,
sneezeDelay = 500,
awaitingSmokeParticles = [],
timeSmoke = 0,
timeFire = 0,
globalSpeedRate = 1,
sneezeTimeout,
powerField;
//SCREEN VARIABLES
var HEIGHT,
WIDTH,
windowHalfX,
windowHalfY,
mousePos = {
x: 0,
y: 0
};
//INIT THREE JS, SCREEN AND MOUSE EVENTS
function init() {
powerField = document.getElementById('power');
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x652e37, 350, 500);
HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;
aspectRatio = WIDTH / HEIGHT;
fieldOfView = 60;
nearPlane = 1;
farPlane = 2000;
camera = new THREE.PerspectiveCamera(
fieldOfView,
aspectRatio,
nearPlane,
farPlane);
camera.position.x = -300;
camera.position.z = 300;
camera.position.y = 100;
camera.lookAt(new THREE.Vector3(0, 0, 0));
renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(WIDTH, HEIGHT);
renderer.shadowMapEnabled = true;
container = document.getElementById('world');
container.appendChild(renderer.domElement);
windowHalfX = WIDTH / 2;
windowHalfY = HEIGHT / 2;
window.addEventListener('resize', onWindowResize, false);
document.addEventListener('mouseup', handleMouseUp, false);
document.addEventListener('touchend', handleTouchEnd, false);
//*
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minPolarAngle = -Math.PI / 2;
controls.maxPolarAngle = Math.PI / 2;
controls.noZoom = true;
controls.noPan = true;
//*/
}
function onWindowResize() {
HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;
windowHalfX = WIDTH / 2;
windowHalfY = HEIGHT / 2;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
}
function handleMouseUp(event) {
if (sneezeTimeout) clearTimeout(sneezeTimeout);
sneezingRate += (maxSneezingRate - sneezingRate) / 10;
powerField.innerHTML = parseInt(sneezingRate*100/maxSneezingRate);
dragon.prepareToSneeze(sneezingRate);
sneezeTimeout = setTimeout(sneeze, sneezeDelay*globalSpeedRate);
dragon.isSneezing = true;
}
function sneeze() {
dragon.sneeze(sneezingRate);
sneezingRate = 0;
powerField.innerHTML = "00";
}
function handleTouchEnd(event) {
if (sneezeTimeout) clearTimeout(sneezeTimeout);
sneezingRate += (maxSneezingRate - sneezingRate) / 10;
powerField.innerHTML = parseInt(sneezingRate*100/maxSneezingRate);
dragon.prepareToSneeze(sneezingRate);
sneezeTimeout = setTimeout(sneeze, sneezeDelay*globalSpeedRate);
dragon.isSneezing = true;
}
function createLights() {
light = new THREE.HemisphereLight(0xffffff, 0xb3858c, .8);
shadowLight = new THREE.DirectionalLight(0xffffff, .8);
shadowLight.position.set(-100, 100, 50);
shadowLight.castShadow = true;
shadowLight.shadowDarkness = .15;
backLight = new THREE.DirectionalLight(0xffffff, .4);
backLight.position.set(200, 100, 100);
backLight.shadowDarkness = .1;
backLight.castShadow = true;
scene.add(backLight);
scene.add(light);
scene.add(shadowLight);
}
Dragon = function() {
this.tailAmplitude = 3;
this.tailAngle = 0;
this.tailSpeed = .07;
this.wingAmplitude = Math.PI / 8;
this.wingAngle = 0;
this.wingSpeed = 0.1
this.isSneezing = false;
this.threegroup = new THREE.Group(); // this is a sort of container that will hold all the meshes and will be added to the scene;
// Materials
var greenMat = new THREE.MeshLambertMaterial({
color: 0x5da683,
shading: THREE.FlatShading
});
var lightGreenMat = new THREE.MeshLambertMaterial({
color: 0x95c088,
shading: THREE.FlatShading
});
var yellowMat = new THREE.MeshLambertMaterial({
color: 0xfdde8c,
shading: THREE.FlatShading
});
var redMat = new THREE.MeshLambertMaterial({
color: 0xcb3e4c,
shading: THREE.FlatShading
});
var whiteMat = new THREE.MeshLambertMaterial({
color: 0xfaf3d7,
shading: THREE.FlatShading
});
var brownMat = new THREE.MeshLambertMaterial({
color: 0x874a5c,
shading: THREE.FlatShading
});
var blackMat = new THREE.MeshLambertMaterial({
color: 0x403133,
shading: THREE.FlatShading
});
var pinkMat = new THREE.MeshLambertMaterial({
color: 0xd0838e,
shading: THREE.FlatShading
});
// body
this.body = new THREE.Group();
this.belly = makeCube(greenMat, 30, 30, 40, 0, 0, 0, 0, 0, Math.PI / 4);
// Wings
this.wingL = makeCube(yellowMat, 5, 30, 20, 15, 15, 0, -Math.PI / 4, 0, -Math.PI / 4);
this.wingL.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 15, 10));
this.wingR = this.wingL.clone();
this.wingR.position.x = -this.wingL.position.x;
this.wingR.rotation.z = -this.wingL.rotation.z;
// pike body
var pikeBodyGeom = new THREE.CylinderGeometry(0, 10, 10, 4, 1);
this.pikeBody1 = new THREE.Mesh(pikeBodyGeom, greenMat);
this.pikeBody1.scale.set(.2, 1, 1);
this.pikeBody1.position.z = 10;
this.pikeBody1.position.y = 26;
this.pikeBody2 = this.pikeBody1.clone();
this.pikeBody2.position.z = 0
this.pikeBody3 = this.pikeBody1.clone();
this.pikeBody3.position.z = -10;
// tail
this.tail = new THREE.Group();
this.tail.position.z = -20;
this.tail.position.y = 10;
var tailMat = new THREE.LineBasicMaterial({
color: 0x5da683,
linewidth: 5
});
var tailGeom = new THREE.Geometry();
tailGeom.vertices.push(
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, 5, -10),
new THREE.Vector3(0, -5, -20),
new THREE.Vector3(0, 0, -30)
);
this.tailLine = new THREE.Line(tailGeom, tailMat);
// pike
var pikeGeom = new THREE.CylinderGeometry(0, 10, 10, 4, 1);
pikeGeom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
this.tailPike = new THREE.Mesh(pikeGeom, yellowMat);
this.tailPike.scale.set(.2, 1, 1);
this.tailPike.position.z = -35;
this.tailPike.position.y = 0;
this.tail.add(this.tailLine);
this.tail.add(this.tailPike);
this.body.add(this.belly);
this.body.add(this.wingL);
this.body.add(this.wingR);
this.body.add(this.tail);
this.body.add(this.pikeBody1);
this.body.add(this.pikeBody2);
this.body.add(this.pikeBody3);
// head
this.head = new THREE.Group();
// head face
this.face = makeCube(
HTML5鳄鱼嘴巴喷火交互特效.zip
58 浏览量
2023-11-02
22:59:03
上传
评论
收藏 157KB ZIP 举报
HTML5鳄鱼嘴巴喷火交互特效.zip （4个子文件） 
jiaoben6670 js 
OrbitControls.js 17KB three.min.js 485KB TweenMax.min.js 101KB
index.html 25KB资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5837
最新资源
- 随机森林RF葡萄酒分类，随机森林二分类（代码完整，数据齐全）
- 香蕉新鲜度等级识别香蕉成熟度识别分类数据集1186张3类别.7z
- [咒术回战][18][贤者][中文][1080P].mp4
- 香蕉成熟度识别分类数据集13478张4类别.7z
- 安卓Android图书馆座位占座app设计可导入Studio源码案例设计.zip
- 安卓Android汽车票售票订票app设计可导入Studio源码案例设计.zip
- 安卓android高校开放式实验室管理app可导入Studio源码案例设计.zip
- 安卓Android车辆运输信息管理App可升级Studio源码案例设计.zip
- Android Studio移动应用开发.zip
- android studio-GIT.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
