本地查看Threejs官方文档网站

634 阅读1分钟

Three.js官网是国外的服务器,所以为了方便随时查看案例和文档内容,可以自己本地搭建Three.js官网和文档。

一 本地查看three.js官网

1、首先进入threejs库GitHub地址:github.com/mrdoob/thre…

image.png

2、下载完整代码

image.png

3、项目文件解压缩

image.png

4、命令行安装依赖

一般安装可以用npm、yarn等包管理工具。

 npm install --registry=https://registry.npm.taobao.org
// 或者yarn install

image.png

5、启动项目

image.png

npm run start
// yarn start

image.png

浏览器访问即可:http://localhost:8080

本地文档目录介绍

6、文档目录介绍

image.png

build目录:

image.png

docs文档:

image.png

选择中文,查看中文文档。

image.png

examples案例:

image.png

可以通过网址,找到具体的案例代码,如此处的文件名称是:webgl_animation_keyframes。因此可以在文件夹找到对应的代码文件

editor目录:

image.png

官方提供的可视化编辑器,可以直接导入模型,修改材质,添加光照效果等等。

image.png

二 官方提供的可视化编辑器

2-1 工具栏切换中文

1.gif

2-2 导入和导出模型——查看和保存3D模型

image.png

1.gif

2-3 移动、旋转、缩放、本地——添加一个几何体并进行变换

image.png

1.gif

2-4 场景面板——示例四乒乓球

image.png

image.png

2-5 更改材质等信息——在场景图形树中选择一个目标

1.gif

2-6 设置面板——查看历史记录、是否显示网格和辅助坐标系

image.png