home.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>中科在线</title>
  6. <!-- layui -->
  7. <link rel="stylesheet" href="static/home/lib/layui/css/layui.css">
  8. <link rel="stylesheet" href="static/home/css/lib.css">
  9. <link rel="stylesheet" href="static/home/css/road.css">
  10. <link rel="stylesheet" href="static/home/css/index.css">
  11. <style>
  12. .canvas-stats {
  13. display: none;
  14. }
  15. .erweima{
  16. position: fixed;
  17. top: 50px;
  18. width: 100px;
  19. height: 100px;
  20. border: 1px solid red;
  21. display: none;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="header">
  27. <a href="" style="display: none;">
  28. <div class="home-btn"></div>
  29. </a>
  30. <img class='image' src="static/images/logo.png" alt="">
  31. <p class='title'>中科在线</p>
  32. <p style="color:#fff;display: none;" onclick="guanzhu()">关注公众号</p>
  33. </div>
  34. <div class='erweima' id="idma">
  35. 二维码
  36. </div>
  37. <img class="sci-wheel" src="static/home/images/sci.gif" alt="">
  38. <div class="center">
  39. <a class="list fn_1 moveUpDownFla1" target="_blank" href="market/index">
  40. <p>科技超市</p>
  41. </a>
  42. <a class="list fn_2 moveUpDownFla2" target="_blank" href="hallList/index">
  43. <p>直播大厅</p>
  44. </a>
  45. <a class="list fn_3 moveUpDownFla1" target="_blank" href="dynamic/index">
  46. <p>动态监测</p>
  47. </a>
  48. <a class="list fn_4 moveUpDownFla2" target="_blank" href="live/service">
  49. <p>创新服务</p>
  50. </a>
  51. <a class="list fn_5 moveUpDownFla2" target="_blank" href="technical/index">
  52. <p>技术交流</p>
  53. </a>
  54. </div>
  55. <!--流星-->
  56. <div class="liuxing liuxing1 liuxingFla"></div>
  57. <div class="liuxing liuxing2 liuxingFla2"></div>
  58. <div class="liuxing liuxing3 liuxingFla3"></div>
  59. <div class="liuxing liuxing4 liuxingFla4"></div>
  60. <div id="canvas-container-1" class="canvas-container">
  61. <canvas id="canvas-1"></canvas>
  62. </div>
  63. <script src="static/home/js/stats.min.js"></script>
  64. <script src="static/home/js/three.min.js"></script>
  65. <script>
  66. function ThreeJSCanvas(CANVAS_ID) {
  67. var SCREEN_HEIGHT = Math.min(window.innerWidth, window.innerHeight);
  68. var SCREEN_WIDTH = SCREEN_HEIGHT;
  69. var SCREEN_ASPECT_RATIO = SCREEN_WIDTH / SCREEN_HEIGHT;
  70. var canvas, container;
  71. var container, loader, stats;
  72. var renderer, camera, scene;
  73. var raycaster, controls;
  74. var ANIMATION_FRAME_LENGTH = 30,
  75. INTERACT_DISTANCE = 2.5;
  76. var objetArray = [],
  77. animationQueue = [];
  78. var color1 = [0 / 255, 110 / 255, 255 / 255],
  79. color2 = [0 / 255, 255 / 255, 140 / 255];
  80. var bitmap = [];
  81. var BITMAP_SKIP = 1;
  82. var fov = 90;
  83. var cameraPos = [0, 0, 30];
  84. var cameraLookAt = [0, 0, 0];
  85. var viewHeight = 2 * Math.tan(THREE.Math.degToRad(fov / 2)) * cameraPos[2],
  86. viewWidth = viewHeight * SCREEN_ASPECT_RATIO;
  87. var mouse = new THREE.Vector3(10000, 10000, -1),
  88. mouseScaled = new THREE.Vector3(10000, 10000, -1);
  89. var frame = 0;
  90. function init() {
  91. // Global Variables
  92. container = document.getElementById("canvas-container-" + CANVAS_ID);
  93. canvas = document.getElementById("canvas-" + CANVAS_ID);
  94. canvas.addEventListener('mousemove', onDocumentMouseMove, false);
  95. loader = new THREE.JSONLoader();
  96. stats = new Stats();
  97. stats.domElement.classList.add("canvas-stats");
  98. stats.domElement.id = "canvas-stats-" + CANVAS_ID;
  99. /* If you are familiar with python and opencv
  100. you can use this python script to generate custom bitmaps
  101. --------------------
  102. https://git.io/vdBAu
  103. --------------------
  104. */
  105. var data = '#000000000000000000011110000000000000000000' +
  106. '#000000000000000011111111110000000000000000' +
  107. '#000000000000001111111111111100000000000000' +
  108. '#000000000000011111111111111110000000000000' +
  109. '#000000000000111111111111111111000000000000' +
  110. '#000000000001111111111111111111100000000000' +
  111. '#000000000011111111111111111111110000000000' +
  112. '#000000000011111111111111111111110000000000' +
  113. '#000000000111111111111111111111111000000000' +
  114. '#000000000111111111111111111111111000000000' +
  115. '#000000001111111111111111111111111100000000' +
  116. '#000000001111111111111111111111111100000000' +
  117. '#000000001111111111111111111111111100000000' +
  118. '#000000001111111111111111111111111100000000' +
  119. '#000000001111111111111111111111111100000000' +
  120. '#000000000111111111111111111111111000000000' +
  121. '#000000000111111111111111111111111000000000' +
  122. '#000000000111111111111111111111111000000000' +
  123. '#000000000011111111111111111111110000000000' +
  124. '#000000000011111111111111111111110000000000' +
  125. '#000000000001111111111111111111100000000000' +
  126. '#000000000001111111111111111111100000000000' +
  127. '#000000000000111111111111111111000000000000' +
  128. '#000000000000111111111111111110000000000000' +
  129. '#000000000000011111111111111110000000000000' +
  130. '#000000000000001111111111111100000000000000' +
  131. '#000000000000001111111111111100000000000000' +
  132. '#000000000000001111111111111000000000000000' +
  133. '#000000000000000111111111111000000000000000' +
  134. '#000000000000000111111111111000000000000000' +
  135. '#000000000000000111111111111000000000000000' +
  136. '#000000000000000111111111111000000000000000' +
  137. '#000000000000000011111111110000000000000000' +
  138. '#000000000000000010000000010000000000000000' +
  139. '#000000000000000011111111110000000000000000' +
  140. '#000000000000000010000000010000000000000000' +
  141. '#000000000000000011111111110000000000000000' +
  142. '#000000000000000010000000010000000000000000' +
  143. '#000000000000000011111111110000000000000000' +
  144. '#000000000000000000100001000000000000000000' +
  145. '#000000000000000000110011000000000000000000' +
  146. '#000000000000000000011110000000000000000000';
  147. for (var i = 0; i < data.length; i++) {
  148. if (data[i] == '#') {
  149. bitmap.push([]);
  150. } else {
  151. bitmap[bitmap.length - 1].push(data[i] - '0');
  152. }
  153. }
  154. container.appendChild(stats.domElement);
  155. // Renderer
  156. renderer = new THREE.WebGLRenderer({
  157. alpha: true,
  158. antialias: true,
  159. canvas: canvas,
  160. });
  161. renderer.setClearColor(0x212121, 0);
  162. renderer.setPixelRatio(window.devicePixelRatio);
  163. renderer.shadowMap.enabled = true;
  164. renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  165. renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  166. // Camera and Controls
  167. camera = new THREE.PerspectiveCamera(fov, SCREEN_ASPECT_RATIO, 0.1, 1000);
  168. // camera = new THREE.OrthographicCamera(-viewWidth, viewWidth, viewHeight, -viewHeight, 1, 300);
  169. camera.position.set(cameraPos[0], cameraPos[1], cameraPos[2]);
  170. camera.lookAt(new THREE.Vector3(cameraLookAt[0], cameraLookAt[1], cameraLookAt[2]));
  171. raycaster = new THREE.Raycaster();
  172. // controls = new THREE.OrbitControls(camera);
  173. // controls.rotateSpeed = 2.0;
  174. // controls.zoomSpeed = 2.0;
  175. // controls.enableZoom = true;
  176. // controls.enablePan = true;
  177. // controls.dampingFactor = 0.2;
  178. // controls.addEventListener('change', render);
  179. //Scene
  180. scene = new THREE.Scene();
  181. //Lights
  182. // Making Object Array
  183. var xOffset = -bitmap[0].length / (BITMAP_SKIP * 2);
  184. var yOffset = bitmap.length / (BITMAP_SKIP * 2);
  185. for (var i = 0; i < bitmap.length; i += BITMAP_SKIP) {
  186. for (var j = 0; j < bitmap[i].length; j += BITMAP_SKIP) {
  187. if (bitmap[i][j] == 1) {
  188. planeGeometry = new THREE.PlaneGeometry(1, 1);
  189. var circleGeometry = new THREE.CircleGeometry(1, 5);
  190. var frac = i / bitmap.length;
  191. // Materials
  192. planeMaterial = new THREE.MeshBasicMaterial({
  193. color: new THREE.Color(
  194. color1[0] * frac + color2[0] * (1 - frac),
  195. color1[1] * frac + color2[1] * (1 - frac),
  196. color1[2] * frac + color2[2] * (1 - frac)
  197. ),
  198. transparent: true,
  199. opacity: THREE.Math.randFloat(0.4, 0.6),
  200. side: THREE.DoubleSide
  201. });
  202. var circleMaterial = new THREE.MeshBasicMaterial({
  203. color: new THREE.Color(1, 1, 1),
  204. transparent: true,
  205. opacity: THREE.Math.randFloat(0.8, 1),
  206. side: THREE.DoubleSide
  207. });
  208. // Mesh
  209. planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
  210. planeMesh.position.set(xOffset + j / BITMAP_SKIP, yOffset - i / BITMAP_SKIP, 0);
  211. var randWidth = THREE.Math.randFloat(0.6, 1.2);
  212. var randHeight = randWidth
  213. planeMesh.scale.set(randWidth, randHeight, 1);
  214. scene.add(planeMesh);
  215. objetArray.push([planeMesh, false]);
  216. circleMesh = new THREE.Mesh(circleGeometry, circleMaterial);
  217. 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);
  218. var randRadius = THREE.Math.randFloat(0.05, 0.1);
  219. circleMesh.scale.set(randRadius, randRadius, 1);
  220. scene.add(circleMesh);
  221. objetArray.push([circleMesh, false]);
  222. }
  223. }
  224. }
  225. //Geometry
  226. // Materials
  227. // Mesh
  228. // Helpers
  229. //Add Stuff to Scene
  230. }
  231. function animate() {
  232. requestAnimationFrame(animate);
  233. render();
  234. stats.update();
  235. // controls.update();
  236. frame++;
  237. }
  238. function render() {
  239. while (animationQueue.length > 0) {
  240. var obj_index = animationQueue[0][0];
  241. var ani_frame = animationQueue[0][1];
  242. if (ani_frame > ANIMATION_FRAME_LENGTH) {
  243. objetArray[obj_index][1] = false;
  244. animationQueue.shift();
  245. } else {
  246. break;
  247. }
  248. }
  249. for (var i = 0; i < objetArray.length; i++) {
  250. var obj = objetArray[i][0];
  251. var isAnimating = objetArray[i][1];
  252. if (isAnimating == false) {
  253. var px = obj.position.x;
  254. var py = obj.position.y;
  255. var dist = Math.sqrt(Math.pow(px - mouseScaled.x, 2) + Math.pow(py - mouseScaled.y, 2));
  256. if (dist < INTERACT_DISTANCE) {
  257. var startPosVector = obj.position.clone();
  258. var mouseRepelVector = new THREE.Vector3().subVectors(startPosVector, mouseScaled).multiplyScalar(THREE.Math.randFloat(INTERACT_DISTANCE + 0.5, INTERACT_DISTANCE + 2) - dist);
  259. var endPosVector = new THREE.Vector3().addVectors(startPosVector, mouseRepelVector);
  260. animationQueue.push([i, 0, startPosVector, endPosVector]);
  261. objetArray[i][1] = true;
  262. }
  263. }
  264. }
  265. for (var i = 0; i < animationQueue.length; i++) {
  266. var obj = objetArray[animationQueue[i][0]][0];
  267. var ani_frame = animationQueue[i][1];
  268. var startPosVector = animationQueue[i][2];
  269. var endPosVector = animationQueue[i][3];
  270. var curPosVector = new THREE.Vector3();
  271. var frac = 1 - Math.abs(ani_frame - (ANIMATION_FRAME_LENGTH / 2)) / (ANIMATION_FRAME_LENGTH / 2);
  272. frac = easeOutQuad(frac);
  273. curPosVector.lerpVectors(startPosVector, endPosVector, frac);
  274. obj.position.x = curPosVector.x;
  275. obj.position.y = curPosVector.y;
  276. obj.position.z = curPosVector.z;
  277. animationQueue[i][1] += 1;
  278. }
  279. mouse = new THREE.Vector3(10000, 10000, -2);
  280. mouseScaled = new THREE.Vector3(10000, 10000, -2);
  281. renderer.render(scene, camera);
  282. }
  283. function onWindowResize() {
  284. SCREEN_HEIGHT = Math.min(window.innerWidth, window.innerHeight);
  285. SCREEN_WIDTH = SCREEN_HEIGHT;
  286. SCREEN_ASPECT_RATIO = SCREEN_WIDTH / SCREEN_HEIGHT;
  287. camera.aspect = SCREEN_ASPECT_RATIO;
  288. camera.updateProjectionMatrix();
  289. renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  290. console.log(SCREEN_WIDTH + "x" + SCREEN_HEIGHT)
  291. }
  292. function onDocumentMouseMove(event) {
  293. var rect = canvas.getBoundingClientRect();
  294. mouse.x = event.clientX - rect.left;
  295. mouse.y = event.clientY - rect.top;
  296. mouseScaled.x = mouse.x * viewWidth / SCREEN_WIDTH - viewWidth / 2;
  297. mouseScaled.y = -mouse.y * viewHeight / SCREEN_HEIGHT + viewHeight / 2;
  298. }
  299. function sigmoid(t) {
  300. return 1 / (1 + Math.pow(Math.E, -t));
  301. }
  302. // no easing, no acceleration
  303. function linear(t) {
  304. return t;
  305. }
  306. // accelerating from zero velocity
  307. function easeInQuad(t) {
  308. return t * t;
  309. }
  310. // decelerating to zero velocity
  311. function easeOutQuad(t) {
  312. return t * (2 - t);
  313. }
  314. // acceleration until halfway, then deceleration
  315. function easeInOutQuad(t) {
  316. return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
  317. }
  318. // accelerating from zero velocity
  319. function easeInCubic(t) {
  320. return t * t * t;
  321. }
  322. // decelerating to zero velocity
  323. function easeOutCubic(t) {
  324. return (--t) * t * t + 1;
  325. }
  326. // acceleration until halfway, then deceleration
  327. function easeInOutCubic(t) {
  328. return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
  329. }
  330. // accelerating from zero velocity
  331. function easeInQuart(t) {
  332. return t * t * t * t;
  333. }
  334. // decelerating to zero velocity
  335. function easeOutQuart(t) {
  336. return 1 - (--t) * t * t * t;
  337. }
  338. // acceleration until halfway, then deceleration
  339. function easeInOutQuart(t) {
  340. return t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;
  341. }
  342. // accelerating from zero velocity
  343. function easeInQuint(t) {
  344. return t * t * t * t * t;
  345. }
  346. // decelerating to zero velocity
  347. function easeOutQuint(t) {
  348. return 1 + (--t) * t * t * t * t;
  349. }
  350. // acceleration until halfway, then deceleration
  351. function easeInOutQuint(t) {
  352. return t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;
  353. }
  354. //Event Handlers
  355. window.addEventListener("resize", onWindowResize);
  356. init();
  357. animate();
  358. }
  359. ThreeJSCanvas(1);
  360. function guanzhu() {
  361. var idma = document.getElementById('idma');
  362. if (idma.style.display == 'block') { // == 判断div.display是否为显示
  363. idma.style.display = 'none'; //= 赋值也可了解成改变
  364. }
  365. else {
  366. idma.style.display = 'block';
  367. }
  368. }
  369. </script>
  370. </body>
  371. <!-- layui -->
  372. <script type="text/javascript" src="static/home/lib/layui/layui.all.js"></script>
  373. </html>