HTML5技术

使用three.js实现机器人手臂的运动效果 - faker_archer

字号+ 作者:H5之家 来源:H5之家 2017-05-21 14:02 我要评论( )

Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习

  Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面。——百度百科

  Three.js封装了OpenGl ES 2.0 的API,使得我们更容易在浏览器上开发各种图形效果。比起使用winform,MFC等形式,这个代码库可以让我们避开一些winform和MFC的细节问题,而专注于图形的绘制。不过由于这个库也并没有封装到非常完美,所以有些部分还需要我们自己来实现。

  在此贴上Three.js中文文档的连接地址Three.js 中文文档 | 参考手册 | 使用指南 | 动画特效实例 | 踏得网

  虽然这个链接上的文档有一些错误,还有许多坑,很多东西都没有说明清楚,不过,也是可以参考的。

  如果要直接看效果,可以直接下载文章末尾的源代码,附带了操作方式。还需要使用电脑浏览器打开代码,因为没有对移动端做适配,所以移动端效果不好。

  接下来,让我们实现一个机器人的手臂运动效果。效果如下图

  

  很丑对不对,但这只是一个教程,所以美化可以自己来做,过多的美化工作反而会增加学习的复杂程度。

  我们制作这个机器人,需要解决的一些问题是:

    1.如何让我们的图形沿着任意轴转动;

    2.如何使用键盘控制其转动;

  这两个问题解决了,那么我们的机器人也就非常容易绘制了。接下来,就开始详解代码以及思路了。

  首先,我们需要生成一个canvas,因为在html5中,所有的绘图工作都是在canvas中进行。我们可以写一个canvas标签,也可以让Three.js帮我们生成一个。这里我们让Three.js帮我们生成:

  

1 var scene = new THREE.Scene(); 2 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); 3 camera.position.z = 5; 4 camera.position.y = 1; 5 camera.position.x = 1.5; 6 camera.lookAt(new THREE.Vector3(0, 0, 0)); 7 scene.add(camera); 8 var renderer = new THREE.WebGLRenderer(); 9 renderer.setSize(window.innerWidth, window.innerHeight); 10 document.body.appendChild(renderer.domElement);

  为什么相机要进行位置的调整呢?这是因为,如果我们不调整位置,那么我们的视角是正对着物体的,物体的3D效果会因为视角问题而显得不那么明显。

  接下来,我们要绘制机器人的头,腿,身体。需要注意的是,如果我们为我们生成的图形选择了不合适的材质,会导致3D效果观察不明显。关于材质的选择,已经超出了要讲述的范围,所以为了演示简单,我们只使用基本材质。代码如下:

  

geometry = new THREE.BoxGeometry(1, 1, 1, 8, 8, 8); 3 var material = new THREE.MeshBasicMaterial({ 4 color: 0x00ff00, }); 7 var cube = new THREE.Mesh(geometry, material); 8 cube.position.y = -1; head = new THREE.SphereGeometry(0.5, 32, 32); 11 var material = new THREE.MeshBasicMaterial({ 12 color: 0x0909FD, 13 wireframe: true 14 }); 15 var sp = new THREE.Mesh(head, material); geometry = new THREE.BoxGeometry(0.1, 1, 0.1); 18 var material = new THREE.MeshBasicMaterial({ 19 color: 0xFF2E67, 20 wireframe: true 21 }); 22 var left_leg = new THREE.Mesh(geometry, material); 23 var right_leg = new THREE.Mesh(geometry, material); 24 left_leg.position.x = -0.3; 25 left_leg.position.y = -2; 26 right_leg.position.x = 0.3; 27 right_leg.position.y = -2;

  我们的机器人就画成了这样:

  

  接下来,就到了最关键的地方:机器人手臂的转动。很多刚学习的同学都发现,我们的图形的旋转轴是在图形的正中心。什么意思呢?看这个图:

  

  我在图中已经标识了我们生成物体的坐标轴,可以看出,坐标轴实际上是在位置的重心。我们通过函数或者设置属性的方法,只能绕着这三个轴转。有同学问,可不可以通过先移位,再旋转,再移回原位置的方式来解决这个问题呢?我们的计算机图形学课本上是这么教的,在winfoem和MFC上也是可以做到的,但由于three.js生成的物体的坐标轴的特殊性,我们无法通过这种形式来解决(亲测)。有兴趣的同学可以自己试一试。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jqGrid使用json实现的范例一 - meetweb

    jqGrid使用json实现的范例一 - meetweb

    2017-05-20 18:00

  • 一个标签实现滚动 - 小僵尸

    一个标签实现滚动 - 小僵尸

    2017-05-18 17:02

  • three.js粒子效果(分别基于CPUGPU实现) - cnwander

    three.js粒子效果(分别基于CPUGPU实现) - cnwander

    2017-05-18 13:00

  • 如何实现在Windows上运行Linux程序,附示例代码 - q303248153

    如何实现在Windows上运行Linux程序,附示例代码 - q303248153

    2017-05-16 14:00

网友点评
s