一起学Three.js | WebGL渲染器入门示例携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

概述

Three.js是一个跨浏览器的脚本，使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形。

—— 引自维基百科

示例程序效果图

three.js-webgl-first-demo.png

示例程序基本骨架

我们先来看一下示例程序的基本骨架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL渲染器入门示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r99/three.min.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script>
    </script>
</body>
</html>

因为我们要在整个浏览器的内容区域里展示我们的示例程序，所以我们将body的margin设置成0。<script>标签用于存放Three.js代码。

接下来，我们要做的就是在<script>标签内编写Three.js代码。

我们定义了三个全局变量：

// 渲染器
var renderer;
// 场景
var scene;
// 摄像机
var camera;

渲染器（Renderer）：场景的渲染方式，如webGL\canvas2D\Css3D。
场景（Scene）：是物体、光源等元素的容器。
相机（Camera）：场景中的相机，代替人眼去观察，场景中只能添加一个。

我们定义了一个初始化方法init()，会在页面加载完成后调用。

// 页面加载成功后调init()方法
window.onload = init;

我们来看下init()方法的具体内容：

/**
 * 初始化方法
 */
function init() {
    scene = new THREE.Scene();
    // 透视相机
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.x = 15;
    camera.position.y = 16;
    camera.position.z = 13;
    camera.lookAt(scene.position);

    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0x000000, 1.0);
    renderer.setSize(window.innerWidth, window.innerHeight);

    var cubeGeometry = new THREE.BoxGeometry(10.  * Math.random(), 10.  * Math.random(), 10.  * Math.random());
    // 立方体材质：网格法线材质
    var cubeMaterial = new THREE.MeshNormalMaterial();

    // 网格模型：立方体
    var cute = new THREE.Mesh(cubeGeometry, cubeMaterial);
    scene.add(cute);

    document.body.appendChild(renderer.domElement);

    renderer.render(scene, camera);
}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL渲染器入门示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r99/three.min.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- three.js代码 -->
    <script>
        // ########## 全局变量 ##########
        // 渲染器
        var renderer;
        // 场景
        var scene;
        // 摄像机
        var camera;

        /**
         * 初始化方法
         */
        function init() {
            scene = new THREE.Scene();
            // 透视摄像机
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.x = 15;
            camera.position.y = 16;
            camera.position.z = 13;
            camera.lookAt(scene.position);

            renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0x000000, 1.0);
            renderer.setSize(window.innerWidth, window.innerHeight);

            var cubeGeometry = new THREE.BoxGeometry(10.  * Math.random(), 10.  * Math.random(), 10.  * Math.random());
            // 立方体材质：网格法线材质
            var cubeMaterial = new THREE.MeshNormalMaterial();

            // 网格模型：立方体
            var cute = new THREE.Mesh(cubeGeometry, cubeMaterial);
            scene.add(cute);

            document.body.appendChild(renderer.domElement);

            renderer.render(scene, camera);
        }

        // 页面加载成功后调init()方法
        window.onload = init;
    </script>
</body>
</html>

双击HTML文件就能看到我们的第一个three.js程序的效果了。

场景

场景是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源。

渲染器

Three.js提供了如下几种类型的渲染器：

基于WebGL的渲染器
基于HTML canvas的渲染器
基于CSS的渲染器
基于SVG的渲染器

推荐使用基于WebGL的渲染器。其它的渲染器尽管也能够渲染简单的场景，但是不推荐使用，因为它们已经停止更新、十分耗CPU的资源，而且也缺乏对一些功能的支持，比如材质和阴影。

摄像机

Three.js库提供了两种不同的摄像机：正交投影摄像机和透视投影摄像机。

参考

官网文档地址：threejs.org/docs/index.…

如果写的文章对你有点帮助，还麻烦你动动小手帮忙点个赞呗。你的支持是我更文的动力。目前在写的系列有下面几个系统：

MyBatis源码解读
设计模式
一起学Three.js
Spring Boot
Spring Cloud

都是一些平时工作中用到的知识点的个人总结和学习笔记。