Three.js - 入门教程（基本介绍、创建第一个三维场景）

2017-10-01 发布：hangge 阅读：20525

现代浏览器都支持 WebGL，这样我们就不必使用 Flash、Java 等插件就能在浏览器中创建三维图形。虽然 WebGL 提供的接口非常丰富和强大，但使用起来过于繁琐和复杂。

Three.js 的出现完美地解决了这个矛盾。它提供一个很简单的关于 WebGL 特性的 JavaScript API，使得用户不需要详细地学习 WebGL，就能轻松创作出好看的三维图形样例。

一，基本介绍

1，Three.js 的功能特点

创建简单和复杂的三维几何图形。
在三维场景下创建动画和移动物体。
为物体添加纹理和材质。
使用各种光源来装饰场景。
通过三维模型软件加载物体。
为三维场景添加高级的后期处理效果。
使用自定义的着色器。
创建点云（粒子系统）

2，桌面浏览器兼容性

基本上所有的现代浏览器都支持 Three.js。

Firefox：4.0 版本后开始支持
Chrome：9.0 版本后开始支持
Safari：5.1 版本后开始支持
Opera：12.00 版本后开始支持
IE：IE11 起才开始支持（唯一一个很长时间都不支持 WebGL 的浏览器）

如果想在低版本的 IE 浏览器（IE10 或者更低版本）上运行 Three.js，可以安装 iewebgl 插件。

下载地址：https://github.com/iewebgl/iewebgl

3，移动设备兼容性

Three.js 还可以在移动设备上运行，不同设备对于 Three.js 的支持情况如下：

Android：Android 原生的浏览器是不支持 WebGL 的。如果想在 Android 上运行 WebGL，需要安装最新的移动版本的 Chrome、Firefox 或者 Opera。
iOS：从 iOS8 起就开始支持
Windows mobile：从 8.1 版本后开始支持

4，在线编辑器

Three.js 官方自身也提供了一个在线编辑器，使用该编辑器我们可以用图形化方法创建 Three.js 场景。

地址：https://threejs.org/editor/

二、一个简单的样例

1，效果图

（1）场景里放置了一个平面，平面使用的是灰色材质。

（2）屏幕上还有个球体和立方体，不过它们显示的是线框。

（3）整个场景中央还显示有坐标参考轴。

2，下载　Three.js 库

首先我们将最新的 Three.js 库下载到本地。地址：https://github.com/mrdoob/three.js

3，样例代码

在网页中将 Three.js 库给引入，同时这里还创建了场景、摄像机、坐标轴、以及相关物体。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<!-- 作为Three.js渲染器输出元素 -->
<div id="WebGL-output">
</div>

<!-- 第一个 Three.js 样例代码 -->
<script type="text/javascript">

    //网页加载完毕后会被调用
    function init() {

        //创建一个场景（场景是一个容器，用于保存、跟踪所要渲染的物体和使用的光源）
        var scene = new THREE.Scene();

        //创建一个摄像机对象（摄像机决定了能够在场景里看到什么）
        var camera = new THREE.PerspectiveCamera(45,
          window.innerWidth / window.innerHeight, 0.1, 1000);

        //设置摄像机的位置，并让其指向场景的中心（0,0,0）
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

        //创建一个WebGL渲染器并设置其大小
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(new THREE.Color(0xEEEEEE));
        renderer.setSize(window.innerWidth, window.innerHeight);

        //在场景中添加坐标轴
        var axes = new THREE.AxisHelper(20);
        scene.add(axes);

        //创建一个平面
        var planeGeometry = new THREE.PlaneGeometry(60, 20);
        //平面使用颜色为0xcccccc的基本材质
        var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        //设置屏幕的位置和旋转角度
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.z = 0;

        //将平面添加场景中
        scene.add(plane);

        //创建一个立方体
        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
        //将线框（wireframe）属性设置为true，这样物体就不会被渲染为实物物体
        var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        //设置立方体的位置
        cube.position.x = -4;
        cube.position.y = 3;
        cube.position.z = 0;

        //将立方体添加到场景中
        scene.add(cube);

        //创建一个球体
        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
        //将线框（wireframe）属性设置为true，这样物体就不会被渲染为实物物体
        var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

        //设置球体的位置
        sphere.position.x = 20;
        sphere.position.y = 4;
        sphere.position.z = 2;

        //将球体添加到场景中
        scene.add(sphere);

        //将渲染的结果输出到指定页面元素中
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        //渲染场景
        renderer.render(scene, camera);
    }

    //确保init方法在网页加载完毕后被调用
    window.onload = init;
</script>
</body>
</html>