Three.js 开发基础知识 - 绘制3D对象
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 旋转的立方体
最新评论
- 相关文章
2019年开源WebRTC媒体服务器选型比较
什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...
OpenGL/WebGL顶点坐标变换过程简介
世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...
ES6小知识:动态对象键(Dynamic Object Keys)语法简介
在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const
使用CSS3 box-decoration-break特性实现多行文本样式
当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
按照规范...HTML5动画背后的数学2 - 仿生智能算法综述
HTTP1.1协议现状、问题和解决方案
HTTP的现状最早的HTTP协议非常简单,只能用来传送文本,方法也只有GET,后来逐步发展到1.1,能够支持多种MIME格式数据(如文本、文件),支持GET,POST,HEAD,OPTI...
Babylon.js入门教程和开发实例
Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...
WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解
我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...
WebGL入门教程5 - 详解纹理滤镜(Texture Filter)
WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
这个参数用来处理当对象出现缩放时,纹理如何处理中间...如何使用WebGL实现空气高温热变形动画特效
我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...
WebGL入门教程3 - Canvas、Context、API和绘制一个矩形
如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象
jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery
如何使用CSS3实现一个平滑的3D文本标题
要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...
Processing.js和P5.js的功能简介和区别
什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
什么是Processing.js为了能让Proce... 更多...