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

JavaScript030

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

html>

<head>

<title>Hover</title>

<style type="text/css">

*{

padding: 0

margin: 0

font-size: 11pt

}

div{

float: left

width: 100px

margin-right: 20px

padding: 5px

border: 1px solid #999

background-color: #eee）

Vue.js介绍：

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

【SpringBoot2.0文章汇总目录，java多线程教程文章汇总 长期更新系列

】

请多多支持

本项目是一个基于 Spring Boot、Spring Cloud、Spring Oauth2 和 Spring Cloud Netflix 等框架构建的微服务项目 前端框架为Vue.js、 ElementUI。

@作者 github 地址 欢迎star

panda微服务工程地址

panda-admin前台工程地址

后续会陆续支持 zipkin服务链路监控 springboot-admin 服务健康监控等

github 地址 跪求大家star

panda微服务工程地址

panda-admin前台工程地址

希望大家有兴趣一起完善的可以联系我

如果有任何问题欢迎加群交流沟通 QQ交流群: 558509374