3D/2.画线.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script async type="module" crossorigin="anonymous">
    import * as THREE from "/webGpu/3D/node_modules/three/src/Three.js";

    // 渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 摄像机
    const camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      1,
      500
    );
    camera.position.set(0, 0, 100);
    camera.lookAt(0, 0, 0);

    // 创建场景
    const scene = new THREE.Scene();
    // 定义一个材质
    const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
    // 创建几何体
    const points = [];
    points.push(new THREE.Vector3(-10, 0, 0));
    points.push(new THREE.Vector3(0, 10, 0));
    points.push(new THREE.Vector3(10, 0, 0));

    // 使用缓冲器，将三个点存储起来
    const geometry = new THREE.BufferGeometry().setFromPoints(points);
    // 使用连线
    const line = new THREE.Line( geometry, material );
    // 加入场景
    scene.add( line );
    // 渲染
    renderer.render( scene, camera );
    
    
  </script>
</html>