引入

曾经，3D（three-dimensional）对于我来说，是遥不可及的东西。它只是我玩的某款游戏，或者看过的某部动画。

直到一次偶然的机会，我看到了腾讯的xplan计划的主页。（手机打开该网页有奇效）

在了解了WebGL后，我完全相信，它必将统治HTML的“数据展示”。

简介

  1. Three.js是基于WebGL的，它是为了简化WebGl的开发而存在的js库。

  2. Three.js也是为没有学过图形知识的开发者准备的。

    这一点体现在：

    (1) 场景、物体、照相机等都可以通过一条语句直接得到；

    (2) 着色器对于初学者来说较难理解，Three.js“聪明地”取消了WebGL“着色器必须定义”的要求（如果开发者没有定义，就会使用默认渲染方法）。

注意

  1. Three.js只内置了一些简单的模型，如果想使用更好地使用Three.js开发一个具有复杂模型网站，需要具备3d建模的能力（如C4D等）。

  2. 在引入3D模型的页面，一般需要 ‘禁用鼠标选中DOM元素’ 和 ‘禁用鼠标右键菜单’。

    1
    2
    3
    4
    5
    6
    document.onselectstart = function() {
     return false;
    };
    document.oncontextmenu = function() {
     return false;
    };

  3. 3D模型的加载速度可能较慢，可以考虑使用异步的进度条插件。