数据可视化大屏项目开发中,会需要一些效果装饰,比如由一个个小圆点组成的旋转的球体。我们上一节学习了threejs 初识Points与点材质,那么我们就用points来做一个旋转的球体。
div
依然创建两个div,子div来渲染threejs场景
<template>
<div class="homebody">
<div ref='threeBody' class="threeBody">
</div>
</div>
</template>
data数据
存储宽高以及renderer
data() {
return {
width: 0,
height: 0,
renderer: null,
}
},
运行
初始化命令,并监听窗口变化
mounted() {
var that = this;
const viewElem = document.body;
that.drawPoints()
// 监听窗口变化,重绘地图
const resizeObserver = new ResizeObserver(() => {
setTimeout(() => {
that.getReSize();
}, 300)
});
resizeObserver.observe(viewElem);
},
初始化场景
获取窗口大小,并初始化场景,为了能够快速应用到项目中,视图的大小,我们以指定div的宽高为主。
this.width = this.$refs.threeBody.offsetWidth; //窗口宽度
this.height = this.$refs.threeBody.offsetHeight; //窗口高度
// 初始化场景
const scene = new THREE.Scene();
初始化相机
// 创建相机
var k = this.width / this.height; //窗口宽高比
var s = 10; //三维场景显示范围控制系数,系数越大,显示的范围越大.
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(11, 280, 299); //设置相机位置
scene.add(camera);
// 更新摄像机的投影矩阵
camera.updateProjectionMatrix();
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
// 创建相机
创建一个球体
这里我们创建圆点组成的球体,这里我们的圆点密度大一些,设置为60,如果觉得圆点太多了可以在这里设置,将数字设置的小一些,如果觉得圆点太少了,就将数字设置的大一些,当然数字越大,对硬件的要求也越高。
// 创建球几何体
const sphereGeometry = new THREE.SphereBufferGeometry(3, 60, 60)
创建点材质
创建点材质,并指定点材质的大小,这里的大小,就是那些圆点的大小,我们可以通过size来控制球体中那些小圆点的大小。
const pointMaterial = new THREE.PointsMaterial()
pointMaterial.size = 1
创建网格模型
const mesh = new THREE.Points(sphereGeometry, pointMaterial)
scene.add(mesh)
创建渲染器
/**
* 创建渲染器对象
*/
var renderer = that.renderer = new THREE.WebGLRenderer({
antialias: true, //开启锯齿
alpha: true //如果需要背景透明就开启
});
renderer.setSize(that.width, that.height); //设置渲染区域尺寸
renderer.setClearColor(0x000000, 0); //设置背景颜色
renderer.shadowMap.enabled = true
renderer.physicallyCorrectLights = true
创建控制器
var controls = new OrbitControls(camera, renderer.domElement);
执行渲染
球体创建完成后,我们需要让球体转起来,我们通过设置网格模型的mesh.rotation.y
来实现旋转效果。
function render() {
mesh.rotation.y += 0.005;
renderer.render(scene, camera); //执行渲染操作
requestAnimationFrame(render); //请求再次执行渲染函数render,渲染下一帧
}
render();
插入dom
将dom插入到指定div内
that.$refs.threeBody.appendChild(renderer.domElement)
到这里,一个旋转的由粒子组成的球体就完成了。
由粒子组成的球演示地址
threejs 旋转的粒子地球实例代码下载
代码开发环境基于vue3 vite js nodejs 14
请确保有一定的代码基础
代码效果可以查看上方的演示地址