three.js加入监控

    <!DOCTYPE html>  <html>  <head>  <meta charset="UTF-8">  <title>Three框架</title>  <script type="text/javascript" script src="libs/three.js"></script>  <script type="text/javascript" script src="libs/stats.min.js"></script>  <style type="text/css">  div#canvas-frame {  border: none;  cursor: pointer;  width: 100%;  height: 600px;  background-color: #EEEEEE;  }  </style>  <script>  var renderer;  var stats;  function initThree() {  width = document.getElementById('canvas-frame').clientWidth;  height = document.getElementById('canvas-frame').clientHeight;  renderer = new THREE.WebGLRenderer({ antialias : true });  renderer.setSize(width, height);  document.getElementById('canvas-frame').appendChild(renderer.domElement);  renderer.setClearColor(0xFFFFFF, 1.0);  stats = new Stats();  //stats对象初始化
                    stats.domElement.style.position = 'absolute'; //将stats对象加入到html网页中,绝对坐标
                    stats.domElement.style.left = '0px';// (0,0)px,左上角
                    stats.domElement.style.top = '0px';  document.getElementById('canvas-frame').appendChild(stats.domElement);  }  var camera;  function initCamera() {  camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);  camera.position.x = 0;  camera.position.y = 0;  camera.position.z = 600;  camera.up.x = 0;//camera.up 设置相机的倾斜角度，歪着拿相机，照片自然也不是水平的
                    camera.up.y = 0;  camera.up.z = 0;  camera.lookAt({ //镜头看着哪里呢？景物在动
                        x : 0,  y : 0,  z : 0  });  }  var scene;  function initScene() {  scene = new THREE.Scene();  }  var light;  function initLight() {  light = new THREE.PointLight(0x00FF00);  light.position.set(0, 0,300);  scene.add(light);  }  var cube;  var mesh;  function initObject() {  var geometry = new THREE.CylinderGeometry( 10,15,40);  var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );  mesh = new THREE.Mesh( geometry,material);  mesh.position.x = 100;  mesh.position.y = 100;  mesh.position.z = 100;  scene.add(mesh);  }  function threeStart() {  initThree();  initCamera();  initScene();  initLight();  initObject();  animation();  }  function animation()  {  mesh.position.z+=1;  renderer.render(scene, camera);  requestAnimationFrame(animation);  stats.update();//这个函数真好用
                }  </script>  </head>  <body onload="threeStart();">  <div id="canvas-frame"></div>  </body>  </html>

three.js加入监控相关推荐

搭建前端监控系统（二）JS错误监控篇
背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点.另一点主要原因是,功能通用,却未必能够满足我们自己的需求, 所以我们自给自足. 这是搭建前端监控系统的第二章,主要是介绍如何统 ...
JS怎样监控监控收集用户的行为数据
这篇文章给大家分享的是JS怎样监控监控收集用户的行为数据.小编觉得挺实用的,因此分享给大家做个参考,文中的介绍得很详细,而要易于理解和学习,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧. 引言 ...
前端js错误监控onerror的总结
打工者联盟为了抵抗996.拖欠工资.黑心老板.恶心公司,让我们组成打工者联盟.客观评价自己任职过的公司情况,为其他求职者竖起一座引路的明灯.https://book.employleague.cn/ ...
JS实现监控微信小程序
博客地址 <使用模块化工具打包自己开发的JS库>文章中有提到,当时需要写一个SDK,监控小程序的后台接口调用和页面报错,今天就来说下实现原理吧! 原理之前也做过浏览器web端的SDK数据 ...
html实现ezuikit.js萤石云直播监控，ezuikit.js实时监控实现，萤石云实时监控简单实现
效果图实现下面方式一的播放url获取:登录萤石云->控制台->我的资源->设备列表->列表中:查看通道->监控地址下面方式二的播放url获取:登录萤石云->控 ...
vue.js海康威视监控使用，以及遇到的问题
使用海康威视之前要先安装海康提空的web应用程序,注意是应用程序不是插件,所以后面你会发现渲染出来的监控框不是页面上的元素而是一个程序,然后会引起一些问题. 一,应用程序下载海康web应用程序下载 ...
2.Knockout.Js（监控属性Observables）
前言 1.创建一个ViewModel <script type="text/javascript">//1.创建一个ViewModelvar myViewModel = ...
HTML+JS 实现监控切屏
项目描述该项目是我在网上看其他博客的时候无意中看到的,看见别人居然能实现这种操作很好奇项目要求做到监控网页状态记录离开次数离开时间记录离开页面实现这个切换页面功能需要用到一个web的AP ...
js破解监控交易所聊天，自动抢红包思路
最近看币种行情的时候,发现QTBC交易所时不时的有人发红包,当时就在想,可不可以搞一个自动抢红包的脚本,反正红包再小也是肉,说干就干首先分析这个聊天室,实时的推送消息,打开开发者工具查看,可以在we ...

three.js加入监控

three.js加入监控相关推荐

最新文章

热门文章