准备工作:

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. staxon实现json和xml互转

    pom.xml: <dependency> <groupId>de.odysseus.staxon</groupId> <artifactId>stax ...

  2. Ubuntu14.04无法在var/www内新建文档

    /var/www文件夹的所有者属于www-data用户组. 要想用你自己的帐号在/var/www里面创建文件和文件夹,最好的办法是把自己的帐号纳入到www-data用户组中. 命令:sudo user ...

  3. AndroidStudio 1.4配置NDK

    AndroidStudio(AS) 1.3之后已经支持NDK,这为NDK开发提供了极大的便利,不在需要配置各种头疼的MK文件,简单的九步就可完成配置.要说明的是,第一次配置AS一定要有耐心. 0,下载 ...

  4. [Android] Visual Studio Emulator For Android 相关

    1.修改设备名 C:\Users\[用户名]\AppData\Local\Microsoft\VisualStudioEmulator\Android\Containers\Local\Devices ...

  5. POJ2096 Collecting Bugs

    Time Limit: 10000MS   Memory Limit: 64000K Total Submissions: 5090   Accepted: 2529 Case Time Limit: ...

  6. js获取手机验证码倒计时的实现

    方案一 <div class="div user-input"> <input type="number" class="code& ...

  7. C#基础:飞行棋游戏

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. 矩阵或多维数组两种常用实现方法 - python

    在python中,实现多维数组或矩阵,有两种常用方法: 内置列表方法和numpy 科学计算包方法. 下面以创建10*10矩阵或多维数组为例,并初始化为0,程序如下: # Method 1: list ...

  9. href,src,url 整理

    一.href 和 src 的定义及区别 href:Hypertext Reference(超文本引用),指定网络资源的位置,从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接 ...

  10. cygwin 安装完后不能进入think问题,网上99%都是错误的

    正确的做法是首次进入的时候,显示的是哪个用户名就修改哪个用户名 比如我的电脑是 默认显示的是think 那么就去修改think 为 root 并把unused 后的2个数字改成0 然后在home下新建 ...