第一个示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>three.js</title>
  9.     <style>
  10.         body {
  11.             margin: 0;
  12.             overflow: hidden;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <div id="sence"></div>
  19.     <script src="./three.min.js"></script>
  20.     <script type="module">
  21.         /**
  22.         * 创建场景
  23.         */
  24.         const scene = new THREE.Scene(); // 场景对象
  25.         /**
  26.          * 创建网格模型
  27.          */
  28.         const gemometry = new THREE.BoxGeometry(100, 100, 100); // 几何对象
  29.         const material = new THREE.MeshLambertMaterial({
  30.             color: 0x000ff
  31.         }); // 材质
  32.         const mesh = new THREE.Mesh(gemometry, material); // 网格对象
  33.         scene.add(mesh);
  34.         /**
  35.          * 光源设置
  36.          */
  37.         const point = new THREE.PointLight(0xffffff); // 点光源
  38.         point.position.set(400, 200, 300);
  39.         scene.add(point);
  40.         const ambient = new THREE.AmbientLight(0x444444); // 环境光
  41.         scene.add(ambient);
  42.         /**
  43.          * 相机设置
  44.          */
  45.         let width = window.innerWidth;
  46.         let height = window.innerHeight;
  47.         let k = width / height; // 窗口宽高比
  48.         let s = 200; // 二维场景显示范围控制系数，系数越大，显示的范围越大
  49.         /**
  50.          * 创建相机
  51.          */
  52.         const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
  53.         camera.position.set(200, 300, 200);
  54.         camera.lookAt(scene.position); // 设置相机方向（指向场景对象）
  55.         /**
  56.          * 场景渲染器对象
  57.          */
  58.         const renderer = new THREE.WebGLRenderer();
  59.         renderer.setSize(width, height);
  60.         document.body.appendChild(renderer.domElement);
  61.         renderer.render(scene, camera); // 执行渲染操作，指定场景、相机作为参数
  62.     </script>
  63. </body>
  65. </html>

渲染结果如下图
image.png

Three.js 程序结构

image.png

参考

【1】three.js官方中文文档