three.js结合vue

作者:baekpcyyy🐟

1.搭建环境

ps:这里要按照node.js在之前有关vue搭建中有介绍
新建文件夹并在vsc终端中打开

1.输入vite创建指令

npm init vite@latest

请添加图片描述
然后我们cd进入刚才创建的目录下

npm install

安装所需依赖

npm run dev

启动该项目请添加图片描述

2.整理页面

将template 标签以及style标签中的内容进行整理请添加图片描述

3.将three.js中main.js的内容我们可以放在script标签中

2.使用集成gui

1.导入

这里的导入方式和不结合vue还是有区别的
请添加图片描述

2.创建点击全屏 退出全屏按钮

1.首先创建对象

请添加图片描述

2.创建gui请添加图片描述

3.添加按钮

将创建的对象以及对象的函数最为参数
请添加图片描述
现在我们就可以点击屏幕上渲染的按钮进行全屏和退出全屏
请添加图片描述
下面是不利于集成gui设置的点击全屏退出全屏的按钮使用集成gui可以快速的加快我们的开发速度

请添加图片描述
请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/187510.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端笔记:React的form表单全部置空或者某个操作框置空的做法

原创/朱季谦 在React框架前端开发中,经常会有弹出框的开发,涉及到弹出框,难免就会有表单。一般在关闭弹出框或者对表单联动时,往往都需要考虑对表单进行置空操作了。 我以前在工作就遇到过这类问题,正好顺便对表单置空…

【UE】中文字体 发光描边材质

效果 步骤 1. 先将我们电脑中存放在“C:\Windows\Fonts”路径下的字体导入UE 点击“全部选是” 导入成功后如下 2. 打开导入的“SIMSUN_Font”,将字体缓存类型设置为“离线” 点击“是” 这里我选择:宋体-常规-20 展开细节面板中的导入选项 勾选“使用距…

【投稿优惠、可EI检索】2024年机器人学习与自动化算法国际学术会议(IACRLAA 2024)

2024年机器人学习与自动化算法国际学术会议(IACRLAA 2024) 2024 International Academic Conference on Intelligent Control Systems and Robot Learning 一、【会议简介】 本届机器人学习与自动化算法国际学术会议(IACRLAA 2024)将于2024年1月23日在北京盛大开幕。这次会议将…

深信服技术认证“SCSA-S”划重点:SQL注入漏洞

为帮助大家更加系统化地学习网络安全知识,以及更高效地通过深信服安全服务认证工程师考核,深信服特别推出“SCSA-S认证备考秘笈”共十期内容,“考试重点”内容框架,帮助大家快速get重点知识~ 划重点来啦 深信服安全服务认证工程师…

软件设计之原型模式

原型模式是从一个对象再创建另一个可定制的对象,而且不需要知道任何创建的细节。拷贝分浅拷贝和深拷贝。浅拷贝无法拷贝引用对象。在面试的时候,我们会投多家公司,根据岗位的不同我们会适当调整。使用原型模式可以快速达到需求,下…

推荐几款python在线学习和电子书网站

学习python的过程中,虽然下载了很多的电子书,但是在学习过程中基本上都是通过一些在线网站或者在线电子书进行的。 下面给大家推荐几个在线学习教程网站和电子书网站。 《菜鸟教程》 一句话介绍:很多初学者的选择 网址:https:…

plt创建指定色系

1、创建不连续色系 import matplotlib.pyplot as plt from matplotlib.colors import ListedColormap# 定义颜色的RGB值 colors [(0.2, 0.4, 0.6), # 蓝色(0.8, 0.1, 0.3), # 红色(0.5, 0.7, 0.2),(0.3,0.5,0.8)] # 绿色# 创建色系 cmap ListedColormap(colors)# 绘制…

【复位与释放(亚稳态)模为60的BCD码计数器_2023.11.22】

复位与释放&#xff08;异步复位&#xff0c;同步释放&#xff09; 同步复位rst、同步置数load&#xff08;置数信号只有在时钟上升沿到来时才能生效&#xff09;、同步清零clr 同步复位&#xff1a; always(posedge clk) if(!rst_n) b<1’b0; else b<a; 同步复位信号rs…

Linux--系统结构与操作系统

文章目录 冯诺依曼体系结构为什么要有内存&#xff1f;场景一 操作系统何为管理&#xff1f; 冯诺依曼体系结构 冯诺依曼体系结构是计算机体系结构的基本原理之一。它将程序和数据都以二进制形式存储&#xff0c;以相同的方式处理和存取。 上图是冯诺依曼体系结构的五大组成部…

SpringBoot 整合 Neo4j 实战(头歌)

文章目录 第1关&#xff1a;认识 Spring DATA Neo4J任务描述相关知识Spring DATA Neo4J - 简介Spring JDBC / Spring ORM 模块的缺点&#xff1a;Spring 数据模块的优点&#xff1a;Spring 数据模块功能&#xff1a;Spring DATA Neo4j 模块的附加功能&#xff1a; Spring DATA …

gromacs学习及使用(2)

命令解释参考GROMACS基本教程 整个流程参考分子动力学模拟Gromacs一般使用步骤&#xff08;空蛋白&#xff09; 从gromacs 5.0版本开始&#xff0c;所有的工具都是“gmx”的子模块。可以通过下面的命令获得任何一个模块的帮助信息&#xff1a; gmx help (module) 或者 gmx (mo…

视频剪辑合并:批量处理视频,高效快捷,添加背景音乐更添魅力

随着数字媒体的普及&#xff0c;视频已成为生活中不可或缺的一部分。无论是记录生活、分享经验&#xff0c;还是传递信息&#xff0c;视频都以其独特的魅力占据了重要的地位。而在这个快节奏的时代&#xff0c;如何高效地处理视频&#xff0c;以及如何通过添加背景音乐来提升视…

服务器安装JDK17 版本显示JDK8

服务器之前安装的是JDK8&#xff0c;后面升级JDK17后&#xff0c;发现执行 java -vsrsion 显示的是此时我的环境变量已经换成了JAVA17的路径 输入&#xff1a; vim /etc/profile 解决办法&#xff1a; 1.更新自己环境变量 bash export JAVA_HOME/usr/local/jdk-17.0.7 …

Anemone库的爬虫程序代码示例

以下是代码&#xff1a; ruby require anemone # 设置代理服务器 Anemone.proxies { http > "", https > "" } # 定义爬取的URL url # 使用Anemone进行爬取 Anemone.crawl(url) do |page| # 使用正则表达式找出所有的视频链接 video_…

windows 查看mysql的错误日志

查找错误日志文件存储路径 用到的软件&#xff1a;everything 官网 voidtools 下载路径 https://www.voidtools.com/Everything-1.4.1.1024.x64-Setup.exe 直接点击下载即可 运行效果如下 我们知道mysql有个配置文件是my.ini&#xff0c;里面配置了相关信息 我们需要先…

elasticsearch操作

目录 一、mapping映射属性二、索引库的CRUD2.1 创建索引库和映射2.2 查询索引库2.3 修改索引库2.4 删除索引库2.5 总结 三、文档操作3.1 新增文档3.2 查询文档3.3 删除文档3.4 修改文档3.5 总结 四、RestClient操作索引库4.1 初始化RestClient4.2 创建索引库4.3 删除索引库4.4 …

Vue3-数据交互请求工具设计

1.安装axios pnpm add axios 2.利用axios.create创建一个自定义的axios来使用 参考官网&#xff1a;axios中文文档|axios中文网 | axios 在src/utils文件夹下新建request.js&#xff0c;封装axios模块 import axios from axios const baseURL const instance axios.creat…

如何查看电脑内存?Windows 和 Mac 方法不同

Windows 系统查看内存方法 在 Windows 操作系统中我们查看电脑内存在哪里查呢&#xff1f;下面总结的 3 种查看电脑内存的方法都可以使用&#xff1a;使用任务管理器&#xff1a;任务管理器是 Windows 中一个强大的工具&#xff0c;可用于监视和管理计算机的性能和资源使用。使…

Adobe InCopy の Adobe InDesign 大联动

今天我们再来进行Adobe全家桶剩余几位的介绍~ Adobe InCopy是一款专业的文字编辑和校对软件&#xff0c;它是InDesign的附属软件&#xff0c;主要用于编辑、校对和协作文本内容。InCopy提供了一系列功能&#xff0c;使得编辑和校对文本变得更加简单和高效。在InCopy中&#xff…

2023 BUCT 计算方法实验报告

前言 Textlive版本&#xff1a;2023 textstudio版本&#xff1a;4.6.3 名字和日期在以下地方修改: 图片下载地址; figures.zip LiangCha_Xyy/Source - Gitee.com 如下图&#xff0c;.tex文件和figures文件夹放在同一路径下即可 .tex代码 \documentclass[UTF8]{ctexart} \usep…