位置: 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网络爬虫)

  • 联想电脑蓝屏无法进入系统桌面怎么办?(联想电脑蓝屏无法自动修复)

    联想电脑蓝屏无法进入系统桌面怎么办?(联想电脑蓝屏无法自动修复)

  • 红米k20pro多少赫兹(红米k20pro多少hz)

    红米k20pro多少赫兹(红米k20pro多少hz)

  • 华为p40怎样设置返回键(华为p40怎样设置简易模式)

    华为p40怎样设置返回键(华为p40怎样设置简易模式)

  • windowsimagebackup是什么文件夹(windowsimagebackup是什么文件夹怎么删除)

    windowsimagebackup是什么文件夹(windowsimagebackup是什么文件夹怎么删除)

  • iphone热点故障是怎么回事(苹果热点异常)

    iphone热点故障是怎么回事(苹果热点异常)

  • 手机投屏到电视没有字幕(手机投屏到电视上后,手机可以退出来吗)

    手机投屏到电视没有字幕(手机投屏到电视上后,手机可以退出来吗)

  • 属于微机网络所特有的设备是(微机进行联网,这个网络属于)

    属于微机网络所特有的设备是(微机进行联网,这个网络属于)

  • 红米k30屏幕是哪家(红米k30的屏幕是)

    红米k30屏幕是哪家(红米k30的屏幕是)

  • 企鹅电竞可以改名字吗(企鹅电竞改成什么了)

    企鹅电竞可以改名字吗(企鹅电竞改成什么了)

  • email地址的格式正确的是(email地址的格式由用户名和域名)

    email地址的格式正确的是(email地址的格式由用户名和域名)

  • 迅雷曲线图什么意思(迅雷曲线功能什么意思)

    迅雷曲线图什么意思(迅雷曲线功能什么意思)

  • 如何清理华为云空间的照片(如何清理华为云盘空间)

    如何清理华为云空间的照片(如何清理华为云盘空间)

  • 手机卡三个月不用怎么处理(手机卡三个月不用就自动注销了吗)

    手机卡三个月不用怎么处理(手机卡三个月不用就自动注销了吗)

  • 怎么自定义纸张大小(goodnotes怎么自定义纸张)

    怎么自定义纸张大小(goodnotes怎么自定义纸张)

  • 苹果11怎么弄九宫格(苹果11怎么弄九宫格切图)

    苹果11怎么弄九宫格(苹果11怎么弄九宫格切图)

  • 快手怎么复制别人视频(快手怎么复制别人的视频)

    快手怎么复制别人视频(快手怎么复制别人的视频)

  • 微信换头像有限制吗(微信换头像有限额吗)

    微信换头像有限制吗(微信换头像有限额吗)

  • 苹果x的耳机孔在哪(苹果x耳机孔图片)

    苹果x的耳机孔在哪(苹果x耳机孔图片)

  • 荣耀手环5和5i的区别(荣耀手环5和5i区别)

    荣耀手环5和5i的区别(荣耀手环5和5i区别)

  • qq的漂流漂流瓶在哪里(qq漂流瓶在哪2020)

    qq的漂流漂流瓶在哪里(qq漂流瓶在哪2020)

  • internet环境中的防火墙建立在哪里(一般而言internet环境)

    internet环境中的防火墙建立在哪里(一般而言internet环境)

  • 分屏模式在哪里设置(分屏模式在哪里打开)

    分屏模式在哪里设置(分屏模式在哪里打开)

  • oppo手机从哪里调色彩(oppo手机从哪下载软件)

    oppo手机从哪里调色彩(oppo手机从哪下载软件)

  • 手机浏览器地址栏在哪里(手机浏览器地址栏不见了)

    手机浏览器地址栏在哪里(手机浏览器地址栏不见了)

  • 小米运动如何删除人员(小米运动如何删除之前的信息?)

    小米运动如何删除人员(小米运动如何删除之前的信息?)

  • 启用新账簿时,应填写
  • 年检更换需要什么材料
  • 递延收益与递延所得税负债的区别
  • 进口环节消费税需要自行申报吗
  • 税款抵扣会计分录
  • 母子公司的关联交易怎么看
  • 利润分配的规则
  • 购车发票需要认购吗
  • 进项抵扣税率是多少
  • 非税收入专用申报表
  • 事业单位人员租房有补助吗
  • 金税三期会查之前的票吗
  • 公司收的保证金可以打入私人账户吗
  • 进口增值税已抵扣想出口
  • 客户退货不退款会计怎么处理
  • 企业给员工发放最低生活保障
  • 境内企业是否可以出境
  • 年薪制离职补偿金如何计算?
  • 企业营改增对企业税负影响分析
  • 社会团体收取的会费是否缴纳增值税
  • 农民工工资怎么交个人所得税
  • 取消票种核定需什么手续
  • 小规模纳税人 核定
  • 按揭购入固定资产怎么算
  • 当年的成本发票必须当年结算吗
  • 递延收益摊销会计分录
  • 企业购入用于捐赠的物品
  • win10如何设置声音
  • 电脑显示器模糊不清晰是什么原因
  • 土地出让金可以代缴吗
  • oracle win10
  • 全球矿业巨头力拓集团
  • 外币借款业务的特点包括
  • php创建视图
  • 损益类科目增加记借方吗
  • 股本和库存股有什么区别
  • 摊销结束后
  • 发票开错对方已抵扣该怎么处理?
  • mysql数据库编码
  • 购买商品并入库做什么会计分录
  • 职工给单位造成损失可以申请仲裁吗
  • 非营利组织的一般战略是
  • 期末留抵税额怎么填报表
  • 取报销凭证的步骤
  • 未收到货款发票是什么意思
  • 如何判定企业库存现金
  • 写字楼里的公司怎么赚钱
  • 收到商业汇票计什么科目
  • 进口消费品增值税计税依据
  • 法院案件受理费退费申请
  • 自营工程的账务处理
  • 企业支付宝要手续费吗
  • sql实现选择操作
  • Mac下mysql 5.7.17 安装配置方法图文教程
  • lsass.exe
  • 回收站清空文件怎么恢复?试试这三个方法找回!
  • 如何知道文件的解压密码
  • root linux
  • 打开linux系统
  • win8.1怎么设置
  • PHP 7.0.0 Alpha 2 发布
  • win81with update
  • windows7如何安装net framework4.0
  • android 4.2
  • img引入图片
  • codeblocks使用技巧
  • jquery获取鼠标位置
  • python的模块和包
  • unity引擎用什么模拟器
  • 配置ip地址的方法有哪几种
  • javascript语言中,以下关于array
  • Button.setOnClickListener(OnClickListener l) 原理
  • android布局文件详解
  • 怎么查看keytab文件
  • 不含税价是除以1.13还是乘以0.87
  • 财务报表盖章位置
  • 福建省地方税务局领导名单
  • 台湾大学会计硕士
  • 江苏几个地级市几个县级市
  • 税务申报按季度申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设