|
|
@@ -1,417 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html>
|
|
|
-
|
|
|
-<head>
|
|
|
- <meta charset="utf-8">
|
|
|
- <title>吉林省计算中心科技服务平台</title>
|
|
|
- <!-- layui -->
|
|
|
- <link rel="stylesheet" href="static/home/lib/layui/css/layui.css">
|
|
|
- <link rel="stylesheet" href="static/home/css/lib.css">
|
|
|
- <link rel="stylesheet" href="static/home/css/road.css">
|
|
|
- <link rel="stylesheet" href="static/home/css/index.css">
|
|
|
- <style>
|
|
|
- .canvas-stats {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-
|
|
|
-<body>
|
|
|
- <div class="header">
|
|
|
- <a href="" style="display: none;">
|
|
|
- <div class="home-btn"></div>
|
|
|
- </a>
|
|
|
- <img class='image' src="static/images/logo.png" alt="">
|
|
|
- <p class='title'>吉林省计算中心科技服务平台</p>
|
|
|
- <p class='login'>
|
|
|
- <a href=""><img src="./static/home/images/登录.png" alt=""></a>
|
|
|
- <a href="http://free.liaoningdoupo.com/platlive/newlogin">个人登录</a>
|
|
|
- <a href="http://free.liaoningdoupo.com/platlogin/">管理登录</a>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <img class="sci-wheel" src="static/home/images/sci.gif" alt="">
|
|
|
- <div class="center">
|
|
|
- <a class="list fn_1 moveUpDownFla1" target="_blank" href="market/index">
|
|
|
- <p>科技超市</p>
|
|
|
- </a>
|
|
|
- <a class="list fn_2 moveUpDownFla2" target="_blank" href="hallList/index">
|
|
|
- <p>直播大厅</p>
|
|
|
- </a>
|
|
|
- <a class="list fn_3 moveUpDownFla1" target="_blank" href="dynamic/index">
|
|
|
- <p>动态监测</p>
|
|
|
- </a>
|
|
|
- <a class="list fn_4 moveUpDownFla2" target="_blank" href="live/service">
|
|
|
- <p>创新服务</p>
|
|
|
- </a>
|
|
|
- <a class="list fn_5 moveUpDownFla2" target="_blank" href="technical/index">
|
|
|
- <p>技术培训</p>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <!--流星-->
|
|
|
- <div class="liuxing liuxing1 liuxingFla"></div>
|
|
|
- <div class="liuxing liuxing2 liuxingFla2"></div>
|
|
|
- <div class="liuxing liuxing3 liuxingFla3"></div>
|
|
|
- <div class="liuxing liuxing4 liuxingFla4"></div>
|
|
|
- <div id="canvas-container-1" class="canvas-container">
|
|
|
- <canvas id="canvas-1"></canvas>
|
|
|
- </div>
|
|
|
- <script src="static/home/js/stats.min.js"></script>
|
|
|
- <script src="static/home/js/three.min.js"></script>
|
|
|
- <script>
|
|
|
- function ThreeJSCanvas(CANVAS_ID) {
|
|
|
-
|
|
|
- var SCREEN_HEIGHT = Math.min(window.innerWidth, window.innerHeight);
|
|
|
- var SCREEN_WIDTH = SCREEN_HEIGHT;
|
|
|
- var SCREEN_ASPECT_RATIO = SCREEN_WIDTH / SCREEN_HEIGHT;
|
|
|
- var canvas, container;
|
|
|
-
|
|
|
- var container, loader, stats;
|
|
|
- var renderer, camera, scene;
|
|
|
- var raycaster, controls;
|
|
|
-
|
|
|
- var ANIMATION_FRAME_LENGTH = 30,
|
|
|
- INTERACT_DISTANCE = 2.5;
|
|
|
- var objetArray = [],
|
|
|
- animationQueue = [];
|
|
|
-
|
|
|
- var color1 = [0 / 255, 110 / 255, 255 / 255],
|
|
|
- color2 = [0 / 255, 255 / 255, 140 / 255];
|
|
|
-
|
|
|
- var bitmap = [];
|
|
|
- var BITMAP_SKIP = 1;
|
|
|
-
|
|
|
- var fov = 90;
|
|
|
- var cameraPos = [0, 0, 30];
|
|
|
- var cameraLookAt = [0, 0, 0];
|
|
|
- var viewHeight = 2 * Math.tan(THREE.Math.degToRad(fov / 2)) * cameraPos[2],
|
|
|
- viewWidth = viewHeight * SCREEN_ASPECT_RATIO;
|
|
|
- var mouse = new THREE.Vector3(10000, 10000, -1),
|
|
|
- mouseScaled = new THREE.Vector3(10000, 10000, -1);
|
|
|
-
|
|
|
- var frame = 0;
|
|
|
-
|
|
|
- function init() {
|
|
|
-
|
|
|
- // Global Variables
|
|
|
- container = document.getElementById("canvas-container-" + CANVAS_ID);
|
|
|
- canvas = document.getElementById("canvas-" + CANVAS_ID);
|
|
|
- canvas.addEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
-
|
|
|
- loader = new THREE.JSONLoader();
|
|
|
- stats = new Stats();
|
|
|
- stats.domElement.classList.add("canvas-stats");
|
|
|
- stats.domElement.id = "canvas-stats-" + CANVAS_ID;
|
|
|
-
|
|
|
- /* If you are familiar with python and opencv
|
|
|
- you can use this python script to generate custom bitmaps
|
|
|
- --------------------
|
|
|
- https://git.io/vdBAu
|
|
|
- --------------------
|
|
|
- */
|
|
|
- var data = '#000000000000000000011110000000000000000000' +
|
|
|
- '#000000000000000011111111110000000000000000' +
|
|
|
- '#000000000000001111111111111100000000000000' +
|
|
|
- '#000000000000011111111111111110000000000000' +
|
|
|
- '#000000000000111111111111111111000000000000' +
|
|
|
- '#000000000001111111111111111111100000000000' +
|
|
|
- '#000000000011111111111111111111110000000000' +
|
|
|
- '#000000000011111111111111111111110000000000' +
|
|
|
- '#000000000111111111111111111111111000000000' +
|
|
|
- '#000000000111111111111111111111111000000000' +
|
|
|
- '#000000001111111111111111111111111100000000' +
|
|
|
- '#000000001111111111111111111111111100000000' +
|
|
|
- '#000000001111111111111111111111111100000000' +
|
|
|
- '#000000001111111111111111111111111100000000' +
|
|
|
- '#000000001111111111111111111111111100000000' +
|
|
|
- '#000000000111111111111111111111111000000000' +
|
|
|
- '#000000000111111111111111111111111000000000' +
|
|
|
- '#000000000111111111111111111111111000000000' +
|
|
|
- '#000000000011111111111111111111110000000000' +
|
|
|
- '#000000000011111111111111111111110000000000' +
|
|
|
- '#000000000001111111111111111111100000000000' +
|
|
|
- '#000000000001111111111111111111100000000000' +
|
|
|
- '#000000000000111111111111111111000000000000' +
|
|
|
- '#000000000000111111111111111110000000000000' +
|
|
|
- '#000000000000011111111111111110000000000000' +
|
|
|
- '#000000000000001111111111111100000000000000' +
|
|
|
- '#000000000000001111111111111100000000000000' +
|
|
|
- '#000000000000001111111111111000000000000000' +
|
|
|
- '#000000000000000111111111111000000000000000' +
|
|
|
- '#000000000000000111111111111000000000000000' +
|
|
|
- '#000000000000000111111111111000000000000000' +
|
|
|
- '#000000000000000111111111111000000000000000' +
|
|
|
- '#000000000000000011111111110000000000000000' +
|
|
|
- '#000000000000000010000000010000000000000000' +
|
|
|
- '#000000000000000011111111110000000000000000' +
|
|
|
- '#000000000000000010000000010000000000000000' +
|
|
|
- '#000000000000000011111111110000000000000000' +
|
|
|
- '#000000000000000010000000010000000000000000' +
|
|
|
- '#000000000000000011111111110000000000000000' +
|
|
|
- '#000000000000000000100001000000000000000000' +
|
|
|
- '#000000000000000000110011000000000000000000' +
|
|
|
- '#000000000000000000011110000000000000000000';
|
|
|
-
|
|
|
- for (var i = 0; i < data.length; i++) {
|
|
|
- if (data[i] == '#') {
|
|
|
- bitmap.push([]);
|
|
|
- } else {
|
|
|
- bitmap[bitmap.length - 1].push(data[i] - '0');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- container.appendChild(stats.domElement);
|
|
|
-
|
|
|
- // Renderer
|
|
|
- renderer = new THREE.WebGLRenderer({
|
|
|
- alpha: true,
|
|
|
- antialias: true,
|
|
|
- canvas: canvas,
|
|
|
- });
|
|
|
- renderer.setClearColor(0x212121, 0);
|
|
|
- renderer.setPixelRatio(window.devicePixelRatio);
|
|
|
- renderer.shadowMap.enabled = true;
|
|
|
- renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
|
|
- renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
|
|
|
-
|
|
|
- // Camera and Controls
|
|
|
- camera = new THREE.PerspectiveCamera(fov, SCREEN_ASPECT_RATIO, 0.1, 1000);
|
|
|
- // camera = new THREE.OrthographicCamera(-viewWidth, viewWidth, viewHeight, -viewHeight, 1, 300);
|
|
|
- camera.position.set(cameraPos[0], cameraPos[1], cameraPos[2]);
|
|
|
- camera.lookAt(new THREE.Vector3(cameraLookAt[0], cameraLookAt[1], cameraLookAt[2]));
|
|
|
- raycaster = new THREE.Raycaster();
|
|
|
-
|
|
|
- // controls = new THREE.OrbitControls(camera);
|
|
|
- // controls.rotateSpeed = 2.0;
|
|
|
- // controls.zoomSpeed = 2.0;
|
|
|
- // controls.enableZoom = true;
|
|
|
- // controls.enablePan = true;
|
|
|
- // controls.dampingFactor = 0.2;
|
|
|
- // controls.addEventListener('change', render);
|
|
|
-
|
|
|
- //Scene
|
|
|
- scene = new THREE.Scene();
|
|
|
-
|
|
|
-
|
|
|
- //Lights
|
|
|
-
|
|
|
- // Making Object Array
|
|
|
- var xOffset = -bitmap[0].length / (BITMAP_SKIP * 2);
|
|
|
- var yOffset = bitmap.length / (BITMAP_SKIP * 2);
|
|
|
- for (var i = 0; i < bitmap.length; i += BITMAP_SKIP) {
|
|
|
- for (var j = 0; j < bitmap[i].length; j += BITMAP_SKIP) {
|
|
|
- if (bitmap[i][j] == 1) {
|
|
|
- planeGeometry = new THREE.PlaneGeometry(1, 1);
|
|
|
- var circleGeometry = new THREE.CircleGeometry(1, 5);
|
|
|
- var frac = i / bitmap.length;
|
|
|
- // Materials
|
|
|
- planeMaterial = new THREE.MeshBasicMaterial({
|
|
|
- color: new THREE.Color(
|
|
|
- color1[0] * frac + color2[0] * (1 - frac),
|
|
|
- color1[1] * frac + color2[1] * (1 - frac),
|
|
|
- color1[2] * frac + color2[2] * (1 - frac)
|
|
|
- ),
|
|
|
- transparent: true,
|
|
|
- opacity: THREE.Math.randFloat(0.4, 0.6),
|
|
|
- side: THREE.DoubleSide
|
|
|
- });
|
|
|
-
|
|
|
- var circleMaterial = new THREE.MeshBasicMaterial({
|
|
|
- color: new THREE.Color(1, 1, 1),
|
|
|
- transparent: true,
|
|
|
- opacity: THREE.Math.randFloat(0.8, 1),
|
|
|
- side: THREE.DoubleSide
|
|
|
- });
|
|
|
-
|
|
|
- // Mesh
|
|
|
- planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
|
|
|
- planeMesh.position.set(xOffset + j / BITMAP_SKIP, yOffset - i / BITMAP_SKIP, 0);
|
|
|
- var randWidth = THREE.Math.randFloat(0.6, 1.2);
|
|
|
- var randHeight = randWidth
|
|
|
- planeMesh.scale.set(randWidth, randHeight, 1);
|
|
|
- scene.add(planeMesh);
|
|
|
- objetArray.push([planeMesh, false]);
|
|
|
-
|
|
|
-
|
|
|
- circleMesh = new THREE.Mesh(circleGeometry, circleMaterial);
|
|
|
- circleMesh.position.set(xOffset + j / BITMAP_SKIP + THREE.Math.randFloat(-0.5, 0.5), yOffset - i / BITMAP_SKIP + THREE.Math.randFloat(-0.5, 0.5), 0.1);
|
|
|
- var randRadius = THREE.Math.randFloat(0.05, 0.1);
|
|
|
- circleMesh.scale.set(randRadius, randRadius, 1);
|
|
|
- scene.add(circleMesh);
|
|
|
- objetArray.push([circleMesh, false]);
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- //Geometry
|
|
|
-
|
|
|
- // Materials
|
|
|
-
|
|
|
-
|
|
|
- // Mesh
|
|
|
-
|
|
|
-
|
|
|
- // Helpers
|
|
|
-
|
|
|
- //Add Stuff to Scene
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function animate() {
|
|
|
-
|
|
|
- requestAnimationFrame(animate);
|
|
|
- render();
|
|
|
- stats.update();
|
|
|
- // controls.update();
|
|
|
- frame++;
|
|
|
- }
|
|
|
-
|
|
|
- function render() {
|
|
|
-
|
|
|
- while (animationQueue.length > 0) {
|
|
|
- var obj_index = animationQueue[0][0];
|
|
|
- var ani_frame = animationQueue[0][1];
|
|
|
- if (ani_frame > ANIMATION_FRAME_LENGTH) {
|
|
|
- objetArray[obj_index][1] = false;
|
|
|
- animationQueue.shift();
|
|
|
- } else {
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- for (var i = 0; i < objetArray.length; i++) {
|
|
|
- var obj = objetArray[i][0];
|
|
|
- var isAnimating = objetArray[i][1];
|
|
|
- if (isAnimating == false) {
|
|
|
- var px = obj.position.x;
|
|
|
- var py = obj.position.y;
|
|
|
- var dist = Math.sqrt(Math.pow(px - mouseScaled.x, 2) + Math.pow(py - mouseScaled.y, 2));
|
|
|
- if (dist < INTERACT_DISTANCE) {
|
|
|
- var startPosVector = obj.position.clone();
|
|
|
- var mouseRepelVector = new THREE.Vector3().subVectors(startPosVector, mouseScaled).multiplyScalar(THREE.Math.randFloat(INTERACT_DISTANCE + 0.5, INTERACT_DISTANCE + 2) - dist);
|
|
|
- var endPosVector = new THREE.Vector3().addVectors(startPosVector, mouseRepelVector);
|
|
|
- animationQueue.push([i, 0, startPosVector, endPosVector]);
|
|
|
- objetArray[i][1] = true;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- for (var i = 0; i < animationQueue.length; i++) {
|
|
|
- var obj = objetArray[animationQueue[i][0]][0];
|
|
|
- var ani_frame = animationQueue[i][1];
|
|
|
- var startPosVector = animationQueue[i][2];
|
|
|
- var endPosVector = animationQueue[i][3];
|
|
|
- var curPosVector = new THREE.Vector3();
|
|
|
- var frac = 1 - Math.abs(ani_frame - (ANIMATION_FRAME_LENGTH / 2)) / (ANIMATION_FRAME_LENGTH / 2);
|
|
|
- frac = easeOutQuad(frac);
|
|
|
- curPosVector.lerpVectors(startPosVector, endPosVector, frac);
|
|
|
-
|
|
|
- obj.position.x = curPosVector.x;
|
|
|
- obj.position.y = curPosVector.y;
|
|
|
- obj.position.z = curPosVector.z;
|
|
|
- animationQueue[i][1] += 1;
|
|
|
- }
|
|
|
-
|
|
|
- mouse = new THREE.Vector3(10000, 10000, -2);
|
|
|
- mouseScaled = new THREE.Vector3(10000, 10000, -2);
|
|
|
-
|
|
|
- renderer.render(scene, camera);
|
|
|
- }
|
|
|
-
|
|
|
- function onWindowResize() {
|
|
|
- SCREEN_HEIGHT = Math.min(window.innerWidth, window.innerHeight);
|
|
|
- SCREEN_WIDTH = SCREEN_HEIGHT;
|
|
|
- SCREEN_ASPECT_RATIO = SCREEN_WIDTH / SCREEN_HEIGHT;
|
|
|
- camera.aspect = SCREEN_ASPECT_RATIO;
|
|
|
- camera.updateProjectionMatrix();
|
|
|
- renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
|
|
|
- console.log(SCREEN_WIDTH + "x" + SCREEN_HEIGHT)
|
|
|
- }
|
|
|
-
|
|
|
- function onDocumentMouseMove(event) {
|
|
|
-
|
|
|
- var rect = canvas.getBoundingClientRect();
|
|
|
-
|
|
|
- mouse.x = event.clientX - rect.left;
|
|
|
- mouse.y = event.clientY - rect.top;
|
|
|
-
|
|
|
- mouseScaled.x = mouse.x * viewWidth / SCREEN_WIDTH - viewWidth / 2;
|
|
|
- mouseScaled.y = -mouse.y * viewHeight / SCREEN_HEIGHT + viewHeight / 2;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function sigmoid(t) {
|
|
|
- return 1 / (1 + Math.pow(Math.E, -t));
|
|
|
- }
|
|
|
-
|
|
|
- // no easing, no acceleration
|
|
|
- function linear(t) {
|
|
|
- return t;
|
|
|
- }
|
|
|
- // accelerating from zero velocity
|
|
|
- function easeInQuad(t) {
|
|
|
- return t * t;
|
|
|
- }
|
|
|
- // decelerating to zero velocity
|
|
|
- function easeOutQuad(t) {
|
|
|
- return t * (2 - t);
|
|
|
- }
|
|
|
- // acceleration until halfway, then deceleration
|
|
|
- function easeInOutQuad(t) {
|
|
|
- return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
|
|
|
- }
|
|
|
- // accelerating from zero velocity
|
|
|
- function easeInCubic(t) {
|
|
|
- return t * t * t;
|
|
|
- }
|
|
|
- // decelerating to zero velocity
|
|
|
- function easeOutCubic(t) {
|
|
|
- return (--t) * t * t + 1;
|
|
|
- }
|
|
|
- // acceleration until halfway, then deceleration
|
|
|
- function easeInOutCubic(t) {
|
|
|
- return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
|
|
|
- }
|
|
|
- // accelerating from zero velocity
|
|
|
- function easeInQuart(t) {
|
|
|
- return t * t * t * t;
|
|
|
- }
|
|
|
- // decelerating to zero velocity
|
|
|
- function easeOutQuart(t) {
|
|
|
- return 1 - (--t) * t * t * t;
|
|
|
- }
|
|
|
- // acceleration until halfway, then deceleration
|
|
|
- function easeInOutQuart(t) {
|
|
|
- return t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;
|
|
|
- }
|
|
|
- // accelerating from zero velocity
|
|
|
- function easeInQuint(t) {
|
|
|
- return t * t * t * t * t;
|
|
|
- }
|
|
|
- // decelerating to zero velocity
|
|
|
- function easeOutQuint(t) {
|
|
|
- return 1 + (--t) * t * t * t * t;
|
|
|
- }
|
|
|
- // acceleration until halfway, then deceleration
|
|
|
- function easeInOutQuint(t) {
|
|
|
- return t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;
|
|
|
- }
|
|
|
-
|
|
|
- //Event Handlers
|
|
|
- window.addEventListener("resize", onWindowResize);
|
|
|
-
|
|
|
-
|
|
|
- init();
|
|
|
- animate();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- ThreeJSCanvas(1);
|
|
|
- </script>
|
|
|
-</body>
|
|
|
-<!-- layui -->
|
|
|
-<script type="text/javascript" src="static/home/lib/layui/layui.all.js"></script>
|
|
|
-
|
|
|
-</html>
|
