Rhino模型可视化

        思维导图：有道云笔记

        可视化代码(仅供参考): model-implementation: react显示Rhino模型

1、开发者工具配置

1.1 基于window的Node环境配置

         node是一个javaScript的运行环境。

        Ⅰ 下载安装包

             下载地址: Index of /download/release/

                选择自己所需的版本。 

               选择后缀为.msi(程序安装文件)的文件下载 。

        Ⅱ 配置环境变量

                配置环境变量是为了在cmd(外壳程序)中能够运行。

                ① 安装路径

                        复制文件安装的路径：E:\programSoftware\nodejs18\(自己的安装位置)

                ② 添加环境变量

                        控制面板->系统和安全->系统->高级系统设置->环境变量->Path

                        添加复制的路径。

 

                ③ 验证

        Ⅲ 配置环境

                ① 全局模块的默认存放路径和默认缓存存放路径配置

                        查看全局模块的存放路径：

npm config get prefix

                        查看缓存存放路径：

npm config get cache

                        Node安装路径下创建node_cache(全局存放路径)和node_global(缓存路径)。

                        授予访问权限(权限不足会设置失败)。

                        设置路径

npm config set prefix E:\programSoftware\nodejs18\node_global

npm config set cache E:\programSoftware\nodejs18\node_cache

        Ⅳ 镜像设置

                 查看镜像

npm config get registry

                设置淘宝镜像

 npm config set registry https://registry.npm.taobao.org/

1.2 基于window的webstorm的安装

        微信关注火耳软件(自己使用安装教程)

2、建模工具

2.1 Rhino(犀牛)软件安装

         安装7.16版本，对应下面的插件安装。

2.2 渲染插件的安装(vray for Rhino7)     

        百度网盘下载:

        链接：https://pan.baidu.com/s/1G5rdwRE74PG6AtdycJx11g

        提取码：gucq

        Ⅰ 先运行1.vray_52001_rhino_win_x64

        Ⅱ 再运行Vray for Rhino 5.2汉化破解版(一键安装)

        Ⅲ Rhino显示插件

3、Reac框架和threejs框

3.1 React框架

3.2 配置React

        参考示例: 15、项目

3.3 下载threejs和fiber

         threejs学习地址: Three.js教程

         fiber学习地址: React Three Fiber Documentation

yarn add three @react-three/fiber

3.4 下载drei

        drei学习地址:  https://github.com/pmndrs/drei#readme

yarn add @react-three/drei

4、模型转换

        Rhino里设计和渲染好的模型导出为fbx文件格式。

        资料提供:  

                链接：https://pan.baidu.com/s/1bw_tmio8juhb7bMCr8q3Hw 
                提取码：4pyl

4.1 工具安装

        Ⅰfbx转gltf/glb

                fbx2gltf命令: GitCode - 开发者的代码家园

                 ① 全局安装fbx2gltf。

npm install -g fbx2gltf

                ② 配置环境变量。

              ③ 转换模型。

fbx2gltf -i snow.fbx -o snow -b

        Ⅱ obj转gltf/glb

                obj2gltf命令：GitHub - CesiumGS/obj2gltf: Convert OBJ assets to glTF

                ① 全局安装obj2gltf。

npm install -g obj2gltf

                ② 配置环境变量。

                ③ 转换模型。

obj2gltf -i snow.obj -o i snow.glb

        Ⅲ Draco压缩

                gltf-pipeline命令:  npmmirror 镜像站

                ① 全局安装gltf-pipeline。

npm install -g gltf-pipeline

                ② 配置环境变量。

                       ③ 压缩。

gltf-pipeline -i snow.glb -b -d