Three.js 开发基础知识 - 绘制3D对象

iefreer 发表于 2016-05-18 18:34:29

标签: webgl, 三维, three.js, html5

- +

Three.js是一个用来简化WebGL开发的JavaScript库,比如绘制一个三维立方体,

使用WebGL需要100多行,那Three.js只要10几行就能够完成。

本文通过创建一个立方体来简单介绍Three.js的基础知识。

Three.js中的基本概念

Three.js包含3个基本概念:场景(Scene)、相机(Camera)和渲染器(Renderer)。

场景就是需要绘制的对象,相机代表取景的视角,渲染器是绘制的载体(可以挂靠到浏览器的DOM元素中),

也就是我们通过相机拍摄场景然后绘制到目标介质中去。

创建场景、相机和渲染器
var scene = new THREE.Scene();  
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );  
  
var renderer = new THREE.WebGLRenderer();  
renderer.setSize( window.innerWidth, window.innerHeight );  
document.body.appendChild( renderer.domElement );

上述代码首先创建一个场景,然后创建一个PerspectiveCamera(立体感的相机),

接着创建了一个WebGL的渲染器(注意Three.js也支持非3D的Canvas 2D的渲染器),然后挂靠为HTML文档body的DOM子元素。

创建立方体 
var geometry = new THREE.BoxGeometry( 1, 1, 1 );  
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );  
var cube = new THREE.Mesh( geometry, material );  
scene.add( cube );  
  
camera.position.z = 5;

有了场景,我们就可以在场景上添加实际几何对象,上述代码首先创建一个BoxGeometry(盒状几何)对象,

接着创建了一个色彩为绿色的材料,然后通过Mesh(图元装配函数)方法把颜色应用到几何对象上,这样就构建了一个绿色的立方体。

最后把该立方体对象添加到场景(scene)中,并设置视觉深度。

绘制场景

编写了上述代码后,我们就已经有了可以绘制的对象、视角、渲染器;接下来就是把对象实际绘制出来。

function render() {  
    requestAnimationFrame( render );  
    renderer.render( scene, camera );  
}  
render();

上面的代码实际是一个循环操作,每60秒绘制一下场景。之所以使用requestAnimationFrame方法,

而不是setInterval是因为前者更能节省资源(在浏览器页面切换时,会暂停执行)。

实现动画

接下来我们尝试让这个立方体旋转起来,这样更有趣一些。在render函数中添加如下代码:

cube.rotation.x += 0.1;  
cube.rotation.y += 0.1;

也就是通过动态改变立方体的x和y的径向坐标来实现旋转。

完整代码和最终效果:Three.js 旋转的立方体

possitive(0) negative(0) views10379 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章
  • WebGL、Asm.js和WebAssembly概念简介

    随着HTML技术的发展,网页要解决的问题已经远不止是简单的文本信息,而包括了更多的高性能图像处理和3D渲染方面。这正是要引入WebGL、Asm.js和WebAssembly这些技...

  • ES6小知识:动态对象键(Dynamic Object Keys)语法简介

    在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const

  • JavaScript语言多编程范式简介

    和C++等语言类似,JS支持多范式(paradigms)编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式:命令式、面向对象和函数式。命令式(Imperative JavaScript)命令式就是简单的从上而下完成任务,流水账过程式编码风格:function

  • CSS3弹性布局弹性流(flex-flow)属性详解和实例

    弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction...

  • WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解

    我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...

  • 如何使用Three.js加载obj和mtl文件

    OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...

  • WebVR简介和常用资源链接

    什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星...

  • Three.js入门教程2 - 着色器(上)

    之前我已经给出了一篇

  • WebGL入门教程3 - Canvas、Context、API和绘制一个矩形

    在教程2中,我们已经讲述了计算机图形处理硬件结构和流水线。在本文中,我们将开始讲述WebGL的具体应用程序编程接口(API)。WebGL应用程序编程步骤分为以下几步:
    创建一个canvas元素从canvas中获取webgl渲染...

  • 在PHP网页程序中执行Sass/Compass命令

    我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...

  • 更多...