阿里巴巴：D2终端技术大会淘宝人生专属小屋虚拟角色和虚拟场景技术探索（30页）.pdf

1、淘宝人生专属“小屋”虚拟角色和虚拟场景技术探索梵昀阿里巴巴淘宝互动娱乐前端工程师目录我们有什么 我们想做什么01我们一起来创作02技术框架内幕03未来展望04我们有什么？我们想做什么？淘宝人生首页旅行玩法首页人生小屋入口路径我们想做什么：人生小屋演示视频人生小屋我们一起来创作Get Started!技术框架内幕制作场景资产标准室内场景Step1:加载房间模型引擎选择3D场景模型场景文件格式转换场景导入室内场景同Step1:加载家具模型场景室内场景Step2:加载相机预备知识1.透视相机：Perspective camera2.正交相机：Orthographic cameraSceneCamer

2、aRendererRender the scene with camera将相机捕捉到的场景帧，通过渲染器渲染到画布上展示给用户室内场景坐标系统:MVP矩阵变换局部空间：Local Space，或者称为物体空间(Object Space)，局部坐标是对象相对于局部原点的坐标世界空间：World Space，世界坐标作为一个更大空间范围的坐标系统室内场景Step2:加载相机选择透视相机：Perspective cameraFOV:视场角，相机视锥体的两端的夹角。视场角的大小决定了视野范围，视场角越大，视野就越大。目标物体超过这个角就不会被收在镜头里。室内场景Step3:相机如何围绕场景中心旋转？

3、OrbitControlOrbitControl 轨道控制器：使相机围绕目标进行轨道运动三维场景能旋转的本质：相机对象的旋转鼠标左右拖动改变相机位置、角度、渲染空间数据引起图像变化室内场景Step3 trick:相机视野变换？FOVFieldField ofof ViewView 相机视野相机视野相机位于顶部，俯视视角时，看到整个房间？相机的张角变大，视野FOV 增大camera.rotationXxzy相机平视相机俯视，FOV增大z zxy室内场景Up till now:场景模型展示疑问为何墙壁被隐藏了？单面墙视角在入户门背后时，如何隐藏门框？mesh visibility室内场景Step4

4、:隐藏门框 mesh visibilityz zxy世界坐标系camera.worldPosition（x，y，z）doorEdge.worldPosition（x,y,z）相机z坐标 门框z坐标，隐藏门框mesh角色Step1:加载虚拟人?美术生产人物动起来Step2:Joystick操控摇杆Joystick 2个重要参数：joystick force:strength in%joystick angle:angle in radian疑问相机没有跟随移动，人走出视野人物动起来且始终在视野中Step3:相机跟随场景的相机，挂载到人物node父节点上，人物在中心Joystick操控人物node

5、移动场景相机同步移动，场景视角改变，人物始终在中心子节点设置的坐标位置是相对于父节点的局部空间坐标，相机始终位于人物node正前游戏逻辑家具选中方案：RaycastRaycast光线投射原理：1.确定射线起点：常用相机原点2.确定射线终点：鼠标点击点（视口坐标-世界坐标:MVP）3.创建射线对象：起点是相机坐标，终点为鼠标点击处4.检测碰撞结果：射线和检测物体的包围和求交5.捕获与此射线相交的空间中的物体6.相交的物体按照深度排序，并返回如何选中家具？射线起点：相机射线终点：鼠标点击检测物体：家具返回：与家具相交点的位置游戏逻辑家具拖拽移动:Raycast核心点：如何得知鼠标拖拽位置的世界坐标

6、？射线起点：相机射线终点：鼠标点击检测物体：地板返回：与地板相交点的位置游戏逻辑人物与家具碰撞：Raycast如何检测人物与家具碰撞？射线起点：人物射线方向：人物走动方向检测物体：家具返回：与家具相交点的位置大量家具时，低端机达不到大量家具时，低端机达不到fps30fps30格子游戏逻辑人物与家具碰撞：格子看不见的逻辑层：tileInfo将地板划分为 n*n 二维数组形式家具所占地砖 x*y此位置地砖保存该家具信息游戏逻辑与家具动作交互动作触发点足够靠近动作触发点旋转人物转向（基于家具自转角度+触发点位置）播放动画