Three.js入门---创建一个动起来的立方体

Three.js介绍

Three.js是一款开源的主流3D绘图JS引擎,原作者是Mr.Doob,Three.js项目地址为

我们知道WebGL是一种网页3D绘图标准,和jQuery简化了HTML DOM操作一样,Three.js 可以简化WebGL编程

严格意义上讲,除了WebGL之外,Three.js也支持其他渲染器如Canvas 2D,因此即使在不支持WebGL的浏览器中,也可以回退

Three.js使用

1.下载压缩库并将其包含在您的HTML中

<script src="three.js"></script>

2.将其安装并导入为模块

npm install three
//在使用Webpack或Browserify之类的工具捆绑文件,通过捆绑所有依赖项,它们可以在浏览器中“ require('modules')”
var THREE = require('three');
var scene = new THREE.Scene();
//或者利用ES6导入语法
import * as THREE from 'three';
const scene = new THREE.Scene();
//只想导入three.js库的选定部分,例如Scene:
import { Scene } from 'three';
const scene = new Scene();

Three.js入门

如果你学习过WebGL程序,你应该了解创建一个WebGL程序,你基本上需要四个步骤:

  1. 初始化WebGL绘图上下文
  2. 初始化着色器程序
  3. 建立模型和数据缓存
  4. 完成绘制和动画

  这基本是一种过程式编程,而Three.js则不尽相同,其使用面向对象的方式来构建应用程序,包含3个基本对象:场景(scene),相机(camera),以及一个渲染器(render)。拿电影来类比的话,场景对应于整个布景空间,相机是拍摄镜头,渲染器用来把拍摄好的场景转换成胶卷(对于网页来讲,是电脑屏幕)。 场景和相机代表了3D观察空间和数据模型,渲染器则包含了WebGL绘图上下文和着色器。

创建一个场景

//创建场景
var scene = new THREE.Scene();

创建一个相机

// Three.js的架构支持多种camera,这里使用最常用的远景相机(PerspectiveCamera),
//也就是类似人眼的观察方式
var camera = new THREE
.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

属性介绍:

  1. 第一个属性75设置的是视角(filed of view);
  2. 第二个属相设置的是相机拍摄面的长宽比,使用元素的宽除以高,否则会出现挤压变形。
  3. 近裁平面
  4. 远裁平面

视锥体
  这几个参数所限定的绿色3D空间被称之为视椎体(View Frustum),用来裁剪视图,在该视锥体以外的物体将不会被渲染。我们暂时可以先不管,但你需要了解这个空间和渲染性能有关。

创建渲染器

//渲染器,所有魔法效果都在这里产生。除了我们这里使用的WebGLRenderer,three.js
//支持一些其它渲染器,基本上只是用来回退处理那些不支持WebGL的旧式用户浏览器。
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

  除了创建renderer实例,我们还需要设置渲染空间的尺寸,一般就使用目标屏幕的宽高(window.innerWidth和window.innerHeight),也可以给定一个小尺寸。
  如果你想保持渲染空间的尺寸,但使用一个较低的分辨率,你可以在调用setSize的时候设置参数updateStyle为false,比如 setSize(window.innerWidth/2, window.innerHeight/2, false) 将使用1/2分辨率来绘制你的应用程序,假定为100%的宽高。
  最后,我们把 renderer 元素添加到HTML文档中。这里是一个 元素,渲染器用来显示场景。

创建3D立方体

上面的都是准备工作,电影布景都好了,演员还没进场。接下来我们添加“演员”。

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),这是一个包含立方体所有顶点和填充面的对象。
  除了这个几何模型(geometry)外,我们还需要一个材料(material)来对其着色。Three.js支持多种材料,现在我们只使用 网孔基础材料(MeshBasicMaterial)。 所有材料都含有一个属性对象。这里简单起见,我们只提供了颜色值为0x00ff00,表示绿色。这和CSS和Photoshop中16进制颜色值一样。
  第3件事是我们需要一个网孔(Mesh)。网孔是用来承载几何模型的一个对象,还可以把材料应用到它上面,然后添加到场景中完成旋转动画。
默认情况下,当我们调用 scene.add() 时,对象将被添加到原点处,即坐标点(0,0,0),这将导致相机和立方体发生空间重叠。为了避免这样,我们把相机(camera)的位置移出来一些。

渲染场景(Rendering the scene)

  如果你在新建作品中拷贝了前述的代码,并点击[运行],你还是看不到任何东西,因为我们还没有实际去渲染它。为此,我们需要一个 渲染循环(render loop)。

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

  这将创建一个循环,以每秒60次的频率来绘制场景。阅读过本站相关教程的同学,可能会熟悉requestAnimationFrame这个函数,它用来替代 setInterval, 这个新接口具备多个优点,比如浏览器Tab切换后停止渲染以节约资源、和屏幕刷新同步避免无效刷新、在不支持该接口的浏览器中能安全回退为setInterval。

创建动画(Animating the cube)

  如果你一步步完成前述的代码,点击[运行],你现在应该可以看到一个绿色的立方体,现在我们添加一点动画,让它转动起来。
把如下代码加在 render 函数中 renderer.render 这行代码之前:

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

  这样我们就使用Three.js完成了一个旋转的立方体。基本上,如果要改变立方体的运动,我们都是在render循环中处理。

实例让一个立方体动起来代码

var THREE = require('three');
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 );

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;

var render=function() {
  requestAnimationFrame( render );
  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;
  renderer.render( scene, camera );
}
render();

参考链接

Three.js项目地址为
Three.js中文教程

发布了169 篇原创文章 · 获赞 14 · 访问量 7万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览