【Three.js】Three.js入门教程——清晰明了好上手！

2023-12-13 08:07:51

一、文档地址：

二、Three.js?和?WebGL 的关系：

Three.js是WebGL的框架。封装和简化了WebGL的方法。three.js在它的基础上进行了进一步的封装和简化开发开发过程,个人认为类似于jQuery对原生js的关系。

?WebGL（Web 图形库）是一种 JavaScript API，用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形，而无需使用插件。相当于 WebGL 给我们提供了一系列的图形接口，能够让我们通过 JavaScript 去使用 GPU 来进行浏览器图形渲染的工具。

Three.js 是一款 webGL 框架，由于其易用性被广泛应用。Three.js 在 WebGL 的 API 接口基础上，又进行的一层封装，简化我们创建三维动画场景的过程。

三、Three.js 的优点：

1、掩盖了 3D 渲染的细节：

Three.js 将 WebGL 原生 API 的细节抽象化，将 3D 场景拆解为网格、材质和光源（即它内置了图形编程常用的一些对象种类）；
2、面向对象：

开发者可以使用上层的 JavaScript 对象，而不是仅仅调用 JavaScript 函数；
3、功能非常丰富：

Three.js 除封装了 WebGL 原始 API 之外，Three.js 还包含了许多实用的内置对象，可以方便地应用于游戏开发、动画制作、幻灯片制作、髙分辨率模型和一些特殊的视觉效果制作；
4、速度很快：

Three.js 采用了 3D 图形最佳实践来保证在不失可用性的前提下，保持极高的性能；
5、支持交互：

WebGL 本身并不提供拾取（Picking）功能（即是否知道鼠标正处于某个物体上）。而 Three.js 则固化了拾取支持，这就使得你可以轻松为你的应用添加交互功能；
6、包含数学库：

Three.js 拥有一个强大易用的数学库，你可以在其中进行矩阵、投影和矢量运算；
7、内置文件格式支持：

你可以使用流行的 3D 建模软件导出文本格式的文件，然后使用 Three.js 加载，也可以使用 Three.js 自己的 JSON 格式或二进制格式；
8、扩展性很强：

为 Three.js 添加新的特性或进行自定义优化是很容易的事情。如果你需要某个特殊的数据结构，那么只需要封装到 Three.js 即可；
9、支持HTML5 Canvas：

Three.js 不但支持 WebGL，而且还支持使用 Canvas2D、Css3D 和 SVG 进行渲染。在未兼容 WebGL 的环境中可以回退到其它的解决方案；

四、目前的局限性：

虽然 Three.js 的优势很大，但是它也有它的不足之处：
1、官网文档粗糙，对于新手不友好；
2、国内的相关资源匮乏，而且资料大多以英文格式存在；
3、不是游戏引擎，一些游戏相关的功能没有封装在里面，如果需要相关的功能需要进行二次开发；

五、建立一个基础3D图形

<!DOCTYPE html>
<html>
  <head>
    <title>Wonanut 3D</title>
    <style type="text/css">
      body {
        margin: 0;
      }
      canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript" src="js/three.js"></script>
    <script type="text/javascript" src="js/stats.js"></script>
    <script type="text/javascript">
      //  场景
      var scene = new THREE.Scene();

      //  摄像机
      var camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      camera.position.x = -30;
      camera.position.y = 40;
      camera.position.z = 30;
      camera.lookAt(scene.position);

      //  渲染器
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // 设置渲染器渲染阴影效果
      renderer.setClearColor(new THREE.Color(0x000000));
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.shadowMap.enabled = true;

      //  坐标轴
      var axes = new THREE.AxesHelper(20);
      scene.add(axes);

      //  平面
      var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
      var planeMaterial = new THREE.MeshLambertMaterial({ 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);

      // 设置投影
      plane.receiveShadow = true;

      //  物体
      var geometry = new THREE.BoxGeometry(4, 4, 4);
      var material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
      var cube = new THREE.Mesh(geometry, material);
      cube.position.x = 0;
      cube.position.y = 2;
      cube.position.z = 0;

      // 设置投影
      cube.castShadow = true;
      scene.add(cube);

      //  光源
      var spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set(-40, 60, -10);
      scene.add(spotLight);

      // 设置投影
      spotLight.castShadow = true;

      //  状态监视器
      var stats = new Stats();
      stats.showPanel(0);
      document.body.appendChild(stats.dom);

      renderer.render(scene, camera);
    </script>
  </body>
</html>

浏览器打开，即可看到一个旋转的立方体；

未完待续。。。