three.js入门篇

时间 2019-11-07

原文原文链接

背景

一个偶然的机会看到了用three.js开发的3D效果，当即引发了个人兴趣，直接用JavaScript轻松的建立在浏览器上显示的3D模型，这在之前要作这样的效果门槛但是很高的，这实在是前端开发的一个福音。css

简介

OpenGL是最经常使用的跨平台图形库，WebGL是基于OpenGL设计的面向web的图形化标准，提供了一系列JavaScript API，经过这些API进行图形渲染将得以利用图形硬件从而得到较高性能。而Three.js是经过对WebGL接口的封装与简化而造成的一个易用的图形库。html

简单点的说法：WebGL能够当作是浏览器给咱们提供的接口，在JavaScript中能够直接用这些API进行3D图形的绘制；而Three.js就是在这些接口上又帮咱们封装得更好用一些。 Three.js是经过对WebGL接口的封装与简化而造成的一个易用的图形库。前端

也有不少人直接使用WebGL开发图形化应用，但WebGL门槛相对较高，须要相对较多的数学知识。虽然WebGL提供的是面向前端的API，但本质上WebGL跟前端开发彻底是两个不一样的方向，知识的重叠不多。相关性只是他们都在web平台上，都是用JavaScript而已。一个前端程序员或许还熟悉解析几何，可是还熟悉线性代数的应该寥寥无几了（好比求个逆转置矩阵试试？），更况且使用中强调矩阵运算中的物理意义，这在教学中也是比较缺失的。git

所以，前端工程师想要短期上手WebGL仍是挺有难度的。因而，Three.js对WebGL提供的接口进行了很是好的封装，简化了不少细节，大大下降了学习成本。而且，几乎没有损失WebGL的灵活性。程序员

概念

在Three.js中，有3个重要的组件：场景（scene）、相机（camera）和渲染器（renderer）。这是将物体渲染到网页中的三个必不可少的要素。github

场景
场景是全部物体的容器，若是要显示一个苹果，就须要将苹果对象加入场景中。web

相机
相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛同样，人站在不一样位置，抬头或者低头都可以看到不一样的景色。浏览器

场景只有一种，可是相机却又不少种。和现实中同样，不一样的相机肯定了呈相的各个方面。好比有的相机适合人像，有的相机适合风景，专业的摄影师根据实际用途不同，选择不一样的相机。对程序员来讲，只要设置不一样的相机参数，就可以让相机产生不同的效果。bash

渲染
最后一步就是设置渲染器，渲染器决定了渲染的结果应该画在页面的什么元素上面，而且以怎样的方式来绘制。前端工程师

看一下代码框架：

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);
复制代码

注：渲染器renderer的domElement元素，表示渲染器中的画布，全部的渲染都是画在domElement上的，因此这里的appendChild表示将这个domElement挂接在body下面，这样渲染的结果就可以在页面中显示了。

例子

要开始three.js很简单，只要有浏览器和three.js这个源文件就能够开始了。

three.js能够直接引用cdn路径：cdn.bootcss.com/three.js/92…)，或者到github下载源码。

下面用three.js建立一个简单的例子，先看效果图：

下面是代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
     <style>
        body {
            margin: 0;
        }

    </style>
</head>
<body onload="init()">
<script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
<script>
    //声明一些全局变量
    var renderer, camera, scene, geometry, material, mesh;
  
   //初始化场景
    function initScene() {
        scene = new THREE.Scene(); //实例化场景
    }

    //初始化相机
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //实例化相机
        camera.position.set(0, 0, 15);
    }

    //初始化渲染器
    function initRenderer() {
        renderer = new THREE.WebGLRenderer(); //实例化渲染器
        renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
        document.body.appendChild(renderer.domElement); //添加到dom
    }
    
    //建立模型
    function initMesh() {
        geometry = new THREE.BoxGeometry( 2, 2, 2 ); //建立几何体
        material = new THREE.MeshNormalMaterial(); //建立材质

        mesh = new THREE.Mesh( geometry, material ); //建立网格
        scene.add( mesh ); //将网格添加到场景
    }

    //运行动画
    function animate() {
        requestAnimationFrame(animate); //循环调用函数

        mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度
        mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度

        renderer.render( scene, camera ); //渲染界面
    }

    //初始化函数，页面加载完成是调用
    function init() {
        initScene();//初始化场景
        initCamera();//初始化相机
        initRenderer();//渲染
     
        initMesh();//建立模型
        animate();//运行动画
    }
</script>
</body>
</html>
复制代码

能够看到，就是进行场景、相机、渲染器三个要素的准备以后就能够进行模型的建立了，这是一个很简单的3D效果的例子，更多效果能够看官网，web开发人员也能够实现不少复杂的3D效果。

1. three.js入门
2. three.js - (入门四)
3. three.js - (入门一)
4. 【three.js详解之一】入门篇
5. Three.js入门篇之1 - WebGL on HTML
6. 【转】three.js详解之入门篇
7. Three.js 基础入门
8. three.js 入门案例
9. three.js 场景入门
10. webGL之three.js入门4--ThreeJS Editor入门篇
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用