<html>
  <head>
    <script type="text/javascript" src="../lib/three.js"></script>
    <script type="text/javascript">
      /**
       * 初始化函数，创建一个Three.js的3D渲染场景，并向其中添加了平面和三角形几何体。
       */
      function init() {
        // 创建WebGL渲染器，并将其附加到页面上的canvas元素
        var renderer = new THREE.WebGLRenderer({
          canvas: document.getElementById('mainCanvas'),
        })
        // 设置渲染器的背景色为黑色
        renderer.setClearColor(0x000000)

        // 创建一个场景
        var scene = new THREE.Scene()

        // 创建一个透视相机，并设置其初始位置和视角
        var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000)
        camera.position.set(0, 0, 5) // 设置相机位置
        camera.lookAt(new THREE.Vector3(0, 0, 0)) // 设置相机朝向
        // 将相机添加到场景中
        scene.add(camera)

        // 创建一个基本材质
        var material = new THREE.MeshBasicMaterial({
          color: 0xffffff, // 设置材质颜色为白色
        })
        // 创建一个平面几何体，并将其添加到场景中
        // 平面的尺寸为1.5x1.5
        var planeGeo = new THREE.PlaneGeometry(1.5, 1.5)
        var plane = new THREE.Mesh(planeGeo, material) // 创建平面网格
        plane.position.x = 1 // 将平面移动到x轴上1单位的位置
        scene.add(plane) // 将平面添加到场景

        // 创建一个三角形，并将其添加到场景中
        // 通过手动定义顶点位置来创建三角形
        var triGeo = new THREE.Geometry()
        triGeo.vertices = [
          new THREE.Vector3(0, -0.8, 0),
          new THREE.Vector3(-2, -0.8, 0),
          new THREE.Vector3(-1, 0.8, 0),
        ] // 定义三角形顶点
        triGeo.faces.push(new THREE.Face3(0, 2, 1)) // 定义三角形的面
        var triangle = new THREE.Mesh(triGeo, material) // 创建三角形网格
        scene.add(triangle) // 将三角形添加到场景

        // 渲染场景
        renderer.render(scene, camera)
      }
    </script>
  </head>

  <body onload="init()">
    <canvas id="mainCanvas" width="400px" height="300px"></canvas>
  </body>
</html>

image-20240423141445158