Three.js中文网 Three.js中文网
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
Web3D系统课程视频
  • 0.学前说明

  • 1.Vue+Three.js基础

  • 2.场景搭建Three+Blender

  • 3.渲染效果提升(材质光照)

  • 4.渲染性能、模型压缩

    • 1. Stats查看渲染帧率
    • 2. threejs三角形、顶点概念
    • 3. Blender三角形、顶点
    • 4. 渲染性能(顶点、显卡)
    • 5. Blender模型减面
    • 6. 模型数量与性能
    • 7. 减少模型加载时间(压缩)
    • 8. Blender设置纹理贴图
    • 9. Blender打包、解包文件
    • 10. 纹理贴图大小(性能优化)
    • 11. 共享几何体,减小模型文件
    • 5.封装、进度条、切视角

    • js 3D可视化
    • 4.渲染性能、模型压缩
    郭隆邦
    2024-03-20
    目录

    11. 共享几何体,减小模型文件

    # 共享几何体,减小模型文件

    如果你希望三维建模软件导出gltf模型的时候,模型文件更小,对于外形一样的物体,可以考虑共享几何体。

    下面以Blender为例,给大家从头演示一下。

    # threejs代码共享几何体

    下面先用threejs代码,给大家展示下,什么是共享几何体。

    // 两个网格模型几何体外形一样,可以共享几何体
    const geometry = new THREE.BoxGeometry(6,6,6);
    
    const material = new THREE.MeshLambertMaterial({
        color: 0x00ffff
    });
    const mesh = new THREE.Mesh(geometry, material); 
    scene.add(mesh); 
    
    const material2 = new THREE.MeshLambertMaterial({
        color: 0xffff00
    });
    const mesh2 = new THREE.Mesh(geometry, material2); 
    mesh2.position.x = 7
    scene.add(mesh2); 
    

    缩放几何体,两个网格模型mesh会跟着同步缩放,原因很简单,因为两个网格网格模型的几何体都是同一个。

    // 两个网格模型几何体外形一样,可以共享几何体
    const geometry = new THREE.BoxGeometry(6,6,6);
    //几何体缩放本质上是改变了几何体顶点的xyz坐标
    geometry.scale(1,3,1);
    console.log('查看顶点xyz坐标',geometry.attributes.position.array);
    

    # Blender共享几何体

    视频给大家演示Blender共享几何体、不共享几何体,同样的网格模型导出文件的差异。

    共享几何体时候,Blender编辑模式改变顶点,所有模型外形跟着同步变化。不共享时候,编辑模型的几何体顶点,相互不影响。

    # 打开外部模型,判断是否共享

    如果美术给你一个模型,或者你从别的地方下载一个,你可以通过编辑几何体顶点判断模型是否共享几何体。

    一般有经验的美术建模时候,都会注意共享几何体,这样导出的gltf模型文件更小。

    10. 纹理贴图大小(性能优化)
    1. threejs代码封装

    ← 10. 纹理贴图大小(性能优化) 1. threejs代码封装→

    Theme by Vdoing | Copyright © 2016-2025 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式