云上交互教室3D视角代码

126 阅读2分钟

动画.gif

安装并创建场景

屏幕截图 2025-01-03 090850.png在这段代码中我们通过three.js中的构造函数创建了场景 、渲染器、相机、轨道控制器和辅助线并一一添加实现效果做好了基础准备

做好创建物体需要的类和存放位置

屏幕截图 2025-01-03 091359.png 在创建物体的这个类中我们在构造函数类添加了比例、纹理、和建后物体三个属性,在three.js中建后物体所应用的材质是可以通过更改直接更改他所使用的材质进行更改,而不能通过建后物体的属性更改, 并在原型链上添加了一个测试和旋转的方法,而当前所用到的都保存在积木这个对象中,灯和座位是二维数组分别保存三个组中的数据,辅助则保存一些功能

创建座位和灯光

屏幕截图 2025-01-03 092347.png

屏幕截图 2025-01-03 092302.png 灯光是3X3的所以我们通过俩个循环和二维数组来存储并修改了初始属性,其他的地板和白板墙就是通过类创建并添加到场景中的并设置了属性,在html中有个video视频我们通过id获取并设置自动播放并将视频转换成纹理并设置到白板的纹理属性中就成了视频,创建座位时1、3组一排4二组6也是通过两个循环解决并存放在二维数组里

设置gui操作

屏幕截图 2025-01-03 093416.png

屏幕截图 2025-01-03 093340.png 设置一个退出全屏与进入的功能,并将其引入gui中,然后是创建三个组状态用来改变辅助状态其中的判断是判断是否是数组是则循环改变不是直接改变,灯用来改变3X3的灯的属性设置的一排一排的更改用二维数组中的一就可以做到,而更改一个就是改一排则是通过循环二便能做到,座位也是同理

image.png