Skip to content

acanzaima/make-a-three-scene

Repository files navigation

logo

make-a-three-scene

可直接复用的 three.js 场景收藏夹

项目简介

make-a-three-scene是一个主要使用three.js创建的简单业务场景收藏夹,便于相同或类似业务场景下的效果快速复用。

  • 所有场景均放置在src/scenes下,每个文件夹代表一个场景,你可以通过脚本命令 yarn make:tpl 场景名称 快速创建一个空场景模板(场景名仅限小写英文字母,数字和-的组合)
  • 当你的场景添加完成后,你可以通过脚本命令 yarn make:menu生成场景菜单,同时你将在/scene路由页面看到你添加的场景
  • 在线预览地址:点我查看

其他说明

  • 以场景example为例,执行yarn make:tpl example脚本命令后, src/scenes/example文件夹下包含desc.json, scene.png, ScenePage.vue三个文件, 你需要修改desc.json中每个字段的值为你想呈现的内容,其次你需要替换scene.png内容,这两项改动将用于example场景的缩略样式、提示信息等,最后你可以编辑ScenePage.vue文件来完成你的example场景效果(所有example场景需要使用的资源应当在src/scenes/example文件夹下管理)
  • 通过脚本创建的空场景模板ScenePage.vue文件示例中,通过具名插槽提供了theme值(light/dark),你可以使用提供的值管理你的场景在浅色/深色主题下的样式;此外通过props接收foldChange值,可以在菜单栏折叠/展开时更新你的场景效果(如复位,重置相机等)
  • 场景的最终实现可以是.js/.ts的文件形式,但应当至少满足便捷应用、便捷运行和便捷销毁三个特点,针对便捷应用这一特点,建议使用类或构造函数的形式实现
  • src/utils/resource-tracker.ts提供了一个资源跟踪类,方便在运行时跟踪场景资源,并在销毁场景时便捷销毁此前跟踪的资源

备注

输入图片说明

上图为场景右上角的操作按钮,目前设想功能分别为作者/场景说明Popover, 另外一个为场景的场景图树结构可视化效果,目前暂未实现。

Releases

Packages

Used by

Contributors

Languages