位置: IT常识 - 正文

vue3项目中使用three.js(vue3用法)

编辑:rootadmin
vue3项目中使用three.js vue3项目中使用three.js前言一、three.js是什么?二、vue3中下载与安装three.js三、操作步骤1.创建场景2.创建物体3.添加光源4.添加相机5.开始渲染四、myThree.vue源代码五、效果图1.单个模型2.多个模型总结前言

推荐整理分享vue3项目中使用three.js(vue3用法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3项目中使用代码编辑工具,vue3this,vue3用法,vue3项目中使用高德地图,vue3用法,vue3项目中使用vue2组件,vue3项目中使用高德地图,vue3项目中使用代码编辑工具,内容如对您有帮助,希望把文章链接给更多的朋友!

在vue3项目中,通过three.js使用了一段短小但完整的代码实现了实际的三维效果图。

一、three.js是什么?

Three.js是一个轻量级,跨平台的Javascript库,可以在浏览器上结合HTML5的canvas,SVG或者WebGL,创建和展示3D模型和动画。 Three.js允许我们在不依赖任何浏览器插件的情况下,创建一个GPU加速的3D动画场景。

二、vue3中下载与安装three.js

1.利用npm安装three.js:

npm install three

2.npm安装轨道控件插件:

npm install three-orbit-controlsvue3项目中使用three.js(vue3用法)

3.安装加载.obj和.mtl文件的插件:

npm i --save three-obj-mtl-loader

4.安装渲染器插件:

npm i --save three-css2drender

安装好后在需要调用的vue文件中引用:

import * as Three from 'three'三、操作步骤

场景——相机——渲染器是在Three.js中必不可少的三要素,只有以上三者结合才能渲染出可见的内容。

1.创建场景//创建一个三维场景 const scene = new THREE.Scene();2.创建物体 const geometry = new THREE.BoxGeometry(100, 100, 100);//长宽高都是100的立方体 // const geometry = new THREE.SphereGeometry(60,40,40);//半径是60的圆 //widthSegments, heightSegments:水平方向和垂直方向上分段数。widthSegments最小值为3,默认值为8。heightSegments最小值为2,默认值为6。 //创建材质(外观) const material = new THREE.MeshLambertMaterial({ // color: 0x0000ff,//设置材质颜色(蓝色) color: 0x00ff00,//(绿色) transparent: true,//开启透明度 opacity: 0.5 //设置透明度 }); //创建一个网格模型对象 const mesh = new THREE.Mesh(geometry, material);//网络模型对象Mesh //把网格模型添加到三维场景 scene.add(mesh);//网络模型添加到场景中3.添加光源 //添加光源 //会照亮场景里的全部物体(氛围灯),前提是物体是可以接受灯光的,这种灯是无方向的,即不会有阴影。 const ambient = new THREE.AmbientLight(0xffffff, 0.4); const light = new THREE.PointLight(0xffffff, 1);//点光源,color:灯光颜色,intensity:光照强度4.添加相机 //创建一个透视相机,窗口宽度,窗口高度 const width = window.innerWidth, height = window.innerHeight; const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000); //设置相机位置 camera.position.set(300,300,300); //设置相机方向 camera.lookAt(0,0,0);5.开始渲染 //创建一个WebGL渲染器 const renderer = new THREE.WebGLRenderer() renderer.setSize(width,height)//设置渲染区尺寸 renderer.render(scene,camera)//执行渲染操作、指定场景、相机作为参数四、myThree.vue源代码

说了这么多,现奉上myThree.vue源代码:

<template> <div id="my-three"></div></template>​<script lang='ts' setup> import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' import { onMounted } from 'vue' //创建一个三维场景 const scene = new THREE.Scene(); //创建一个物体(形状) const geometry = new THREE.BoxGeometry(100, 100, 100);//长宽高都是100的立方体 // const geometry = new THREE.SphereGeometry(60,40,40);//半径是60的圆 //widthSegments, heightSegments:水平方向和垂直方向上分段数。widthSegments最小值为3,默认值为8。heightSegments最小值为2,默认值为6。 //创建材质(外观) const material = new THREE.MeshLambertMaterial({ // color: 0x0000ff,//设置材质颜色(蓝色) color: 0x00ff00,//(绿色) transparent: true,//开启透明度 opacity: 0.5 //设置透明度 }); //创建一个网格模型对象 const mesh = new THREE.Mesh(geometry, material);//网络模型对象Mesh //把网格模型添加到三维场景 scene.add(mesh);//网络模型添加到场景中 // 添加多个模型(添加圆形) // const geometry2 = new THREE.SphereGeometry(60, 40, 40); // const material2 = new THREE.MeshLambertMaterial({ // color: 0xffff00 // }); // const mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh // // mesh3.translateX(120); //球体网格模型沿Y轴正方向平移120 // mesh2.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0 // scene.add(mesh2); //添加光源 //会照亮场景里的全部物体(氛围灯),前提是物体是可以接受灯光的,这种灯是无方向的,即不会有阴影。 const ambient = new THREE.AmbientLight(0xffffff, 0.4); const light = new THREE.PointLight(0xffffff, 1);//点光源,color:灯光颜色,intensity:光照强度 scene.add(ambient); light.position.set(200,300,400); scene.add(light); //创建一个透视相机,窗口宽度,窗口高度 const width = window.innerWidth, height = window.innerHeight; const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000); //设置相机位置 camera.position.set(300,300,300); //设置相机方向 camera.lookAt(0,0,0); //创建辅助坐标轴 const axesHelper = new THREE.AxesHelper(200);//参数200标示坐标系大小,可以根据场景大小去设置 scene.add(axesHelper); //创建一个WebGL渲染器 const renderer = new THREE.WebGLRenderer() renderer.setSize(width,height)//设置渲染区尺寸 renderer.render(scene,camera)//执行渲染操作、指定场景、相机作为参数 const controls = new OrbitControls(camera, renderer.domElement)//创建控件对象 controls.addEventListener('change',()=>{ renderer.render(scene, camera)//监听鼠标,键盘事件 }) onMounted(()=>{ document.getElementById('my-three')?.appendChild(renderer.domElement) })</script>​<style lang='scss'> body{ margin: 0; padding: 0; }</style>五、效果图1.单个模型

2.多个模型

总结

在vue3项目中,通过three.js实现了实际的三维效果demo,未来会继续深入研究,总之3D渲染图形是一个很好玩的东西,欢迎大家一起交流。

本文链接地址:https://www.jiuchutong.com/zhishi/299756.html 转载请保留说明!

上一篇:反射填充详解ReflectionPad2d(padding)(反射dll)

下一篇:〖Python网络爬虫实战②〗- Web网页基础(150讲轻松搞定python网络爬虫)

  • 手机热点名字在哪里改(手机热点昵称怎么改掉)

    手机热点名字在哪里改(手机热点昵称怎么改掉)

  • 约苗怎么订阅门诊到苗通知(约苗怎么订阅门诊)

    约苗怎么订阅门诊到苗通知(约苗怎么订阅门诊)

  • 一个人可以有几个淘宝账号呢(一个人可以有几张银行卡)

    一个人可以有几个淘宝账号呢(一个人可以有几张银行卡)

  • 苹果如何设置自动更新App(苹果如何设置自动关机)

    苹果如何设置自动更新App(苹果如何设置自动关机)

  • 微信收不了别人的转账(微信收不了别人红包怎么解除)

    微信收不了别人的转账(微信收不了别人红包怎么解除)

  • 惠普1213硒鼓型号(惠普1213硒鼓价格)

    惠普1213硒鼓型号(惠普1213硒鼓价格)

  • ipad怎么插卡上网(怎么给ipad插卡)

    ipad怎么插卡上网(怎么给ipad插卡)

  • 淘宝号被降权了多久能恢复(淘宝号被降权了是什么意思)

    淘宝号被降权了多久能恢复(淘宝号被降权了是什么意思)

  • 计算机交流电正常范围(计算机之间的交流)

    计算机交流电正常范围(计算机之间的交流)

  • 荣耀9x录屏怎么去掉小白点(荣耀9x录屏怎么录)

    荣耀9x录屏怎么去掉小白点(荣耀9x录屏怎么录)

  • mate30处理器是麒麟多少(华为mate30用的处理器)

    mate30处理器是麒麟多少(华为mate30用的处理器)

  • qq互传怎么用(扣扣怎么互传)

    qq互传怎么用(扣扣怎么互传)

  • 苹果8p是多大的屏幕尺寸(苹果8p是多大的屏)

    苹果8p是多大的屏幕尺寸(苹果8p是多大的屏)

  • 华为来电转移在哪设置(华为来电转移在哪里关闭)

    华为来电转移在哪设置(华为来电转移在哪里关闭)

  • 文本类型有哪些(语文教材文本类型有哪些)

    文本类型有哪些(语文教材文本类型有哪些)

  • ios微信通话怎么录音啊(苹果手机微信通话)

    ios微信通话怎么录音啊(苹果手机微信通话)

  • 为什么微信转换文字失败(为什么微信转换不了粤语文字)

    为什么微信转换文字失败(为什么微信转换不了粤语文字)

  • Redmi K30什么时候发布(redmik30什么时候更新miui13)

    Redmi K30什么时候发布(redmik30什么时候更新miui13)

  • 运算器能储存信息吗(运算器能储存信号吗)

    运算器能储存信息吗(运算器能储存信号吗)

  • word文档无法修改内容(word文档无法修改行距)

    word文档无法修改内容(word文档无法修改行距)

  • 米读极速版安全吗(米读极速版会不会透露个人信息)

    米读极速版安全吗(米读极速版会不会透露个人信息)

  • 全民k歌不显示活跃状态什么意思(全民k歌不显示mv只显示图片)

    全民k歌不显示活跃状态什么意思(全民k歌不显示mv只显示图片)

  • 2021.1最新win10激活秘钥/产品秘钥/激活码推荐 附激活工具+教程(window10最新激活码)

    2021.1最新win10激活秘钥/产品秘钥/激活码推荐 附激活工具+教程(window10最新激活码)

  • csrss.exe是什么进程?有没有病毒?(csrss是什么程序)

    csrss.exe是什么进程?有没有病毒?(csrss是什么程序)

  • 关于 flex 布局时,子元素宽度超出父元素问题及解决方案(问题)(flex布局适用于哪些场景)

    关于 flex 布局时,子元素宽度超出父元素问题及解决方案(问题)(flex布局适用于哪些场景)

  • 环境保护税属于什么税种
  • 会计能开收据吗?
  • 失业保险费返还属于政府补助吗
  • 调整企业银行存款账面余额的记账依据是什么
  • 营改增后还有企业所得税吗?
  • 员工报销会计分录怎么做
  • 开公司财务流程
  • 管理费用和财务费用算营业成本吗
  • 企业所得税根据什么报表申报
  • 非盈利组织捐赠支出
  • 用理财产品去抵债违法吗
  • 专用设备抵免企业所得税目录
  • 税务局开租赁发票
  • 本月出口下月开发票可以吗
  • 不动产的进项税额分两年抵扣吗?
  • 征收开票信息
  • 业务招揽方式
  • 付敏科技有限公司官网
  • 海关增值税发票双抬头
  • 账外资产评估入账固定资产折旧可以税前扣除吗?
  • carrier profile
  • 厂区道路施工步骤
  • php如何使用session
  • 汇票本票支票的相同点和不同点
  • 处置子公司的收益
  • 企业自行搬迁需要交税吗
  • macOS Big Sur 11.2.1 修订版更新发布
  • 融资租入固定资产是什么意思
  • 应付债券利息费用
  • 考核工资可以不发吗
  • 企业合并的合并范围
  • 备用金支出没有发票怎么办
  • 筹建期间借款费用
  • java使用循环结构输出九九乘法表
  • laravel运行
  • 预缴和缴纳的区别
  • php是什么
  • 收到个人所得税汇算清缴短信
  • 购买的固定资产退回账务处理
  • 利润表调整了资产负债表怎么调整
  • mysql升级-5.1升级到5.7
  • 小规模纳税人企业所得税优惠政策最新2023
  • 如何理解合并报表编制程序中的调整与抵消处理
  • 客户货款打到私人微信,删除公司电脑数据
  • 劳务费发票可以抵扣吗?
  • 出口退税的发票是专票还是普票
  • 银行汇票使用方法
  • 残保金是应交税费吗
  • 营业税金及附加税率
  • 职工食堂的费用,会计上怎么做账?
  • 卖固定资产如何做账
  • 开具正数发票中如何体现扣款?
  • 双倍余额递减法计提折旧公式
  • 上月计提少了怎么办
  • 废料收入是什么会计分录
  • 当月销售次月开票成本怎么结转
  • 财务费用科目余额
  • 计提房产税需要附凭证吗
  • 税务报表工会经费是按什么交了
  • 事业单位职工福利费支出范围
  • mysql事务视图
  • the bluetooth device is ready to pale
  • win8启动文件夹在哪里
  • mac 设置
  • centos 6.6安装教程
  • 如何设置鼠标移入并停止时触发接口
  • linux中ps命令详解
  • Win10预览版镜像
  • windows8装.NET 3.5时出现0x800F0906错误解决方案
  • win8电脑键盘全部失灵怎么办
  • ES6 javascript中class静态方法、属性与实例属性用法示例
  • 完本小说 电子书地址
  • nodejs基础教程
  • javascript的promise
  • python获取数据的方法
  • 云南地方税务局电话
  • 免租期算租赁期限吗
  • 河南省地方税务局公告2017年第4号
  • 个体工商户地税怎么申报
  • 重庆电子税务局app下载
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设