threejs案例一——画线

最新推荐文章于 2024-06-20 08:49:41 发布

zero 0_0

最新推荐文章于 2024-06-20 08:49:41 发布

阅读量353

点赞数

分类专栏：前端 threejs 三维场景文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_44426574/article/details/127417645

版权

前端同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

threejs

2 篇文章 0 订阅

订阅专栏

三维场景

2 篇文章 0 订阅

订阅专栏

案例一

1. 效果

在这里插入图片描述

2. 知识点

new THREE.LineBasicMaterial
new THREE.Vector3(-10, 0, 0)
new THREE.BufferGeometry().setFromPoints(points)
渲染=场景(几何体+材质)+相机(属性+位置)

3. 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>画线</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        /* 隐藏body窗口区域滚动条 */
      }
    </style>
    <!--引入three.js三维引擎-->
    <!-- <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>-->
    <script src="three.js-master/three.js-master/build/three.js"></script>
    <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
  </head>

  <body>
    <script>
    //1. 创建场景
      const scene = new THREE.Scene();
      //2. 添加一个材质，对于线条来说，我们能使用的材质只有LineBasicMaterial 或者 LineDashedMaterial。
      const material = new THREE.LineBasicMaterial({ color: 0x0eeeff });
//3.创建点组
      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));
//4.根据点组生成集合体
      const geometry = new THREE.BufferGeometry().setFromPoints(points);
      //5. 将集合体与材质放到场景中
      const line = new THREE.Line(geometry, material);
      scene.add(line);

      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);

//对相机、场景进行渲染
      renderer.render(scene, camera);
    </script>
  </body>
</html>