js如何在摄像头放3d模型

JavaScript015

js如何在摄像头放3d模型,第1张

js在摄像头放3d模型步骤:

1、打开3DMax并导入一个模型。点击标识“摄像机”,在点击下面菜单栏里的“目标”;

2、将窗口切换到“顶视图”。用鼠标点击绘画栏空白的地方,并拖出“摄像机”。;

3、按“c”键,就会出来摄像机的视角,调整摄像头的角度。

1.检查npm -v版本和使用对应的vite安装vue3项目

需要安装依赖:npm install

运行:npm run dev

目录结构:

2.threejs官网:

3.安装threejs

4.准备3D模型素材(我这里使用glb格式)和HDR图片,素材网上可以找有免费的。

5.在App.vue中绑定id,挂载,实例化使用

6.在项目中的src目录下创建utils目录,在utils目录下创建Base3d.js脚本

效果展示:手机模型已经加载至场景中,背景是hdr图。

功能展示:用户可以滑动滚轮将模型进行放大缩小,场景360度无死角旋转。