vite+vue3+threejs实现一个3D模型的展示案例

JavaScript020

vite+vue3+threejs实现一个3D模型的展示案例,第1张

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度无死角旋转。

漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js,基于jQuery,插件采用CSS 3D

动画效果,支持事件Callback调用,支持参数自定义配置,如:

speed:600 切换速度、autoplay:true

是否自动播放,在浏览器兼容方面,需要浏览器支持CSS3变换变形属性,不支持的将看不到3D特效!

<%

dim connstr,db

db = "db2.mdb"

connstr="DRIVER={Microsoft Access Driver (*.mdb)}PWD=DBQ=" &server.mappath(db)

set conn=server.createobject("ADODB.CONNECTION")

conn.open connstr

set rs = conn.execute("select * from admin",1,1)