此项目主要采用 threejs+vue3+element-plus+C4D搭建,在web端实现3d模型的写实展示,同时根据业务需求开发更加细致的功能,可快速与常规前端项目无缝衔接,不论是普通大屏可视化,还是通过三维方式实时管控检测设备状态,效果都非常棒。大家可以多给给意见。, 视频播放量 59
调用BaseManager类完成渲染 并且定义控制角度和视角开关的方法//路径:src/views/home/components/Robot3d/index.vue<template></template>import{defineExpose,onMounted}from"vue";importBaseManagerfrom"./manager/BaseManager.js";letbase=null;onMounted(()=>{base=newBaseManager(document.querySelector("canvas.webg...
this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸 this.renderer.shadowMap.enabled = true // 显示阴影 this.renderer.shadowMap.type = THREE.PCFSoftShadowMap this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色 element.appendChild(this.renderer.domElement) }...
master 克隆/下载 git config --global user.name userName git config --global user.email userEmail 分支1 标签0 王朔12304aa8cc8个月前 2 次提交 提交 three-sfz 123 8个月前 简介 vue3+elementplus+three.js收费站,可以打开栏杆,点击查看收费窗口 ...
{ Operation } from '@element-plus/icons-vue'; import { ref } from 'vue'; import Menu from '../views/robotContrlMenu.vue'; import Menu2 from '../views/test2.vue'; import * as THREE from 'three'; // 控制器 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';...
创建vue3项目 // npm create vue@latest 修改路由 // router/index.js// 增加login路由import{createRouter,createWebHistory}from'vue-router'importHomeViewfrom'../views/HomeView.vue'constrouter=createRouter({history:createWebHistory(import.meta.env.BASE_URL),routes:[{path:'/',name:'home',component...
项目中使用到的技术有:vue3、TypeScript、Three.js、Echarts、elementPlus。 项目目标 1、以为3D形式展示全球疫情分布。 2、显示实时疫情数值。 3、以图表形式分析疫情数据。 4、允许下载各地疫情excel表格。 5、自动获取用户位置。 6、分析当地疫情数据。 7、生成当地疫情word报告。 api说明 本项目数据来源:新浪公...
[软件设计]vue+threejs+elementUI+larvel+mysql开发企业内网3D模型库(六),程序员大本营,技术文章内容聚合第一站。
Vue 3.2 + TypeScript + Pinia + Vite2 + Element-Plus 管理系统(开源啦 🎉🎉) 项目功能 🚀 使用 Vue3.2 开发(单文件组件) 🚀 采用 Vite2 作为项目开发、打包工具(配置了 Gzip 打包、TSX 语法、跨域代理、打包预览工具……) 🚀 整个项目集成...
通过按钮点击事件设置模型颜色,我这里使用 element-plus 的按钮 <el-button class="yellow-btn" type="warning" plain @click="yellowBtn" >黄色</el-button > 1. 2. 3. const yellowBtn = () => { console.log(mesh); mesh.material.color.set(0xe5a144); ...