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, 另外一个为场景的场景图树结构可视化效果,目前暂未实现。

