准备工作:

1.stat.js

stat.js是Three.js的作者Mr. Doob的另一个有用的JavaScript库。很多情况下,我们希望知道实时的FPS信息,从而更好地监测动画效果。这时候,stat.js就能提供一个很好的帮助,它占据屏幕中的一小块位置(如左上角),效果为:,单击后显示每帧渲染时间:

下载链接:https://github.com/mrdoob/stats.js/blob/master/build/stats.min.js

使用方法:引入文件后

var stat = null;

function init() {
stat = new Stats(); //实例化stat
stat.domElement.style.position = 'absolute';
stat.domElement.style.right = '0px';
stat.domElement.style.top = '0px';
document.body.appendChild(stat.domElement); // Three.js init ...
}

动画重绘函数draw中调用stat.begin();stat.end();分别表示一帧的开始与结束:

function draw() {
stat.begin(); mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * );
renderer.render(scene, camera); stat.end();
}

最终就能得到FPS效果了。

2.OrbitControls.js

OrbitControls.js是一个类似于精灵球的插件。使用这个插件后可以方便的使用鼠标控制世界旋转,关于这个插件国内的资料真的是少。走了不少弯路,

先附上下载链接:https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js

OrbitControls旋转的摄像机,大致的意思是这个。新手勿喷!!!

OrbitControls接受两个参数第一个参数一般设置为camera相机,第二个参数为render.domelement,

使用方法:

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );

此处贴源码

function animate() {
requestAnimationFrame( animate );
controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true
stats.update();
render();
}

开始工作

js部分

           var stats;
var camera, controls, scene, renderer;
init();
animate();
function init() {
//scene
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
//renderer
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xe8e8e8);
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
var container = document.getElementById( 'container' );
container.appendChild( renderer.domElement ); //camera
camera = new THREE.PerspectiveCamera( , window.innerWidth / window.innerHeight, , );
camera.position.z = ;
//mouseControl
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true; // world
var cube=new THREE.Mesh(new THREE.CubeGeometry(,,,),
new THREE.MeshLambertMaterial({
coloe:0x00d9b5
})
)
scene.add(cube);
// lights
light = new THREE.DirectionalLight(0x000000);
light.position.set( , , );
scene.add( light );
light = new THREE.DirectionalLight(0x00d9b5);
light.position.set( -, -, - );
scene.add( light );
light = new THREE.AmbientLight(0x00d9b5);
scene.add( light );
//
stats = new Stats();
container.appendChild( stats.dom );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true
stats.update();
render();
}
function render() {
renderer.render( scene, camera );
}

html

<div id="container"></div>

附上链接:http://runjs.cn/detail/eb4s7gxv

【webGL】插件的使用的,实现一个鼠标动画的盒子的更多相关文章

  1. 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  2. HOOK API (一)——HOOK基础+一个鼠标钩子实例

    HOOK API (一)——HOOK基础+一个鼠标钩子实例 0x00 起因 最近在做毕业设计,有一个功能是需要实现对剪切板的监控和进程的防终止保护.原本想从内核层实现,但没有头绪.最后决定从调用层入手 ...

  3. 深刻:截获windows的消息并分析实例(DefWindowProc),以WM_NCHITTEST举例(Windows下每一个鼠标消息都是由 WM_NCHITTEST 消息产生的,这个消息的参数包含了鼠标位置的信息)

    1,回调函数工作机制 回调函数由操作系统自动调用,回调函数的返回值当然也是返回给操作系统了. 2,截获操作系统发出的消息,截获到后,将另外一个消息返回给操作系统,已达到欺骗操作系统的目的. 下面还是以 ...

  4. synergy一个鼠标键盘控制多台电脑

    有些时候我们同时操作多台电脑,但是我们只用一个鼠标和一个键盘,如果通过转换器啊或者是多个鼠标键盘就非常不方便了 下面我介绍一下通过安装synergy这个软件来给开发人员提供方便 这个软件安装比较简单, ...

  5. 用js写一个鼠标坐标实例

    HTML代码 写一个div来作为鼠标区域 div中写一个span显示坐标信息 <body> <div id=""> <span></spa ...

  6. [Mugeda HTML5技术教程之3] Hello World: 第一个Mugeda动画

    今天我们开始我们的第一个Mugeda动画作品,并通过它来看看制作Mugeda动画的一些通用流程.在开始制作之前,请确保你已经拥有一个Mugeda网站的账号.如果还没有,你可以登录 www.mugeda ...

  7. Unity插件 - MeshEditor(五) 网格顶点动画(变形动画)

    源码已上传至github,并持续更新,链接请看底部.(本帖跟随github持续更新) 网格顶点动画(变形动画)是针对于物体的形状可以随意变换并记录为关键帧的动画,虽然模型的顶点数据还是应该交给GPU绘 ...

  8. javascript--鼠标拖拽窗口案例(鼠标按下,在鼠标移动过程中,盒子跟着一起移动,鼠标松开,盒子停止移动)

    界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...

  9. JavaScript--获取页面盒子中鼠标相对于盒子上、左边框的坐标

    分析: 外层边框是浏览器边框,内部盒子是页面的一个盒子,绿点是盒子中鼠标的位置.鼠标相对盒子边框的坐标=页面中(注意不是浏览器)鼠标坐标-盒子相对于浏览器边框的偏移量 第一步:求浏览器边框位置 x=e ...

随机推荐

  1. ios相同版本升级

    公司新发布ios,因为各种错误以及审核不通过造成app未能上传,而app在提交的时候不能上传相同的版本号,造成app还没有正式的上传上传已经将版本号升级到1.0.6 解决方法: 在Xcode上,查看项 ...

  2. 163邮箱问题:554 DT:SPM 163 smtp5,D9GowACHO7RNWNdXmXs1Bw--.9035S2

    最近公司需要开发一个自定义邮箱功能,上网查询一下,利用163邮箱发送邮件. 由于163 的反垃圾机制,(坑爹机制.) 一般出现 554有在1)测试中用了test,测试,关键字在主题或者内容里面. 但是 ...

  3. AngularJS版本下载

    大家可以从下面地址获取AngularJS所以版本: https://code.angularjs.org/

  4. easyUI和bootstrap的混搭

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  5. TF-IDF算法学习报告

    TF-IDF是一种统计方法,这个算法在我们项目提取关键词的模块需要被用到,TF-IDF算法是用来估计 一个词汇对于一个文件集中一份文件的重要程度.从算法的定义中就可以看到,这个算法的有效实现是依靠 一 ...

  6. Nginx在线服务状态下平滑升级或新增模块的详细操作

    今天应开发的需求,需要在Nginx增加一个模块,并不能影响现有的业务,所以就必须要平滑升级Nginx,好了,不多说了 1:查看现有的nginx编译参数 /usr/local/nginx/sbin/ng ...

  7. ubuntu安装simplejson模块

    在terminal中输入 sudo apt-get install python-simplejson -y import simplejson print simplejson.dumps(lens ...

  8. 关于Nginx的一些优化(突破十万并发)

    nginx指令中的优化(配置文件) worker_processes 8; nginx进程数,建议按照cpu数目来指定,一般为它的倍数. worker_cpu_affinity 00000001 00 ...

  9. thinkphp缓存

    最简答的缓存 // 缓存设置 public function ff(){ S('); } // 缓存读取 public function aa(){ $value = S('name'); echo ...

  10. 启动Tomcat内存溢出解决:java.lang.OutOfMemoryError: PermGen space

    Eclispe 设置Tomcat的时候,双击server的配置,配置如下: