|
@@ -9,6 +9,8 @@
|
|
|
<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">
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
|
|
|
+ <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
|
|
|
<style>
|
|
|
.canvas-stats {
|
|
|
display: none;
|
|
@@ -24,40 +26,41 @@
|
|
|
}
|
|
|
.floating{
|
|
|
width: 350px;
|
|
|
- height: 150px;
|
|
|
+ height: 170px;
|
|
|
background-image: url(./static/images/fuchuang.jpg);
|
|
|
background-repeat: no-repeat;
|
|
|
- background-size: 100%;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
- .floatingInfo{
|
|
|
- color: #F6FE6A;
|
|
|
+ .floating p:nth-child(1){
|
|
|
text-align: center;
|
|
|
- height: 150px;
|
|
|
- padding: 10px 0;
|
|
|
- font-size: 30px;
|
|
|
+ font-size: 20px;
|
|
|
font-family: cursive;
|
|
|
- text-shadow: 5px 5px 5px #000;
|
|
|
+ font-weight: bold;
|
|
|
+ /* -webkit-text-stroke: 1px #ffffff; */
|
|
|
+ padding: 10px 0;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
- .floatingInfo:hover{
|
|
|
- cursor: pointer;
|
|
|
- color: #76bdfe;
|
|
|
+ .floating p:nth-child(2){
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32px;
|
|
|
+ font-family: cursive;
|
|
|
+ font-weight: bold;
|
|
|
+ -webkit-text-stroke: 1px #ffc900;
|
|
|
+ padding: 0px 20px 10px 20px;
|
|
|
+ color: #409eff;
|
|
|
}
|
|
|
- .floatingInfoSpan{
|
|
|
- height: 150px;
|
|
|
- padding: 10px 0;
|
|
|
- text-shadow: 5px 5px 5px #000;
|
|
|
+ .floating p:nth-child(3){
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
- .floatingInfoSpan span {
|
|
|
- font-size: 16px;
|
|
|
+ .floating p:nth-child(3) button{
|
|
|
+ border: none;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 25px;
|
|
|
color: #fff;
|
|
|
- display: inline-block;
|
|
|
- width: 100%;
|
|
|
- padding: 3px 10px;
|
|
|
+ background: #409eff;
|
|
|
}
|
|
|
-
|
|
|
- .floatingInfoSpan span:hover{
|
|
|
+ .floating p:nth-child(3) button:hover{
|
|
|
cursor: pointer;
|
|
|
- color: #76bdfe;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
@@ -95,15 +98,10 @@
|
|
|
<!-- 浮窗 -->
|
|
|
<div id="floatingDiv" style="position:absolute;left:50px;top:60px;z-index: 9999;">
|
|
|
<div id="a" onClick="javascript:this.parentNode.style.display='none';">关闭窗口</div>
|
|
|
- <div class='floating' onclick="noticeBtn()">
|
|
|
- <!-- <p id="floatingid" class='floatingInfo'></p> -->
|
|
|
- <p class='floatingInfoSpan'>
|
|
|
- <span>网站联系人:顾红伟</span>
|
|
|
- <span>联系电话:</span>
|
|
|
- <span>17319450324</span>
|
|
|
- <span>微信号:</span>
|
|
|
- <span>guhongwei324</span>
|
|
|
- </p>
|
|
|
+ <div id="app" class='floating'>
|
|
|
+ <p>科技引领新发展 校地合作赢未来</p>
|
|
|
+ <p>{{info.title}}</p>
|
|
|
+ <p><button v-on:click="noticeBtn">展会入口</button></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--流星-->
|
|
@@ -117,434 +115,446 @@
|
|
|
<script src="static/home/js/stats.min.js"></script>
|
|
|
<script src="static/home/js/three.min.js"></script>
|
|
|
<script src="static/js/jquery-1.8.3.min.js"></script>
|
|
|
- <script>
|
|
|
- window.onload = function () {
|
|
|
- $.ajax({
|
|
|
- url:'/api/market/notice?isenable=1',
|
|
|
- type:"GET",
|
|
|
- contentType:'application/json',
|
|
|
- success:function(res){
|
|
|
- // console.log(res);
|
|
|
- if(res.errcode =='0') {
|
|
|
- if(res.data.length>0) {
|
|
|
- var head = res.data[0];
|
|
|
- $('#floatingid').text(head.title)
|
|
|
- }
|
|
|
- }
|
|
|
+ <script type="text/javascript">
|
|
|
+ new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data: {
|
|
|
+ info:{}
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ search(){
|
|
|
+ $.ajax({
|
|
|
+ url: '/api/live/v0/dock/index',
|
|
|
+ type: "GET",
|
|
|
+ contentType: 'application/json',
|
|
|
+ success: (res)=> {
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ let data=res.data.find(i=>i.room_id=='1008');
|
|
|
+ if (data) {
|
|
|
+ this.$set(this, `info`, data);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function (e) {
|
|
|
+ console.error(e)
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- error:function (e) {
|
|
|
- console.error(e)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- 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');
|
|
|
+ noticeBtn(){
|
|
|
+ if (this.info.status=='1') {
|
|
|
+ window.location.href = `/platlive/achieveLive/detail?id=${this.info.id}`
|
|
|
+ }else{
|
|
|
+ alert(`展会尚未开启,展会开始时间:${this.info.start_time}!`)
|
|
|
}
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
+</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]);
|
|
|
- }
|
|
|
+ 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
|
|
|
+ //Geometry
|
|
|
|
|
|
- // Materials
|
|
|
+ // Materials
|
|
|
|
|
|
|
|
|
- // Mesh
|
|
|
+ // Mesh
|
|
|
|
|
|
|
|
|
- // Helpers
|
|
|
+ // Helpers
|
|
|
|
|
|
- //Add Stuff to Scene
|
|
|
+ //Add Stuff to Scene
|
|
|
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- function animate() {
|
|
|
+ function animate() {
|
|
|
|
|
|
- requestAnimationFrame(animate);
|
|
|
- render();
|
|
|
- stats.update();
|
|
|
- // controls.update();
|
|
|
- frame++;
|
|
|
- }
|
|
|
+ requestAnimationFrame(animate);
|
|
|
+ render();
|
|
|
+ stats.update();
|
|
|
+ // controls.update();
|
|
|
+ frame++;
|
|
|
+ }
|
|
|
|
|
|
- function render() {
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ 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 < 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)
|
|
|
+ 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;
|
|
|
}
|
|
|
|
|
|
- function onDocumentMouseMove(event) {
|
|
|
+ mouse = new THREE.Vector3(10000, 10000, -2);
|
|
|
+ mouseScaled = new THREE.Vector3(10000, 10000, -2);
|
|
|
|
|
|
- var rect = canvas.getBoundingClientRect();
|
|
|
+ renderer.render(scene, camera);
|
|
|
+ }
|
|
|
|
|
|
- mouse.x = event.clientX - rect.left;
|
|
|
- mouse.y = event.clientY - rect.top;
|
|
|
+ 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)
|
|
|
+ }
|
|
|
|
|
|
- mouseScaled.x = mouse.x * viewWidth / SCREEN_WIDTH - viewWidth / 2;
|
|
|
- mouseScaled.y = -mouse.y * viewHeight / SCREEN_HEIGHT + viewHeight / 2;
|
|
|
+ function onDocumentMouseMove(event) {
|
|
|
|
|
|
- }
|
|
|
+ var rect = canvas.getBoundingClientRect();
|
|
|
|
|
|
- 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;
|
|
|
- }
|
|
|
+ mouse.x = event.clientX - rect.left;
|
|
|
+ mouse.y = event.clientY - rect.top;
|
|
|
|
|
|
- //Event Handlers
|
|
|
- window.addEventListener("resize", onWindowResize);
|
|
|
+ mouseScaled.x = mouse.x * viewWidth / SCREEN_WIDTH - viewWidth / 2;
|
|
|
+ mouseScaled.y = -mouse.y * viewHeight / SCREEN_HEIGHT + viewHeight / 2;
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- init();
|
|
|
- animate();
|
|
|
+ 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;
|
|
|
}
|
|
|
|
|
|
- ThreeJSCanvas(1);
|
|
|
- </script>
|
|
|
- <script>
|
|
|
- function noticeBtn() {
|
|
|
- // window.location.href="../platlive/notice/index"
|
|
|
+ //Event Handlers
|
|
|
+ window.addEventListener("resize", onWindowResize);
|
|
|
+
|
|
|
+
|
|
|
+ init();
|
|
|
+ animate();
|
|
|
+
|
|
|
+ }
|
|
|
+ ThreeJSCanvas(1);
|
|
|
+</script>
|
|
|
+<script>
|
|
|
+ var xin = true,
|
|
|
+ yin = true;
|
|
|
+ var step = 2;
|
|
|
+ var delay = 10;
|
|
|
+ var $obj;
|
|
|
+ $(function () {
|
|
|
+ $obj = $('#floatingDiv');
|
|
|
+ var time = window.setInterval('move()', delay);
|
|
|
+ $obj.mouseover(function () {
|
|
|
+ clearInterval(time);
|
|
|
+ });
|
|
|
+ $obj.mouseout(function () {
|
|
|
+ time = window.setInterval('move()', delay);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ function move() {
|
|
|
+ var left = $obj.offset().left;
|
|
|
+ // console.log(left);
|
|
|
+ var top = $obj.offset().top;
|
|
|
+ var L = (T = 0); //左边界和顶部边界
|
|
|
+ var R = $(window).width() - $obj.width(); // 右边界
|
|
|
+ var B = $(window).height() - $obj.height(); //下边界
|
|
|
+
|
|
|
+ //难点:怎样判断广告的4个边框有没有超出可视化范围!
|
|
|
+ if (left < L) {
|
|
|
+ xin = true; // 水平向右移动
|
|
|
}
|
|
|
- </script>
|
|
|
- <script>
|
|
|
- var xin = true,
|
|
|
+ if (left > R) {
|
|
|
+ xin = false;
|
|
|
+ }
|
|
|
+ if (top < T) {
|
|
|
yin = true;
|
|
|
- var step = 2;
|
|
|
- var delay = 10;
|
|
|
- var $obj;
|
|
|
- $(function () {
|
|
|
- $obj = $('#floatingDiv');
|
|
|
- var time = window.setInterval('move()', delay);
|
|
|
- $obj.mouseover(function () {
|
|
|
- clearInterval(time);
|
|
|
- });
|
|
|
- $obj.mouseout(function () {
|
|
|
- time = window.setInterval('move()', delay);
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- function move() {
|
|
|
- var left = $obj.offset().left;
|
|
|
- // console.log(left);
|
|
|
- var top = $obj.offset().top;
|
|
|
- var L = (T = 0); //左边界和顶部边界
|
|
|
- var R = $(window).width() - $obj.width(); // 右边界
|
|
|
- var B = $(window).height() - $obj.height(); //下边界
|
|
|
-
|
|
|
- //难点:怎样判断广告的4个边框有没有超出可视化范围!
|
|
|
- if (left < L) {
|
|
|
- xin = true; // 水平向右移动
|
|
|
- }
|
|
|
- if (left > R) {
|
|
|
- xin = false;
|
|
|
- }
|
|
|
- if (top < T) {
|
|
|
- yin = true;
|
|
|
- }
|
|
|
- if (top > B) {
|
|
|
- yin = false;
|
|
|
- }
|
|
|
- //根据有没有超出范围来确定广告的移动方向
|
|
|
- left += step * (xin == true ? 1 : -1);
|
|
|
- top += step * (yin == true ? 1 : -1);
|
|
|
- // 给div 元素重新定位
|
|
|
- $obj.offset({
|
|
|
- top: top,
|
|
|
- left: left,
|
|
|
- });
|
|
|
}
|
|
|
+ if (top > B) {
|
|
|
+ yin = false;
|
|
|
+ }
|
|
|
+ //根据有没有超出范围来确定广告的移动方向
|
|
|
+ left += step * (xin == true ? 1 : -1);
|
|
|
+ top += step * (yin == true ? 1 : -1);
|
|
|
+ // 给div 元素重新定位
|
|
|
+ $obj.offset({
|
|
|
+ top: top,
|
|
|
+ left: left,
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- </script>
|
|
|
+</script>
|
|
|
</body>
|
|
|
-<!-- layui -->
|
|
|
<script type="text/javascript" src="static/home/lib/layui/layui.all.js"></script>
|
|
|
-
|
|
|
</html>
|