threejs 点材质属性深度解析

上一节我们学习实践了threejs 旋转的粒子地球,这一节我们继续学习点材质的属性。

首先是基础代码流程，虽然之前写过了相关的流程，为了避免翻看上一节的代码，这里继续讲基础代码给列出来。

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 camera = new THREE.PerspectiveCamera(75,
          this.width / this.height,
          0.1,
          1000);
      camera.position.set(0.20129542186720212, 5.123883465710582, 5.471575558026662); //设置相机位置
      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)

修改点材质的颜色

我们将点材质的颜色改为黄色

pointMaterial.color.set(0xfff000)

设置相机衰减

指定点的大小是否因相机深度衰减，默认是true,仅限透视摄像头

 // 相机深度而衰减 
pointMaterial.sizeAttenuation = false

点材质设置纹理

材质引入，可以通过import引入图片然后再载入纹理，也可以直接指定路径载入纹理

路径载入纹理

使用路径载入的话，需要特定的路径。

// 载入纹理
const textureLoader = new THREE.TextureLoader()
路径引入
const texture = textureLoader.load('./textures/particles/star.png')
pointMaterial.map = texture

import载入纹理

使用import载入纹理的话可以是相对的路径，比如当前文件相对的文件路径。

import star from './assets/star.png'
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load(star)
pointMaterial.map = texture

设置透明材质

我们可以设置透明材质，不过设置的时候，需要将transparent开启。

pointMaterial.alphaMap = texture;
pointMaterial.transparent = true;

深度缓冲区

渲染此材质是否对深度缓冲区有任何影响

pointMaterial.depthWrite = true

叠加高亮

开启混合模式，两个点叠加后颜色会显得更亮

pointMaterial.blending = THREE.AdditiveBlending

由粒子组成的球演示地址

threejs 点材质属性深度解析

threejs 旋转的粒子地球实例代码下载

代码开发环境基于vue3 vite js nodejs 14

请确保有一定的代码基础

代码效果可以查看上方的演示地址