no99
1 month ago
28 changed files with 3971 additions and 67 deletions
-
3README.md
-
2index.html
-
12package-lock.json
-
1package.json
-
BINpublic/img/edifier.jpg
-
BINpublic/img/huawei.png
-
BINpublic/img/ipad.jpg
-
BINpublic/img/kindle.jpg
-
BINpublic/img/mbp.jpg
-
BINpublic/img/secrit.jpg
-
BINpublic/img/spark.jpg
-
11src/assets/css/animate.min.css
-
BINsrc/assets/img/bg.png
-
BINsrc/assets/img/展开.png
-
BINsrc/assets/img/待揭秘.png
-
BINsrc/assets/img/抽奖按钮.png
-
BINsrc/assets/img/麒麟.png
-
BINsrc/data/music.mp3
-
22src/main.js
-
5src/router/index.js
-
56src/style.css
-
320src/utils/CSS3DRenderer.js
-
517src/utils/TrackballControls.js
-
55src/utils/config.js
-
260src/utils/prizeList.js
-
957src/utils/three.min.js
-
1src/utils/tween.min.js
-
1816src/views/choujiang/hxl-cj/cj.vue
|
After Width: 198 | Height: 198 | Size: 23 KiB |
|
After Width: 200 | Height: 200 | Size: 49 KiB |
|
After Width: 220 | Height: 220 | Size: 44 KiB |
|
After Width: 289 | Height: 289 | Size: 42 KiB |
|
After Width: 220 | Height: 220 | Size: 6.9 KiB |
|
After Width: 224 | Height: 224 | Size: 12 KiB |
|
After Width: 260 | Height: 260 | Size: 37 KiB |
11
src/assets/css/animate.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
After Width: 1920 | Height: 1080 | Size: 1.8 MiB |
|
After Width: 40 | Height: 34 | Size: 2.9 KiB |
|
After Width: 383 | Height: 110 | Size: 47 KiB |
|
After Width: 259 | Height: 95 | Size: 8.1 KiB |
|
After Width: 252 | Height: 335 | Size: 104 KiB |
@ -1,13 +1,15 @@ |
|||||
import { createApp } from 'vue' |
|
||||
import { createPinia } from 'pinia' |
|
||||
import './style.css' |
|
||||
import App from './App.vue' |
|
||||
import router from './router' |
|
||||
|
import { createApp } from "vue"; |
||||
|
import { createPinia } from "pinia"; |
||||
|
import "./style.css"; |
||||
|
import App from "./App.vue"; |
||||
|
import router from "./router"; |
||||
|
import ElementPlus from "element-plus"; |
||||
|
|
||||
const pinia = createPinia() |
|
||||
|
const pinia = createPinia(); |
||||
|
|
||||
const app = createApp(App) |
|
||||
|
const app = createApp(App); |
||||
|
|
||||
app.use(router) |
|
||||
app.use(pinia) |
|
||||
app.mount('#app') |
|
||||
|
app.use(router); |
||||
|
app.use(ElementPlus); |
||||
|
app.use(pinia); |
||||
|
app.mount("#app"); |
||||
@ -0,0 +1,320 @@ |
|||||
|
/** |
||||
|
* Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs
|
||||
|
* @author mrdoob / http://mrdoob.com/
|
||||
|
* @author yomotsu / https://yomotsu.net/
|
||||
|
*/ |
||||
|
|
||||
|
import * as THREE from "three"; |
||||
|
|
||||
|
export class CSS3DObject extends THREE.Object3D { |
||||
|
constructor(element) { |
||||
|
super(); |
||||
|
|
||||
|
this.element = element; |
||||
|
this.element.style.position = "absolute"; |
||||
|
|
||||
|
this.addEventListener("removed", function () { |
||||
|
if (this.element.parentNode !== null) { |
||||
|
this.element.parentNode.removeChild(this.element); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export class CSS3DSprite extends CSS3DObject { |
||||
|
constructor(element) { |
||||
|
super(element); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//
|
||||
|
|
||||
|
export function CSS3DRenderer() { |
||||
|
console.log("THREE.CSS3DRenderer", THREE.REVISION); |
||||
|
|
||||
|
var _width, _height; |
||||
|
var _widthHalf, _heightHalf; |
||||
|
|
||||
|
var matrix = new THREE.Matrix4(); |
||||
|
|
||||
|
var cache = { |
||||
|
camera: { fov: 0, style: "" }, |
||||
|
objects: new WeakMap(), |
||||
|
}; |
||||
|
|
||||
|
var domElement = document.createElement("div"); |
||||
|
domElement.style.overflow = "hidden"; |
||||
|
|
||||
|
this.domElement = domElement; |
||||
|
|
||||
|
var cameraElement = document.createElement("div"); |
||||
|
|
||||
|
cameraElement.style.WebkitTransformStyle = "preserve-3d"; |
||||
|
cameraElement.style.transformStyle = "preserve-3d"; |
||||
|
|
||||
|
domElement.appendChild(cameraElement); |
||||
|
|
||||
|
var isIE = /Trident/i.test(navigator.userAgent); |
||||
|
|
||||
|
this.getSize = function () { |
||||
|
return { |
||||
|
width: _width, |
||||
|
height: _height, |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
this.setSize = function (width, height) { |
||||
|
_width = width; |
||||
|
_height = height; |
||||
|
_widthHalf = _width / 2; |
||||
|
_heightHalf = _height / 2; |
||||
|
|
||||
|
domElement.style.width = width + "px"; |
||||
|
domElement.style.height = height + "px"; |
||||
|
|
||||
|
cameraElement.style.width = width + "px"; |
||||
|
cameraElement.style.height = height + "px"; |
||||
|
}; |
||||
|
|
||||
|
function epsilon(value) { |
||||
|
return Math.abs(value) < 1e-10 ? 0 : value; |
||||
|
} |
||||
|
|
||||
|
function getCameraCSSMatrix(matrix) { |
||||
|
var elements = matrix.elements; |
||||
|
|
||||
|
return ( |
||||
|
"matrix3d(" + |
||||
|
epsilon(elements[0]) + |
||||
|
"," + |
||||
|
epsilon(-elements[1]) + |
||||
|
"," + |
||||
|
epsilon(elements[2]) + |
||||
|
"," + |
||||
|
epsilon(elements[3]) + |
||||
|
"," + |
||||
|
epsilon(elements[4]) + |
||||
|
"," + |
||||
|
epsilon(-elements[5]) + |
||||
|
"," + |
||||
|
epsilon(elements[6]) + |
||||
|
"," + |
||||
|
epsilon(elements[7]) + |
||||
|
"," + |
||||
|
epsilon(elements[8]) + |
||||
|
"," + |
||||
|
epsilon(-elements[9]) + |
||||
|
"," + |
||||
|
epsilon(elements[10]) + |
||||
|
"," + |
||||
|
epsilon(elements[11]) + |
||||
|
"," + |
||||
|
epsilon(elements[12]) + |
||||
|
"," + |
||||
|
epsilon(-elements[13]) + |
||||
|
"," + |
||||
|
epsilon(elements[14]) + |
||||
|
"," + |
||||
|
epsilon(elements[15]) + |
||||
|
")" |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
function getObjectCSSMatrix(matrix, cameraCSSMatrix) { |
||||
|
var elements = matrix.elements; |
||||
|
var matrix3d = |
||||
|
"matrix3d(" + |
||||
|
epsilon(elements[0]) + |
||||
|
"," + |
||||
|
epsilon(elements[1]) + |
||||
|
"," + |
||||
|
epsilon(elements[2]) + |
||||
|
"," + |
||||
|
epsilon(elements[3]) + |
||||
|
"," + |
||||
|
epsilon(-elements[4]) + |
||||
|
"," + |
||||
|
epsilon(-elements[5]) + |
||||
|
"," + |
||||
|
epsilon(-elements[6]) + |
||||
|
"," + |
||||
|
epsilon(-elements[7]) + |
||||
|
"," + |
||||
|
epsilon(elements[8]) + |
||||
|
"," + |
||||
|
epsilon(elements[9]) + |
||||
|
"," + |
||||
|
epsilon(elements[10]) + |
||||
|
"," + |
||||
|
epsilon(elements[11]) + |
||||
|
"," + |
||||
|
epsilon(elements[12]) + |
||||
|
"," + |
||||
|
epsilon(elements[13]) + |
||||
|
"," + |
||||
|
epsilon(elements[14]) + |
||||
|
"," + |
||||
|
epsilon(elements[15]) + |
||||
|
")"; |
||||
|
|
||||
|
if (isIE) { |
||||
|
return ( |
||||
|
"translate(-50%,-50%)" + |
||||
|
"translate(" + |
||||
|
_widthHalf + |
||||
|
"px," + |
||||
|
_heightHalf + |
||||
|
"px)" + |
||||
|
cameraCSSMatrix + |
||||
|
matrix3d |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
return "translate(-50%,-50%)" + matrix3d; |
||||
|
} |
||||
|
|
||||
|
function renderObject(object, camera, cameraCSSMatrix) { |
||||
|
if (object instanceof CSS3DObject) { |
||||
|
var style; |
||||
|
|
||||
|
if (object instanceof CSS3DSprite) { |
||||
|
// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
|
||||
|
|
||||
|
matrix.copy(camera.matrixWorldInverse); |
||||
|
matrix.transpose(); |
||||
|
matrix.copyPosition(object.matrixWorld); |
||||
|
matrix.scale(object.scale); |
||||
|
|
||||
|
matrix.elements[3] = 0; |
||||
|
matrix.elements[7] = 0; |
||||
|
matrix.elements[11] = 0; |
||||
|
matrix.elements[15] = 1; |
||||
|
|
||||
|
style = getObjectCSSMatrix(matrix, cameraCSSMatrix); |
||||
|
} else { |
||||
|
style = getObjectCSSMatrix(object.matrixWorld, cameraCSSMatrix); |
||||
|
} |
||||
|
|
||||
|
var element = object.element; |
||||
|
var cachedObject = cache.objects.get(object); |
||||
|
|
||||
|
if (cachedObject === undefined || cachedObject.style !== style) { |
||||
|
element.style.WebkitTransform = style; |
||||
|
element.style.transform = style; |
||||
|
|
||||
|
var objectData = { style: style }; |
||||
|
|
||||
|
if (isIE) { |
||||
|
objectData.distanceToCameraSquared = getDistanceToSquared( |
||||
|
camera, |
||||
|
object |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
cache.objects.set(object, objectData); |
||||
|
} |
||||
|
|
||||
|
if (element.parentNode !== cameraElement) { |
||||
|
cameraElement.appendChild(element); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
for (var i = 0, l = object.children.length; i < l; i++) { |
||||
|
renderObject(object.children[i], camera, cameraCSSMatrix); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
var getDistanceToSquared = (function () { |
||||
|
var a = new THREE.Vector3(); |
||||
|
var b = new THREE.Vector3(); |
||||
|
|
||||
|
return function (object1, object2) { |
||||
|
a.setFromMatrixPosition(object1.matrixWorld); |
||||
|
b.setFromMatrixPosition(object2.matrixWorld); |
||||
|
|
||||
|
return a.distanceToSquared(b); |
||||
|
}; |
||||
|
})(); |
||||
|
|
||||
|
function filterAndFlatten(scene) { |
||||
|
var result = []; |
||||
|
|
||||
|
scene.traverse(function (object) { |
||||
|
if (object instanceof THREE.CSS3DObject) result.push(object); |
||||
|
}); |
||||
|
|
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
function zOrder(scene) { |
||||
|
var sorted = filterAndFlatten(scene).sort(function (a, b) { |
||||
|
var distanceA = cache.objects.get(a).distanceToCameraSquared; |
||||
|
var distanceB = cache.objects.get(b).distanceToCameraSquared; |
||||
|
|
||||
|
return distanceA - distanceB; |
||||
|
}); |
||||
|
|
||||
|
var zMax = sorted.length; |
||||
|
|
||||
|
for (var i = 0, l = sorted.length; i < l; i++) { |
||||
|
sorted[i].element.style.zIndex = zMax - i; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.render = function (scene, camera) { |
||||
|
var fov = camera.projectionMatrix.elements[5] * _heightHalf; |
||||
|
|
||||
|
if (cache.camera.fov !== fov) { |
||||
|
if (camera.isPerspectiveCamera) { |
||||
|
domElement.style.WebkitPerspective = fov + "px"; |
||||
|
domElement.style.perspective = fov + "px"; |
||||
|
} |
||||
|
|
||||
|
cache.camera.fov = fov; |
||||
|
} |
||||
|
|
||||
|
scene.updateMatrixWorld(); |
||||
|
|
||||
|
if (camera.parent === null) camera.updateMatrixWorld(); |
||||
|
|
||||
|
if (camera.isOrthographicCamera) { |
||||
|
var tx = -(camera.right + camera.left) / 2; |
||||
|
var ty = (camera.top + camera.bottom) / 2; |
||||
|
} |
||||
|
|
||||
|
var cameraCSSMatrix = camera.isOrthographicCamera |
||||
|
? "scale(" + |
||||
|
fov + |
||||
|
")" + |
||||
|
"translate(" + |
||||
|
epsilon(tx) + |
||||
|
"px," + |
||||
|
epsilon(ty) + |
||||
|
"px)" + |
||||
|
getCameraCSSMatrix(camera.matrixWorldInverse) |
||||
|
: "translateZ(" + |
||||
|
fov + |
||||
|
"px)" + |
||||
|
getCameraCSSMatrix(camera.matrixWorldInverse); |
||||
|
|
||||
|
var style = |
||||
|
cameraCSSMatrix + "translate(" + _widthHalf + "px," + _heightHalf + "px)"; |
||||
|
|
||||
|
if (cache.camera.style !== style && !isIE) { |
||||
|
cameraElement.style.WebkitTransform = style; |
||||
|
cameraElement.style.transform = style; |
||||
|
|
||||
|
cache.camera.style = style; |
||||
|
} |
||||
|
|
||||
|
renderObject(scene, camera, cameraCSSMatrix); |
||||
|
|
||||
|
if (isIE) { |
||||
|
// IE10 and 11 does not support 'preserve-3d'.
|
||||
|
// Thus, z-order in 3D will not work.
|
||||
|
// We have to calc z-order manually and set CSS z-index for IE.
|
||||
|
// FYI: z-index can't handle object intersection
|
||||
|
zOrder(scene); |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
@ -0,0 +1,517 @@ |
|||||
|
import * as THREE from 'three'; |
||||
|
|
||||
|
// 创建 TrackballControls 类并导出
|
||||
|
export class TrackballControls extends THREE.EventDispatcher { |
||||
|
constructor(object, domElement) { |
||||
|
super(); // 调用父类构造函数
|
||||
|
|
||||
|
var _this = this; |
||||
|
var STATE = { NONE: -1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 }; |
||||
|
|
||||
|
this.object = object; |
||||
|
this.domElement = (domElement !== undefined) ? domElement : document; |
||||
|
|
||||
|
// API
|
||||
|
this.enabled = true; |
||||
|
this.screen = { left: 0, top: 0, width: 0, height: 0 }; |
||||
|
this.rotateSpeed = 1.0; |
||||
|
this.zoomSpeed = 1.2; |
||||
|
this.panSpeed = 0.3; |
||||
|
this.noRotate = false; |
||||
|
this.noZoom = false; |
||||
|
this.noPan = false; |
||||
|
this.staticMoving = false; |
||||
|
this.dynamicDampingFactor = 0.2; |
||||
|
this.minDistance = 0; |
||||
|
this.maxDistance = Infinity; |
||||
|
this.keys = [65 /*A*/, 83 /*S*/, 68 /*D*/]; |
||||
|
|
||||
|
// internals
|
||||
|
this.target = new THREE.Vector3(); |
||||
|
|
||||
|
var EPS = 0.000001; |
||||
|
|
||||
|
var lastPosition = new THREE.Vector3(); |
||||
|
|
||||
|
var _state = STATE.NONE, |
||||
|
_prevState = STATE.NONE, |
||||
|
_eye = new THREE.Vector3(), |
||||
|
_movePrev = new THREE.Vector2(), |
||||
|
_moveCurr = new THREE.Vector2(), |
||||
|
_lastAxis = new THREE.Vector3(), |
||||
|
_lastAngle = 0, |
||||
|
_zoomStart = new THREE.Vector2(), |
||||
|
_zoomEnd = new THREE.Vector2(), |
||||
|
_touchZoomDistanceStart = 0, |
||||
|
_touchZoomDistanceEnd = 0, |
||||
|
_panStart = new THREE.Vector2(), |
||||
|
_panEnd = new THREE.Vector2(); |
||||
|
|
||||
|
// for reset
|
||||
|
|
||||
|
this.target0 = this.target.clone(); |
||||
|
this.position0 = this.object.position.clone(); |
||||
|
this.up0 = this.object.up.clone(); |
||||
|
|
||||
|
// events
|
||||
|
|
||||
|
var changeEvent = { type: "change" }; |
||||
|
var startEvent = { type: "start" }; |
||||
|
var endEvent = { type: "end" }; |
||||
|
|
||||
|
// methods
|
||||
|
|
||||
|
this.handleResize = function () { |
||||
|
if (this.domElement === document) { |
||||
|
this.screen.left = 0; |
||||
|
this.screen.top = 0; |
||||
|
this.screen.width = window.innerWidth; |
||||
|
this.screen.height = window.innerHeight; |
||||
|
} else { |
||||
|
var box = this.domElement.getBoundingClientRect(); |
||||
|
// adjustments come from similar code in the jquery offset() function
|
||||
|
var d = this.domElement.ownerDocument.documentElement; |
||||
|
this.screen.left = box.left + window.pageXOffset - d.clientLeft; |
||||
|
this.screen.top = box.top + window.pageYOffset - d.clientTop; |
||||
|
this.screen.width = box.width; |
||||
|
this.screen.height = box.height; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
var getMouseOnScreen = (function () { |
||||
|
var vector = new THREE.Vector2(); |
||||
|
|
||||
|
return function getMouseOnScreen(pageX, pageY) { |
||||
|
vector.set( |
||||
|
(pageX - _this.screen.left) / _this.screen.width, |
||||
|
(pageY - _this.screen.top) / _this.screen.height |
||||
|
); |
||||
|
|
||||
|
return vector; |
||||
|
}; |
||||
|
})(); |
||||
|
|
||||
|
var getMouseOnCircle = (function () { |
||||
|
var vector = new THREE.Vector2(); |
||||
|
|
||||
|
return function getMouseOnCircle(pageX, pageY) { |
||||
|
vector.set( |
||||
|
(pageX - _this.screen.width * 0.5 - _this.screen.left) / |
||||
|
(_this.screen.width * 0.5), |
||||
|
(_this.screen.height + 2 * (_this.screen.top - pageY)) / |
||||
|
_this.screen.width // screen.width intentional
|
||||
|
); |
||||
|
|
||||
|
return vector; |
||||
|
}; |
||||
|
})(); |
||||
|
|
||||
|
this.rotateCamera = (function () { |
||||
|
var axis = new THREE.Vector3(), |
||||
|
quaternion = new THREE.Quaternion(), |
||||
|
eyeDirection = new THREE.Vector3(), |
||||
|
objectUpDirection = new THREE.Vector3(), |
||||
|
objectSidewaysDirection = new THREE.Vector3(), |
||||
|
moveDirection = new THREE.Vector3(), |
||||
|
angle; |
||||
|
|
||||
|
return function rotateCamera() { |
||||
|
moveDirection.set( |
||||
|
_moveCurr.x - _movePrev.x, |
||||
|
_moveCurr.y - _movePrev.y, |
||||
|
0 |
||||
|
); |
||||
|
angle = moveDirection.length(); |
||||
|
|
||||
|
if (angle) { |
||||
|
_eye.copy(_this.object.position).sub(_this.target); |
||||
|
|
||||
|
eyeDirection.copy(_eye).normalize(); |
||||
|
objectUpDirection.copy(_this.object.up).normalize(); |
||||
|
objectSidewaysDirection |
||||
|
.crossVectors(objectUpDirection, eyeDirection) |
||||
|
.normalize(); |
||||
|
|
||||
|
objectUpDirection.setLength(_moveCurr.y - _movePrev.y); |
||||
|
objectSidewaysDirection.setLength(_moveCurr.x - _movePrev.x); |
||||
|
|
||||
|
moveDirection.copy(objectUpDirection.add(objectSidewaysDirection)); |
||||
|
|
||||
|
axis.crossVectors(moveDirection, _eye).normalize(); |
||||
|
|
||||
|
angle *= _this.rotateSpeed; |
||||
|
quaternion.setFromAxisAngle(axis, angle); |
||||
|
|
||||
|
_eye.applyQuaternion(quaternion); |
||||
|
_this.object.up.applyQuaternion(quaternion); |
||||
|
|
||||
|
_lastAxis.copy(axis); |
||||
|
_lastAngle = angle; |
||||
|
} else if (!_this.staticMoving && _lastAngle) { |
||||
|
_lastAngle *= Math.sqrt(1.0 - _this.dynamicDampingFactor); |
||||
|
_eye.copy(_this.object.position).sub(_this.target); |
||||
|
quaternion.setFromAxisAngle(_lastAxis, _lastAngle); |
||||
|
_eye.applyQuaternion(quaternion); |
||||
|
_this.object.up.applyQuaternion(quaternion); |
||||
|
} |
||||
|
|
||||
|
_movePrev.copy(_moveCurr); |
||||
|
}; |
||||
|
})(); |
||||
|
|
||||
|
this.zoomCamera = function () { |
||||
|
var factor; |
||||
|
|
||||
|
if (_state === STATE.TOUCH_ZOOM_PAN) { |
||||
|
factor = _touchZoomDistanceStart / _touchZoomDistanceEnd; |
||||
|
_touchZoomDistanceStart = _touchZoomDistanceEnd; |
||||
|
_eye.multiplyScalar(factor); |
||||
|
} else { |
||||
|
factor = 1.0 + (_zoomEnd.y - _zoomStart.y) * _this.zoomSpeed; |
||||
|
|
||||
|
if (factor !== 1.0 && factor > 0.0) { |
||||
|
_eye.multiplyScalar(factor); |
||||
|
} |
||||
|
|
||||
|
if (_this.staticMoving) { |
||||
|
_zoomStart.copy(_zoomEnd); |
||||
|
} else { |
||||
|
_zoomStart.y += |
||||
|
(_zoomEnd.y - _zoomStart.y) * this.dynamicDampingFactor; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
this.panCamera = (function () { |
||||
|
var mouseChange = new THREE.Vector2(), |
||||
|
objectUp = new THREE.Vector3(), |
||||
|
pan = new THREE.Vector3(); |
||||
|
|
||||
|
return function panCamera() { |
||||
|
mouseChange.copy(_panEnd).sub(_panStart); |
||||
|
|
||||
|
if (mouseChange.lengthSq()) { |
||||
|
mouseChange.multiplyScalar(_eye.length() * _this.panSpeed); |
||||
|
|
||||
|
pan.copy(_eye).cross(_this.object.up).setLength(mouseChange.x); |
||||
|
pan.add(objectUp.copy(_this.object.up).setLength(mouseChange.y)); |
||||
|
|
||||
|
_this.object.position.add(pan); |
||||
|
_this.target.add(pan); |
||||
|
|
||||
|
if (_this.staticMoving) { |
||||
|
_panStart.copy(_panEnd); |
||||
|
} else { |
||||
|
_panStart.add( |
||||
|
mouseChange |
||||
|
.subVectors(_panEnd, _panStart) |
||||
|
.multiplyScalar(_this.dynamicDampingFactor) |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
})(); |
||||
|
|
||||
|
this.checkDistances = function () { |
||||
|
if (!_this.noZoom || !_this.noPan) { |
||||
|
if (_eye.lengthSq() > _this.maxDistance * _this.maxDistance) { |
||||
|
_this.object.position.addVectors( |
||||
|
_this.target, |
||||
|
_eye.setLength(_this.maxDistance) |
||||
|
); |
||||
|
_zoomStart.copy(_zoomEnd); |
||||
|
} |
||||
|
|
||||
|
if (_eye.lengthSq() < _this.minDistance * _this.minDistance) { |
||||
|
_this.object.position.addVectors( |
||||
|
_this.target, |
||||
|
_eye.setLength(_this.minDistance) |
||||
|
); |
||||
|
_zoomStart.copy(_zoomEnd); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
this.update = function () { |
||||
|
_eye.subVectors(_this.object.position, _this.target); |
||||
|
|
||||
|
if (!_this.noRotate) { |
||||
|
_this.rotateCamera(); |
||||
|
} |
||||
|
|
||||
|
if (!_this.noZoom) { |
||||
|
_this.zoomCamera(); |
||||
|
} |
||||
|
|
||||
|
if (!_this.noPan) { |
||||
|
_this.panCamera(); |
||||
|
} |
||||
|
|
||||
|
_this.object.position.addVectors(_this.target, _eye); |
||||
|
|
||||
|
_this.checkDistances(); |
||||
|
|
||||
|
_this.object.lookAt(_this.target); |
||||
|
|
||||
|
if (lastPosition.distanceToSquared(_this.object.position) > EPS) { |
||||
|
_this.dispatchEvent(changeEvent); |
||||
|
|
||||
|
lastPosition.copy(_this.object.position); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
this.reset = function () { |
||||
|
_state = STATE.NONE; |
||||
|
_prevState = STATE.NONE; |
||||
|
|
||||
|
_this.target.copy(_this.target0); |
||||
|
_this.object.position.copy(_this.position0); |
||||
|
_this.object.up.copy(_this.up0); |
||||
|
|
||||
|
_eye.subVectors(_this.object.position, _this.target); |
||||
|
|
||||
|
_this.object.lookAt(_this.target); |
||||
|
|
||||
|
_this.dispatchEvent(changeEvent); |
||||
|
|
||||
|
lastPosition.copy(_this.object.position); |
||||
|
}; |
||||
|
|
||||
|
// listeners
|
||||
|
|
||||
|
function keydown(event) { |
||||
|
if (_this.enabled === false) return; |
||||
|
|
||||
|
window.removeEventListener("keydown", keydown); |
||||
|
|
||||
|
_prevState = _state; |
||||
|
|
||||
|
if (_state !== STATE.NONE) { |
||||
|
return; |
||||
|
} else if ( |
||||
|
event.keyCode === _this.keys[STATE.ROTATE] && |
||||
|
!_this.noRotate |
||||
|
) { |
||||
|
_state = STATE.ROTATE; |
||||
|
} else if (event.keyCode === _this.keys[STATE.ZOOM] && !_this.noZoom) { |
||||
|
_state = STATE.ZOOM; |
||||
|
} else if (event.keyCode === _this.keys[STATE.PAN] && !_this.noPan) { |
||||
|
_state = STATE.PAN; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function keyup(event) { |
||||
|
if (_this.enabled === false) return; |
||||
|
|
||||
|
_state = _prevState; |
||||
|
|
||||
|
window.addEventListener("keydown", keydown, false); |
||||
|
} |
||||
|
|
||||
|
function mousedown(event) { |
||||
|
if (_this.enabled === false) return; |
||||
|
|
||||
|
event.preventDefault(); |
||||
|
event.stopPropagation(); |
||||
|
|
||||
|
if (_state === STATE.NONE) { |
||||
|
_state = event.button; |
||||
|
} |
||||
|
|
||||
|
// 阻止浏览器的默认行为
|
||||
|
return; |
||||
|
|
||||
|
if (_state === STATE.ROTATE && !_this.noRotate) { |
||||
|
_moveCurr.copy(getMouseOnCircle(event.pageX, event.pageY)); |
||||
|
_movePrev.copy(_moveCurr); |
||||
|
} else if (_state === STATE.ZOOM && !_this.noZoom) { |
||||
|
_zoomStart.copy(getMouseOnScreen(event.pageX, event.pageY)); |
||||
|
_zoomEnd.copy(_zoomStart); |
||||
|
} else if (_state === STATE.PAN && !_this.noPan) { |
||||
|
_panStart.copy(getMouseOnScreen(event.pageX, event.pageY)); |
||||
|
_panEnd.copy(_panStart); |
||||
|
} |
||||
|
|
||||
|
document.addEventListener("mousemove", mousemove, false); |
||||
|
document.addEventListener("mouseup", mouseup, false); |
||||
|
|
||||
|
_this.dispatchEvent(startEvent); |
||||
|
} |
||||
|
|
||||
|
function mousemove(event) { |
||||
|
if (_this.enabled === false) return; |
||||
|
|
||||
|
event.preventDefault(); |
||||
|
event.stopPropagation(); |
||||
|
|
||||
|
if (_state === STATE.ROTATE && !_this.noRotate) { |
||||
|
_movePrev.copy(_moveCurr); |
||||
|
_moveCurr.copy(getMouseOnCircle(event.pageX, event.pageY)); |
||||
|
} else if (_state === STATE.ZOOM && !_this.noZoom) { |
||||
|
_zoomEnd.copy(getMouseOnScreen(event.pageX, event.pageY)); |
||||
|
} else if (_state === STATE.PAN && !_this.noPan) { |
||||
|
_panEnd.copy(getMouseOnScreen(event.pageX, event.pageY)); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function mouseup(event) { |
||||
|
if (_this.enabled === false) return; |
||||
|
|
||||
|
event.preventDefault(); |
||||
|
event.stopPropagation(); |
||||
|
|
||||
|
_state = STATE.NONE; |
||||
|
|
||||
|
document.removeEventListener("mousemove", mousemove); |
||||
|
document.removeEventListener("mouseup", mouseup); |
||||
|
_this.dispatchEvent(endEvent); |
||||
|
} |
||||
|
|
||||
|
function mousewheel(event) { |
||||
|
if (_this.enabled === false) return; |
||||
|
|
||||
|
if (_this.noZoom === true) return; |
||||
|
|
||||
|
event.preventDefault(); |
||||
|
event.stopPropagation(); |
||||
|
|
||||
|
return; |
||||
|
|
||||
|
switch (event.deltaMode) { |
||||
|
case 2: |
||||
|
// Zoom in pages
|
||||
|
_zoomStart.y -= event.deltaY * 0.025; |
||||
|
break; |
||||
|
|
||||
|
case 1: |
||||
|
// Zoom in lines
|
||||
|
_zoomStart.y -= event.deltaY * 0.01; |
||||
|
break; |
||||
|
|
||||
|
default: |
||||
|
// undefined, 0, assume pixels
|
||||
|
_zoomStart.y -= event.deltaY * 0.00025; |
||||
|
break; |
||||
|
} |
||||
|
|
||||
|
_this.dispatchEvent(startEvent); |
||||
|
_this.dispatchEvent(endEvent); |
||||
|
} |
||||
|
|
||||
|
function touchstart(event) { |
||||
|
if (_this.enabled === false) return; |
||||
|
|
||||
|
event.preventDefault(); |
||||
|
|
||||
|
switch (event.touches.length) { |
||||
|
case 1: |
||||
|
_state = STATE.TOUCH_ROTATE; |
||||
|
_moveCurr.copy( |
||||
|
getMouseOnCircle(event.touches[0].pageX, event.touches[0].pageY) |
||||
|
); |
||||
|
_movePrev.copy(_moveCurr); |
||||
|
break; |
||||
|
|
||||
|
default: // 2 or more
|
||||
|
_state = STATE.TOUCH_ZOOM_PAN; |
||||
|
var dx = event.touches[0].pageX - event.touches[1].pageX; |
||||
|
var dy = event.touches[0].pageY - event.touches[1].pageY; |
||||
|
_touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( |
||||
|
dx * dx + dy * dy |
||||
|
); |
||||
|
|
||||
|
var x = (event.touches[0].pageX + event.touches[1].pageX) / 2; |
||||
|
var y = (event.touches[0].pageY + event.touches[1].pageY) / 2; |
||||
|
_panStart.copy(getMouseOnScreen(x, y)); |
||||
|
_panEnd.copy(_panStart); |
||||
|
break; |
||||
|
} |
||||
|
|
||||
|
_this.dispatchEvent(startEvent); |
||||
|
} |
||||
|
|
||||
|
function touchmove(event) { |
||||
|
if (_this.enabled === false) return; |
||||
|
|
||||
|
event.preventDefault(); |
||||
|
event.stopPropagation(); |
||||
|
|
||||
|
switch (event.touches.length) { |
||||
|
case 1: |
||||
|
_movePrev.copy(_moveCurr); |
||||
|
_moveCurr.copy( |
||||
|
getMouseOnCircle(event.touches[0].pageX, event.touches[0].pageY) |
||||
|
); |
||||
|
break; |
||||
|
|
||||
|
default: // 2 or more
|
||||
|
var dx = event.touches[0].pageX - event.touches[1].pageX; |
||||
|
var dy = event.touches[0].pageY - event.touches[1].pageY; |
||||
|
_touchZoomDistanceEnd = Math.sqrt(dx * dx + dy * dy); |
||||
|
|
||||
|
var x = (event.touches[0].pageX + event.touches[1].pageX) / 2; |
||||
|
var y = (event.touches[0].pageY + event.touches[1].pageY) / 2; |
||||
|
_panEnd.copy(getMouseOnScreen(x, y)); |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function touchend(event) { |
||||
|
if (_this.enabled === false) return; |
||||
|
|
||||
|
switch (event.touches.length) { |
||||
|
case 0: |
||||
|
_state = STATE.NONE; |
||||
|
break; |
||||
|
|
||||
|
case 1: |
||||
|
_state = STATE.TOUCH_ROTATE; |
||||
|
_moveCurr.copy( |
||||
|
getMouseOnCircle(event.touches[0].pageX, event.touches[0].pageY) |
||||
|
); |
||||
|
_movePrev.copy(_moveCurr); |
||||
|
break; |
||||
|
} |
||||
|
|
||||
|
_this.dispatchEvent(endEvent); |
||||
|
} |
||||
|
|
||||
|
function contextmenu(event) { |
||||
|
if (_this.enabled === false) return; |
||||
|
|
||||
|
event.preventDefault(); |
||||
|
} |
||||
|
|
||||
|
this.dispose = function () { |
||||
|
this.domElement.removeEventListener("contextmenu", contextmenu, false); |
||||
|
this.domElement.removeEventListener("mousedown", mousedown, false); |
||||
|
this.domElement.removeEventListener("wheel", mousewheel, false); |
||||
|
|
||||
|
this.domElement.removeEventListener("touchstart", touchstart, false); |
||||
|
this.domElement.removeEventListener("touchend", touchend, false); |
||||
|
this.domElement.removeEventListener("touchmove", touchmove, false); |
||||
|
|
||||
|
document.removeEventListener("mousemove", mousemove, false); |
||||
|
document.removeEventListener("mouseup", mouseup, false); |
||||
|
|
||||
|
window.removeEventListener("keydown", keydown, false); |
||||
|
window.removeEventListener("keyup", keyup, false); |
||||
|
}; |
||||
|
|
||||
|
this.domElement.addEventListener("contextmenu", contextmenu, false); |
||||
|
this.domElement.addEventListener("mousedown", mousedown, false); |
||||
|
this.domElement.addEventListener("wheel", mousewheel, false); |
||||
|
|
||||
|
this.domElement.addEventListener("touchstart", touchstart, false); |
||||
|
this.domElement.addEventListener("touchend", touchend, false); |
||||
|
this.domElement.addEventListener("touchmove", touchmove, false); |
||||
|
|
||||
|
window.addEventListener("keydown", keydown, false); |
||||
|
window.addEventListener("keyup", keyup, false); |
||||
|
|
||||
|
this.handleResize(); |
||||
|
|
||||
|
// force an update at start
|
||||
|
this.update(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,55 @@ |
|||||
|
const NUMBER_MATRIX = [ |
||||
|
[ |
||||
|
//H
|
||||
|
[0, 0], |
||||
|
[3, 0], |
||||
|
[0, 1], |
||||
|
[3, 1], |
||||
|
[0, 2], |
||||
|
[1, 2], |
||||
|
[2, 2], |
||||
|
[3, 2], |
||||
|
[0, 3], |
||||
|
[3, 3], |
||||
|
[0, 4], |
||||
|
[3, 4], |
||||
|
], |
||||
|
[ |
||||
|
//L
|
||||
|
[0, 0], |
||||
|
[0, 1], |
||||
|
[0, 2], |
||||
|
[0, 3], |
||||
|
[0, 4], |
||||
|
[1, 4], |
||||
|
[2, 4], |
||||
|
[3, 4], |
||||
|
], |
||||
|
[ |
||||
|
//2
|
||||
|
[0, 0], |
||||
|
[1, 0], |
||||
|
[2, 0], |
||||
|
[3, 0], |
||||
|
[3, 1], |
||||
|
[2, 2], |
||||
|
[1, 3], |
||||
|
[0, 4], |
||||
|
[1, 4], |
||||
|
[2, 4], |
||||
|
[3, 4], |
||||
|
], |
||||
|
[ |
||||
|
//7
|
||||
|
[0, 0], |
||||
|
[1, 0], |
||||
|
[2, 0], |
||||
|
[3, 0], |
||||
|
[3, 1], |
||||
|
[2, 2], |
||||
|
[1, 3], |
||||
|
[1, 4], |
||||
|
], |
||||
|
]; |
||||
|
|
||||
|
export { NUMBER_MATRIX }; |
||||
@ -0,0 +1,260 @@ |
|||||
|
import * as TWEEN from "./tween.min.js"; |
||||
|
|
||||
|
const MAX_TOP = 300; |
||||
|
const MAX_WIDTH = document.body.clientWidth; |
||||
|
|
||||
|
let defaultType = 0; |
||||
|
let prizes; |
||||
|
let lastDanMuList = []; |
||||
|
let prizeElement = {}; |
||||
|
let lasetPrizeIndex = 0; |
||||
|
|
||||
|
const DEFAULT_MESS = [ |
||||
|
"我是该抽中一等奖还是一等奖呢，纠结ing...", |
||||
|
"听说要提前一个月吃素才能中大奖喔！", |
||||
|
"好想要一等奖啊！！！", |
||||
|
"一等奖有没有人想要呢？", |
||||
|
"五等奖也不错，只要自己能中奖就行", |
||||
|
"祝大家新年快乐！", |
||||
|
"中不中奖不重要，大家吃好喝好。", |
||||
|
"新年，祝福大家事事顺遂。", |
||||
|
"作为专业陪跑的我，我就看看你们有谁跟我一样", |
||||
|
"新的一年祝福大家越来越好！", |
||||
|
"来年再战！！！", |
||||
|
]; |
||||
|
|
||||
|
class DanMu { |
||||
|
constructor(option) { |
||||
|
if (typeof option !== "object") { |
||||
|
option = { |
||||
|
text: option, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
this.position = {}; |
||||
|
this.text = option.text; |
||||
|
this.onComplete = option.onComplete; |
||||
|
|
||||
|
this.init(); |
||||
|
} |
||||
|
|
||||
|
init() { |
||||
|
this.element = document.createElement("div"); |
||||
|
this.element.className = "dan-mu"; |
||||
|
document.body.appendChild(this.element); |
||||
|
|
||||
|
this.start(); |
||||
|
} |
||||
|
|
||||
|
setText(text) { |
||||
|
this.text = text || this.text; |
||||
|
this.element.textContent = this.text; |
||||
|
this.width = this.element.clientWidth + 100; |
||||
|
} |
||||
|
|
||||
|
start(text) { |
||||
|
let speed = ~~(Math.random() * 10000) + 6000; |
||||
|
this.position = { |
||||
|
x: MAX_WIDTH, |
||||
|
}; |
||||
|
let delay = speed / 10; |
||||
|
|
||||
|
this.setText(text); |
||||
|
this.element.style.transform = "translateX(" + this.position.x + "px)"; |
||||
|
this.element.style.top = ~~(Math.random() * MAX_TOP) + 10 + "px"; |
||||
|
this.element.classList.add("active"); |
||||
|
this.tween = new TWEEN.Tween(this.position) |
||||
|
.to( |
||||
|
{ |
||||
|
x: -this.width, |
||||
|
}, |
||||
|
speed |
||||
|
) |
||||
|
.onUpdate(() => { |
||||
|
this.render(); |
||||
|
}) |
||||
|
.onComplete(() => { |
||||
|
this.onComplete && this.onComplete(); |
||||
|
}) |
||||
|
.start(); |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
this.element.style.transform = "translateX(" + this.position.x + "px)"; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
class Qipao { |
||||
|
constructor(option) { |
||||
|
if (typeof option !== "object") { |
||||
|
option = { |
||||
|
text: option, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
this.text = option.text; |
||||
|
this.onComplete = option.onComplete; |
||||
|
this.$par = document.querySelector(".qipao-container"); |
||||
|
if (!this.$par) { |
||||
|
this.$par = document.createElement("div"); |
||||
|
this.$par.className = "qipao-container"; |
||||
|
document.body.appendChild(this.$par); |
||||
|
} |
||||
|
|
||||
|
this.init(); |
||||
|
} |
||||
|
|
||||
|
init() { |
||||
|
this.element = document.createElement("div"); |
||||
|
this.element.className = "qipao animated"; |
||||
|
this.$par.appendChild(this.element); |
||||
|
|
||||
|
this.start(); |
||||
|
} |
||||
|
|
||||
|
setText(text) { |
||||
|
this.text = text || this.text; |
||||
|
this.element.textContent = this.text; |
||||
|
} |
||||
|
|
||||
|
start(text) { |
||||
|
this.setText(text); |
||||
|
this.element.classList.remove("bounceOutRight"); |
||||
|
this.element.classList.add("bounceInRight"); |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
this.element.classList.remove("bounceInRight"); |
||||
|
this.element.classList.add("bounceOutRight"); |
||||
|
this.onComplete && this.onComplete(); |
||||
|
}, 4000); |
||||
|
} |
||||
|
} |
||||
|
function setPrizes(pri) { |
||||
|
prizes = pri; |
||||
|
defaultType = prizes[0]["type"]; |
||||
|
lasetPrizeIndex = pri.length - 1; |
||||
|
} |
||||
|
|
||||
|
function showPrizeList(currentPrizeIndex) { |
||||
|
let currentPrize = prizes[currentPrizeIndex]; |
||||
|
if (currentPrize.type === defaultType) { |
||||
|
currentPrize.count = "不限制"; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function resetPrize(currentPrizeIndex) { |
||||
|
prizeElement = {}; |
||||
|
lasetPrizeIndex = currentPrizeIndex; |
||||
|
showPrizeList(currentPrizeIndex); |
||||
|
} |
||||
|
|
||||
|
let setPrizeData = (function () { |
||||
|
return function (currentPrizeIndex, count, isInit) { |
||||
|
let currentPrize = prizes[currentPrizeIndex], |
||||
|
type = currentPrize.type, |
||||
|
elements = prizeElement[type], |
||||
|
totalCount = currentPrize.count; |
||||
|
|
||||
|
if (!elements) { |
||||
|
elements = { |
||||
|
box: document.querySelector(`#prize-item-${type}`), |
||||
|
bar: document.querySelector(`#prize-bar-${type}`), |
||||
|
text: document.querySelector(`#prize-count-${type}`), |
||||
|
}; |
||||
|
prizeElement[type] = elements; |
||||
|
} |
||||
|
|
||||
|
if (!prizeElement.prizeType) { |
||||
|
prizeElement.prizeType = document.querySelector("#prizeType"); |
||||
|
prizeElement.prizeLeft = document.querySelector("#prizeLeft"); |
||||
|
prizeElement.prizeText = document.querySelector("#prizeText"); |
||||
|
} |
||||
|
|
||||
|
if (isInit) { |
||||
|
for (let i = prizes.length - 1; i > currentPrizeIndex; i--) { |
||||
|
let type = prizes[i]["type"]; |
||||
|
document.querySelector(`#prize-item-${type}`).className = |
||||
|
"prize-item done"; |
||||
|
document.querySelector(`#prize-bar-${type}`).style.width = "0"; |
||||
|
document.querySelector(`#prize-count-${type}`).textContent = |
||||
|
"0" + "/" + prizes[i]["count"]; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (lasetPrizeIndex !== currentPrizeIndex) { |
||||
|
let lastPrize = prizes[lasetPrizeIndex], |
||||
|
lastBox = document.querySelector(`#prize-item-${lastPrize.type}`); |
||||
|
lastBox.classList.remove("shine"); |
||||
|
lastBox.classList.add("done"); |
||||
|
elements.box && elements.box.classList.add("shine"); |
||||
|
prizeElement.prizeType.textContent = currentPrize.text; |
||||
|
prizeElement.prizeText.textContent = currentPrize.title; |
||||
|
|
||||
|
lasetPrizeIndex = currentPrizeIndex; |
||||
|
} |
||||
|
|
||||
|
if (currentPrizeIndex === 0) { |
||||
|
prizeElement.prizeType.textContent = "特别奖"; |
||||
|
prizeElement.prizeText.textContent = " "; |
||||
|
prizeElement.prizeLeft.textContent = "不限制"; |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
count = totalCount - count; |
||||
|
count = count < 0 ? 0 : count; |
||||
|
let percent = (count / totalCount).toFixed(2); |
||||
|
elements.bar && (elements.bar.style.width = percent * 100 + "%"); |
||||
|
elements.text && (elements.text.textContent = count + "/" + totalCount); |
||||
|
prizeElement.prizeLeft.textContent = count; |
||||
|
}; |
||||
|
})(); |
||||
|
|
||||
|
function startMaoPao() { |
||||
|
let len = DEFAULT_MESS.length, |
||||
|
count = 5, |
||||
|
index = ~~(Math.random() * len), |
||||
|
danmuList = [], |
||||
|
total = 0; |
||||
|
|
||||
|
function restart() { |
||||
|
total = 0; |
||||
|
danmuList.forEach((item) => { |
||||
|
let text = |
||||
|
lastDanMuList.length > 0 |
||||
|
? lastDanMuList.shift() |
||||
|
: DEFAULT_MESS[index++]; |
||||
|
item.start(text); |
||||
|
index = index > len ? 0 : index; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
for (let i = 0; i < count; i++) { |
||||
|
setTimeout(() => { |
||||
|
danmuList.push( |
||||
|
new DanMu({ |
||||
|
text: DEFAULT_MESS[index++], |
||||
|
onComplete: function () { |
||||
|
setTimeout(() => { |
||||
|
this.start(DEFAULT_MESS[index++]); |
||||
|
index = index > len ? 0 : index; |
||||
|
}, 1000); |
||||
|
}, |
||||
|
}) |
||||
|
); |
||||
|
index = index > len ? 0 : index; |
||||
|
}, 1500 * i); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function addDanMu(text) { |
||||
|
lastDanMuList.push(text); |
||||
|
} |
||||
|
|
||||
|
export { |
||||
|
startMaoPao, |
||||
|
showPrizeList, |
||||
|
setPrizeData, |
||||
|
addDanMu, |
||||
|
setPrizes, |
||||
|
resetPrize, |
||||
|
}; |
||||
957
src/utils/three.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1 @@ |
|||||
|
"use strict";var TWEEN=TWEEN||(function(){var b=[];return{REVISION:"7",getAll:function(){return b},removeAll:function(){b=[]},add:function(a){b.push(a)},remove:function(a){a=b.indexOf(a);-1!==a&&b.splice(a,1)},update:function(f){if(0===b.length){return !1}for(var a=0,e=b.length,f=void 0!==f?f:Date.now();a<e;){b[a].update(f)?a++:(b.splice(a,1),e--)}return !0}}})();TWEEN.Tween=function(A){var y={},z={},x=1000,w=0,v=null,u=TWEEN.Easing.Linear.None,g=TWEEN.Interpolation.Linear,t=[],q=null,o=!1,j=null,B=null,i=null;this.to=function(b,d){null!==d&&(x=d);z=b;return this};this.start=function(b){TWEEN.add(this);o=!1;v=void 0!==b?b:Date.now();v+=w;for(var a in z){if(null!==A[a]){if(z[a] instanceof Array){if(0===z[a].length){continue}z[a]=[A[a]].concat(z[a])}y[a]=A[a]}}return this};this.stop=function(){TWEEN.remove(this);B&&B.call(this);return this};this.delay=function(b){w=b;return this};this.easing=function(b){u=b;return this};this.interpolation=function(b){g=b;return this};this.chain=function(){t=arguments;return this};this.onStart=function(b){q=b;return this};this.onStop=function(b){B=b;return this};this.onUpdate=function(b){j=b;return this};this.onComplete=function(b){i=b;return this};this.update=function(h){if(h<v){return !0}!1===o&&(null!==q&&q.call(A),(o=!0));var d=(h-v)/x,d=1<d?1:d,b=u(d),a;for(a in y){var c=y[a],f=z[a];A[a]=f instanceof Array?g(f,b):c+(f-c)*b}null!==j&&j.call(A,b);if(1==d){null!==i&&i.call(A);d=0;for(b=t.length;d<b;d++){t[d].start(h)}return !1}return !0}};TWEEN.Easing={Linear:{None:function(b){return b}},Quadratic:{In:function(b){return b*b},Out:function(b){return b*(2-b)},InOut:function(b){return 1>(b*=2)?0.5*b*b:-0.5*(--b*(b-2)-1)}},Cubic:{In:function(b){return b*b*b},Out:function(b){return --b*b*b+1},InOut:function(b){return 1>(b*=2)?0.5*b*b*b:0.5*((b-=2)*b*b+2)}},Quartic:{In:function(b){return b*b*b*b},Out:function(b){return 1- --b*b*b*b},InOut:function(b){return 1>(b*=2)?0.5*b*b*b*b:-0.5*((b-=2)*b*b*b-2)}},Quintic:{In:function(b){return b*b*b*b*b},Out:function(b){return --b*b*b*b*b+1},InOut:function(b){return 1>(b*=2)?0.5*b*b*b*b*b:0.5*((b-=2)*b*b*b*b+2)}},Sinusoidal:{In:function(b){return 1-Math.cos((b*Math.PI)/2)},Out:function(b){return Math.sin((b*Math.PI)/2)},InOut:function(b){return 0.5*(1-Math.cos(Math.PI*b))}},Exponential:{In:function(b){return 0===b?0:Math.pow(1024,b-1)},Out:function(b){return 1===b?1:1-Math.pow(2,-10*b)},InOut:function(b){return 0===b?0:1===b?1:1>(b*=2)?0.5*Math.pow(1024,b-1):0.5*(-Math.pow(2,-10*(b-1))+2)}},Circular:{In:function(b){return 1-Math.sqrt(1-b*b)},Out:function(b){return Math.sqrt(1- --b*b)},InOut:function(b){return 1>(b*=2)?-0.5*(Math.sqrt(1-b*b)-1):0.5*(Math.sqrt(1-(b-=2)*b)+1)}},Elastic:{In:function(e){var f,d=0.1;if(0===e){return 0}if(1===e){return 1}!d||1>d?((d=1),(f=0.1)):(f=(0.4*Math.asin(1/d))/(2*Math.PI));return -(d*Math.pow(2,10*(e-=1))*Math.sin(((e-f)*2*Math.PI)/0.4))},Out:function(e){var f,d=0.1;if(0===e){return 0}if(1===e){return 1}!d||1>d?((d=1),(f=0.1)):(f=(0.4*Math.asin(1/d))/(2*Math.PI));return(d*Math.pow(2,-10*e)*Math.sin(((e-f)*2*Math.PI)/0.4)+1)},InOut:function(e){var f,d=0.1;if(0===e){return 0}if(1===e){return 1}!d||1>d?((d=1),(f=0.1)):(f=(0.4*Math.asin(1/d))/(2*Math.PI));return 1>(e*=2)?-0.5*d*Math.pow(2,10*(e-=1))*Math.sin(((e-f)*2*Math.PI)/0.4):0.5*d*Math.pow(2,-10*(e-=1))*Math.sin(((e-f)*2*Math.PI)/0.4)+1}},Back:{In:function(b){return b*b*(2.70158*b-1.70158)},Out:function(b){return --b*b*(2.70158*b+1.70158)+1},InOut:function(b){return 1>(b*=2)?0.5*b*b*(3.5949095*b-2.5949095):0.5*((b-=2)*b*(3.5949095*b+2.5949095)+2)}},Bounce:{In:function(b){return 1-TWEEN.Easing.Bounce.Out(1-b)},Out:function(b){return b<1/2.75?7.5625*b*b:b<2/2.75?7.5625*(b-=1.5/2.75)*b+0.75:b<2.5/2.75?7.5625*(b-=2.25/2.75)*b+0.9375:7.5625*(b-=2.625/2.75)*b+0.984375},InOut:function(b){return 0.5>b?0.5*TWEEN.Easing.Bounce.In(2*b):0.5*TWEEN.Easing.Bounce.Out(2*b-1)+0.5}}};TWEEN.Interpolation={Linear:function(h,l){var g=h.length-1,k=g*l,j=Math.floor(k),i=TWEEN.Interpolation.Utils.Linear;return 0>l?i(h[0],h[1],k):1<l?i(h[g],h[g-1],g-k):i(h[j],h[j+1>g?g:j+1],k-j)},Bezier:function(i,n){var g=0,m=i.length-1,l=Math.pow,k=TWEEN.Interpolation.Utils.Bernstein,j;for(j=0;j<=m;j++){g+=l(1-n,m-j)*l(n,j)*i[j]*k(m,j)}return g},CatmullRom:function(h,l){var g=h.length-1,k=g*l,j=Math.floor(k),i=TWEEN.Interpolation.Utils.CatmullRom;return h[0]===h[g]?(0>l&&(j=Math.floor((k=g*(1+l)))),i(h[(j-1+g)%g],h[j],h[(j+1)%g],h[(j+2)%g],k-j)):0>l?h[0]-(i(h[0],h[0],h[1],h[1],-k)-h[0]):1<l?h[g]-(i(h[g],h[g],h[g-1],h[g-1],k-g)-h[g]):i(h[j?j-1:0],h[j],h[g<j+1?g:j+1],h[g<j+2?g:j+2],k-j)},Utils:{Linear:function(e,f,d){return(f-e)*d+e},Bernstein:function(e,f){var d=TWEEN.Interpolation.Utils.Factorial;return d(e)/d(f)/d(e-f)},Factorial:(function(){var b=[1];return function(f){var a=1,e;if(b[f]){return b[f]}for(e=f;1<e;e--){a*=e}return(b[f]=a)}})(),CatmullRom:function(h,l,g,k,j){var h=0.5*(g-h),k=0.5*(k-l),i=j*j;return((2*l-2*g+h+k)*j*i+(-3*l+3*g-2*h-k)*i+h*j+l)}}}; |
||||
1816
src/views/choujiang/hxl-cj/cj.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue