Three.js 入門示例

bcbobo21cn發表於2020-12-05
JS

Three.js是基於原生WebGL封裝執行的三維引擎。
three.js是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。
Three.js 是一款執行在瀏覽器中的 3D 引擎，你可以用它建立各種三維場景，包括了攝影機、光影、材質等各種物件。

 

先做一個基本示例；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>第一個three.js 示例</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
  <script src="three.js-master/build/three.js"></script>
</head>

<body>
  <script>

    var scene = new THREE.Scene();

    var geometry = new THREE.SphereGeometry(80, 60, 60); //建立一個球體幾何物件
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); //材質
    var mesh = new THREE.Mesh(geometry, material); //網格模型物件
    scene.add(mesh); //網格模型新增到場景中

    //點光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //點光源位置
    scene.add(point); //點光源新增到場景中


    /**
     * 相機
     */
    var width = window.innerWidth; //視窗寬度
    var height = window.innerHeight; //視窗高度
    var k = width / height; //視窗寬高比
    var s = 200; //三維場景顯示範圍控制係數
    //建立相機
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //相機位置
    camera.lookAt(scene.position); //相機方向

    /**
     * 渲染器
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width*1/4, height*1/4);//設定渲染區域尺寸
    renderer.setClearColor(0xffff00, 1); //設定背景顏色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas物件
    //執行渲染操作   指定場景、相機作為引數
    renderer.render(scene, camera);
  </script>
</body>
</html>

執行之後效果如下； 

下載three.js；目錄結構如下；包含下載的 three.js-master/build/three.js；即可使用；

程式碼大致分為以下幾個部分；

    建立球體幾何物件，新增到場景物件；

    場景中新增光源；

    建立相機；三維物件是從相機中看到的；

    建立渲染器執行渲染操作，以場景和相機為引數；

相關文章