Three.js中文网 Three.js中文网
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (opens new window)
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (opens new window)
Web3D系统课程视频
  • 0.学前说明

  • 1.Three.js快速入门

  • 2.几何体BufferGeometry

    • 1. 几何体顶点位置数据和点模型
      • 2. 线模型对象
      • 3. 网格模型(三角形概念)
      • 4. 构建一个矩形平面几何体
      • 5. 几何体顶点索引数据
      • 6. 顶点法线数据
      • 7. 查看threejs自带几何体顶点
      • 8. 旋转、缩放、平移几何体
    • 3.模型对象、材质

    • 4.层级模型

    • 5.顶点UV坐标、纹理贴图

    • 6.加载外部三维模型(gltf)

    • 7.PBR材质与纹理贴图

    • 8.渲染器和前端UI界面

    • 9.生成曲线、几何体

    • 10.相机基础

    • 11.光源和阴影

    • 12.精灵模型Sprite

    • 13.后处理EffectComposer

    • 14.射线拾取模型

    • 15.场景标注标签信息

    • Three.js教程
    • 2.几何体BufferGeometry
    郭隆邦
    2023-01-20
    目录

    1. 几何体顶点位置数据和点模型

    # 几何体顶点位置数据和点模型对象Points

    本章节主要目的是给大家讲解几何体geometry的顶点概念,相对偏底层一些,不过掌握以后,你更容易深入理解Threejs的几何体和模型对象。

    # 缓冲类型几何体BufferGeometry

    threejs的长方体BoxGeometry、球体SphereGeometry等几何体都是基于BufferGeometry (opens new window)类构建的,BufferGeometry是一个没有任何形状的空几何体,你可以通过BufferGeometry自定义任何几何形状,具体一点说就是定义顶点数据。

    //创建一个空的几何体对象
    const geometry = new THREE.BufferGeometry(); 
    

    # BufferAttribute定义几何体顶点数据

    通过javascript类型化数组 (opens new window)Float32Array创建一组xyz坐标数据用来表示几何体的顶点坐标。

    //类型化数组创建顶点数据
    const vertices = new Float32Array([
        0, 0, 0, //顶点1坐标
        50, 0, 0, //顶点2坐标
        0, 100, 0, //顶点3坐标
        0, 0, 10, //顶点4坐标
        0, 0, 100, //顶点5坐标
        50, 0, 10, //顶点6坐标
    ]);
    

    通过threejs的属性缓冲区对象BufferAttribute (opens new window)表示threejs几何体顶点数据。

    // 创建属性缓冲区对象
    //3个为一组,表示一个顶点的xyz坐标
    const attribue = new THREE.BufferAttribute(vertices, 3); 
    

    # 设置几何体顶点.attributes.position

    通过geometry.attributes.position设置几何体顶点位置属性的值BufferAttribute。

    // 设置几何体attributes属性的位置属性
    geometry.attributes.position = attribue;
    

    # 点模型Points

    点模型Points (opens new window)和网格模型Mesh一样,都是threejs的一种模型对象,只是大部分情况下都是用Mesh表示物体。

    网格模型Mesh有自己对应的网格材质,同样点模型Points有自己对应的点材质PointsMaterial (opens new window)

    // 点渲染模式
    const material = new THREE.PointsMaterial({
        color: 0xffff00,
        size: 10.0 //点对象像素尺寸
    }); 
    

    几何体geometry作为点模型Points参数,会把几何体渲染为点,把几何体作为Mesh的参数会把几何体渲染为面。

    const points = new THREE.Points(geometry, material); //点模型对象
    
    23. threejs语法总结
    2. 线模型对象

    ← 23. threejs语法总结 2. 线模型对象→

    Theme by Vdoing | Copyright © 2016-2023 郭隆邦 | 引用请注明网站链接
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式