vue中使用three绘制星空效果
文章目录
- 一、Three.js 是什么?
- 二、使用步骤
- 1.引入库
- 2.开始绘制星空
- 总结
关于使用three绘制星空效果的记录
一、Three.js 是什么?
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。
二、使用步骤
1.引入库
首先npm install three
import * as THREE from "three";
2.开始绘制星空
data中定义变量
data() {return {camera: null,scene: null,starsGeometry: null,starField:null,renderer: null,}},
创建相机渲染器等
inti(){this.camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);this.camera.position.z = 1400;this.scene = new THREE.Scene();this.starInti()this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true,});this.renderer.setSize(window.innerWidth, window.innerHeight);// this.renderer.domElement.style.position = 'absolute';document.getElementById('threeStar').appendChild(this.renderer.domElement);},
生成星空
starInti() {//星空this.starsGeometry = new THREE.Geometry();//生成点的位置for (var i = 0; i < 12000; i++) {var star = new THREE.Vector3();//THREE.Math.randFloatSpread 在区间内随机浮动* - 范围 / 2 *到* 范围 / 2 *内随机取值。star.x = THREE.Math.randFloatSpread(2000);star.y = THREE.Math.randFloatSpread(2000);star.z = THREE.Math.randFloatSpread(2000);this.starsGeometry.vertices.push(star);}var starsMaterial = new THREE.PointsMaterial({ color: '#fff',sizeAttenuation: false });this.starField = new THREE.Points(this.starsGeometry, starsMaterial);this.scene.add(this.starField);},
定义动画
animate() {requestAnimationFrame(this.animate);//星空旋转可通过镜头旋转或者物体旋转实现// this.camera.rotation.y = this.camera.rotation.y -0.0005 //镜头旋转this.starField.rotation.y+=0.0002this.starField.rotation.x+=0.0002this.starField.rotation.z+=0.0002this.render();},
渲染
render() {this.renderer.render(this.scene, this.camera);},
在mounted中调用方法
mounted() {this.inti()this.animate()this.render()},
div
<template><div id="threeStar" ref="threeStar"></div>
</template>
样式
<style lang="scss" scoped>
#threeStar {width: 100%;height: 100%;position: absolute;top: 0;z-index: 9;//bottom: 4vh;
}
</style>
总结
以上就是使用threejs绘制简单星空效果,在要应用的vue页面引入该组件即可。
vue中使用three绘制星空效果相关推荐
- vue中使用Echarts绘制K线图
一.需求问题 在开发项目中,我们可能会遇到这样的需求.在vue中使用Echarts绘制K线图,进行数据分析.下面是一个简单的K线图绘制,数据是伪造的,虽然不多,但是能够实现大致的K线图效果. 二.需求 ...
- vue中怎么实现吸顶效果
在 web 应用中,我们经常需要让页面中的一个或多个元素在页面滚动时保持固定位置.这种效果通常被称为吸顶效果,因为它使元素像粘在页面顶部一样固定不动. 在 Vue 中,实现吸顶效果有不同的方法.本文将 ...
- 3d饼图 vue_在Vue中使用highCharts绘制3d饼图
highcharts是国外知名基于javascript的图表库.由于中文官网的vue中使用highcharts配置繁琐并且需要引入jquery作为依赖,所以弃用. 接下来,给各位伙伴简要的讲叙下hig ...
- vue中使用bpmn-js绘制流程图,并实现汉化、自定义Palette及ContextPad。
一.认识bpmn-is bpmn-js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成. 效果图如下(改造后): 二.在vue基本使用 安装bpmn-js npm ins ...
- vue中使用echarts绘制仪表盘
效果图 目录 一.安装echarts 1.控制台使用命令进行安装 2.在package.json中配置echarts 3.在main.js中引用 二.vue中使用echarts 1.首先设置一个放置图 ...
- VUE中使用Echarts绘制地图迁移
踩坑说明 很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...
- vue中supermap iserver绘制使用的插件安装
// 安装插件 npm install leaflet npm install @supermap/iclient-leaflet npm install leaflet-draw// 使用的vue文 ...
- vue中使用mapBox绘制圆形范围
需求: 根据给定经纬度坐标绘制给定半径的圆形区域. 代码: <template><div><div id="map"></div>& ...
- vue中使用echart绘制柱状图、折现图、饼状图
echarts有几个主要的字段,title.legend.xAxis. yAxis.tooltip.series. title 图表的标题 legend 用来标志图表数据,data字段的数组需要对应每 ...
最新文章
- 新基建的内涵、意义和隐忧 ,基于互联网大脑模型的分析
- 计算机的桌面教案,《认识计算机桌面》教案-20210608141312.pdf-原创力文档
- [Python]架设python虚拟环境以及部署PythonWeb服务
- java邮箱代码_java邮箱开发代码——发邮件
- 如何合理命名你的代码
- javascript中的cookie问题
- 大数据需留意的六个安全问题
- 中山大学计算机学院官网万海,中山大学
- vulhub Tomcat8漏洞复现
- WordPress主题 LightSNS v1.6.60 强大的社交系统SNS主题(免受权)
- 苹果手机热点连上不能上网_iPhone手机开了热点,为什么电脑连不上?靠这三招即可轻松解决!...
- 游戏策划关于游戏概念和游戏原型设计
- Pyinstaller打包
- matlab中电压跟踪型pwm,新型数字锁相环实现对电压信号的无差跟踪
- 确定项目的目的和目标
- ​​​​​​​排列组合基本原理及公式
- 功能性与非功能性需求
- Vulkan学习(十五): 总结
- 宁波大学 软件技术exp_2_1 (1)
- 围棋计算机运算,围棋冠军:用计算力赢计算机
热门文章
- pip使用镜像下载第三方包
- “8.5折购买商品”和“原价购买得12倍积分”,哪个更划算?
- 高级经济师计算机考试试题,2020年高级经济师考试模拟答题系统
- python平均_python 算平均
- GPT-4和ChatGPT效果对比,差别太大了
- idea 注释模板设置
- 关于汇编指令:NEG 用C\C++如何操作的问题
- 判断View滑入或滑出屏幕可见区
- 线程安全有序的SET,Map, List
- 前端vue导出 xlsx 实现带标题 内容居中 自动换行 合并单元格 加边框 合计 字体大小设置等