一个简单的案例，理解threejs中几个基本概念

种种原因吧，需要在和大伙分享Elasticsearch的间隙，也来分享一下threejs的一些用法。有一个小小愿望，希望这个threejs教程最终也能成一个系列。随着浏览器性能的不断提升，以及对webgl的支持，在浏览器上展示3d模型早已不是痴人说梦，不过如果使用原生的webgl的话，开发起来难度还是略大，一个常见的解决方案就是使用threejs，这是一个封装的库，使用它我们可以更好的在网页上实现3d效果，threejs地址为https://github.com/mrdoob/three.js。

好了，废话不多说，接下来我想通过一个简单的案例，先和大伙来聊一聊threejs中几个简单的概念。

资源下载

首先，在GitHub上下载threejs，这个下载方式就不需要我多说了，相信大伙都能自己解决，下载地址https://github.com/mrdoob/three.js。

基本概念

在threejs中有几个基本的概念：

1.场景

场景就是你看到的花花世界，这就是一个场景，反映到threejs中，场景就是所有物体的容器，例如，我们想显示一个卡车，那就要将这个卡车放加入到场景中，然后才能显示出来。

2.相机

相机就相当于人的眼睛，人用眼睛看这花花世界，而在threejs中，使用相机来观察场景，相机的位置、相机的角度都决定了看到的场景会不同，相机有透视相机和正投影相机等。

3.渲染器

渲染器就是将相机拍摄的画面在页面的某个dom节点中显示出来。

4.组件

组件就是要显示的物体，这种物体有平面几何物体，有三维物体。

代码实现

创建一个普通项目，将下载到的threejs中的build/three.js文件拷贝到项目中，然后在项目中创建一个html页面，如下：

开始代码编写：

首先在需要将threejs引入到项目中，然后在js中分别创建场景、相机、渲染器以及组件：

代码语言：javascript复制

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth /window.innerHeight, 1, 1000);
var render = new THREE.WebGLRenderer();
render.setClearColor("#FFFFFF");
render.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(render.domElement);
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0xFFB6C1});
var cube = new THREE.Mesh(geometry, material);

代码解释：

newTHREE.Scene()表示创建一个场景出来。
第2行代码表示创建一个相机，第一个参数视角为60度，第二个参数表示实际窗口的宽高比，第三个参数表示近平面，第四个参数表示远平面（关于最后两个参数，涉及到一点图形学的东西，人的眼睛看到的空间区域是一个四棱台，太近的太远的都看不到，近处的截面就是近平面，最远处的截面就是远平面，读者暂时可以这样理解）。
第3-5行代码表示创建一个渲染器，设置渲染器颜色为白色，同时设置渲染器的大小。
第6行代码表示将渲染器渲染的结果在页面的body元素中显示出来。
第7-9行代码表示创建一个三维的立方体，设置材料的颜色为粉色，然后利用THREE.Mesh构造一个立方体出来。

元素都创建出来了，接下来将组件添加到场景中，同时设置相机的深度为5，如下：

代码语言：javascript复制

scene.add(cube);
camera.position.z = 5;

最后，通过如下方式将图像渲染出来：

代码语言：javascript复制

function showCube() {
    render.render(scene, camera);
}
showCube()

传入场景和相机，利用渲染器将之渲染出来，最终执行结果如下：

此时的图像是静止不动的，让图像动起来，有两种不同的方式：

图像本身动起来
相机动起来

本案例采用第一种方式，让图像在三个坐标上旋转，修改showCube方法如下：

代码语言：javascript复制

function showCube() {
    requestAnimationFrame(showCube)
    cube.rotation.x  = 0.01;
    cube.rotation.y  = 0.01;
    cube.rotation.z  = 0.01;
    render.render(scene, camera);
}

requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘，然后在重绘过程中使图像旋转起来，如下：

本项目案例完整下载地址： https://github.com/lenve/threejsDemo

好了，至此，一个简单的案例就完成了。不知道大伙对threejs有没有一点入门呢？

ElasticsearchService webgl http git 容器

0 人点赞