# 最终效果 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d8cca60ef74d4bcf831e855b8bf10dd6~tplv-k3u1fbpfcp-watermark.image?) [效果链接](http://152.136.110.22/) # 安装 sandi-ui ```` pnpm install sandi-ui ```` # 在vue3的项目中使用 ```js import { createApp } from 'vue' import App from './App.vue' import sandiUI from "sand-ui" const app = createApp(App) app.use(sandiUI) app.mount('#app') ``` # 开始制作你的3D世界吧 ## 创建一个渲染器我们需要一个渲染器，将三维空间渲染出来，即我们看到的画面，渲染器一定要设置长度和宽度, 这里设置backgroundColor属性，默认可以不设置，注意目前还是空白的因为我们，没有设置场景和摄像机 ```html ``` ## 创建一个场景场景就是我们的三维空间，我们可以在里面放任意的物体 ```html ``` ## 创建一个摄像机摄像机是铁三角之一，另外两个，当然是场景和渲染器，这三个是缺一不可的。此时，我们，可以看到渲染器的设置的背景色,摄像机可以放在我们放在场景中哟 ```html ``` ### 此时应该是这样的，这个颜色是摄像机的背景色 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87df00831f4f43d7aed081397f878474~tplv-k3u1fbpfcp-watermark.image?) ## 创建一个平面这里使用SDMesh组件和SDPlaneGeometry组件，创建一个地面. ```html ``` ### 效果 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04da54a83fe24c51ba9e128ed24e3960~tplv-k3u1fbpfcp-watermark.image?) ### 变成地面我们调整了相机的位置，并且，对平面沿X轴转90度， ```html ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7cbcdb31b7c34210b7802bee31a57013~tplv-k3u1fbpfcp-watermark.image?) ## 给地面加上材质这里使用SDMeshBasicMaterial，加载我们材质，可以看到它变成白色了 ```html ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ac2f537532d441c38ff9f82c40862b18~tplv-k3u1fbpfcp-watermark.image?) ## 给地面加上贴图这里使用SDTextureLoader，加载贴图，这样就有一个地面了。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/817a1a41f7944edcb4641fd56dcc2df8~tplv-k3u1fbpfcp-watermark.image?) ## 在地面上跑起来吧在跑起来之前我们先把地面变大，我们使用 v-for 来铺一个更大的地面 ```html ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f4724a0400b4d3cada511cc57348302~tplv-k3u1fbpfcp-watermark.image?) 但是我们只能看到一部分所以我们使用 SDGroup 设置位置移动到中间位置，PS：SDGroup 互相嵌套哟 ```html ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4f2ca4a6f9664104bfdad905d683878e~tplv-k3u1fbpfcp-watermark.image?) 好了，只需要添加一个 SDPointerLockControls 组件，我们就可以肆意的在场景里跑起来了。提前告诉你esc 显示鼠标 ```html ``` ```html ``` 但是有个问题，我们发现安esc后第二次点击视图没办法移动，因为props是单向的，我们组件内部状态变更，我们用回调属性unlockCallback,同步状态 ```html ``` ## 开始添加箱子吧这里使用SDMesh组件和SDBoxGeometry组件，创建一个箱子. 同样的我们使用 SDMeshBasicMaterial 和 SDTextureLoader 赋予材质 ```html ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2a6d95892084aafabc078abde52df98~tplv-k3u1fbpfcp-watermark.image?) ## 将箱子组件和地面封装起来没错你可以，封装出自己的3D组件哟 ```html Floor.vue ``` ```html Box.vue ``` ```html ``` ## 创建充满箱子的世界我们修改 Box.vue 代码使用 v-for 创建多个箱子我们使用 SDGroup 包裹所有 SDMesh ```html Box.vue ``` 我们一样移动floor 到中间位置 ```html ``` ## 修改跳跃高度通过设置 SDPointerLockControls 的 options 属性设置跳跃高度 ```html ``` 源代码地址：https://github.com/MILIFIRE/sandi-ui/blob/main/doc/website/guide/MyWorld.vue