vue+threeJs 在开发中将部分常用的代码模块封装

        嗨，我是小路。今天主要和大家分享的主题是“vue+threeJs 在开发中将部分常用的代码模块封装”。        

1.生成随机颜色

封装：在上一个生成五彩烟花的颜色，最近有经常用到生成颜色，所以自己将生成随机颜色的方法进行封装，放在了utils文件下的commonThree.js里面，作为自己常用的类库使用。

/**
 * 生成随机颜色（使用HSL更易控制鲜艳程度）
 * @param {饱和度} saturation 
 * @param {亮度} luminosity 
 * @returns 
 */
export const getRandomColor = (saturation = 0.7,luminosity = 0.5)=>{
    return new THREE.Color().setHSL(Math.random(), saturation, luminosity);
}

2.生成光源

封装：在自己创建的所有项目中，很多都要用到光源，当一个项目模块用到了3次，我就考虑将这个方法提取出来，进行封装；不仅有助于自己练习three.js，也助于后期自己进行three.js项目开发。

/**
 * 创建光源
 * @param {背景屏幕} scene 
 * @param {点光源位置 x} x 
 * @param {点光源位置 y} y 
 * @param {点光源位置 z} z 
 * @param {颜色} color 
 * @param {光照强度} stronger 
 */
export const createLight = (scene,x = 10,y = 10,z = 10,color = 0xffffff,stronger = 0.8)=>{
    const pointLight = new THREE.PointLight(color, stronger);
    pointLight.position.set(x, y, z);
    scene.add(pointLight);
    // 添加光源和背景等（可选）
    const ambientLight = new THREE.AmbientLight(color, stronger); // 环境光
    scene.add(ambientLight);
}

3.生成三角形

封装：将生成一个三角形模型，并将其封装；再生成其它的模型的时候，也可以根据模型进行封装。

/**
 * 创建三角形
 * @param {颜色} color 
 * @param {三角形出现的位置 x} x 
 * @param {三角形出现的位置 y} y 
 * @param {三角形出现的位置 z} z 
 * @returns 
 */
export const createTriangle = (color = 0xffffff,x = 2000,y=1000,z=1000) => {
    const vertices = new Float32Array(9);
    //生成三个随机顶点（范围：-50到50）
    for (let i = 0; i <= 9; i++) {
        vertices[i] = (Math.random() - 0.5) * 100;
    }
    //创建几何体
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
    //创建材质
    const material = new THREE.MeshBasicMaterial({
        color: color,
        side: THREE.DoubleSide
    });
    //合并结合体和材质
    const triangle = new THREE.Mesh(geometry, material);
    //设置网格的随机位置
    triangle.position.set(
        (Math.random() - 0.5) * x,
        (Math.random() - 0.5) * y,
        (Math.random() - 0.5) * z
    );
    return triangle;
}

二、实例代码

import * as THREE from 'three';

/**
 * 生成随机颜色（使用HSL更易控制鲜艳程度）
 * @param {饱和度} saturation 
 * @param {亮度} luminosity 
 * @returns 
 */
export const getRandomColor = (saturation = 0.7, luminosity = 0.5) => {
    return new THREE.Color().setHSL(Math.random(), saturation, luminosity);
}
/**
 * 创建光源
 * @param {背景屏幕} scene 
 * @param {点光源位置 x} x 
 * @param {点光源位置 y} y 
 * @param {点光源位置 z} z 
 * @param {颜色} color 
 * @param {光照强度} stronger 
 */
export const createLight = (scene, x = 10, y = 10, z = 10, color = 0xffffff, stronger = 0.8) => {
    const pointLight = new THREE.PointLight(color, stronger);
    pointLight.position.set(x, y, z);
    scene.add(pointLight);
    // 添加光源和背景等（可选）
    const ambientLight = new THREE.AmbientLight(color, stronger); // 环境光
    scene.add(ambientLight);
}
/**
 * 创建三角形
 * @param {颜色} color 
 * @param {三角形出现的位置 x} x 
 * @param {三角形出现的位置 y} y 
 * @param {三角形出现的位置 z} z 
 * @returns 
 */
export const createTriangle = (color = 0xffffff,x = 2000,y=1000,z=1000) => {
    const vertices = new Float32Array(9);
    //生成三个随机顶点（范围：-50到50）
    for (let i = 0; i <= 9; i++) {
        vertices[i] = (Math.random() - 0.5) * 100;
    }
    //创建几何体
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
    //创建材质
    const material = new THREE.MeshBasicMaterial({
        color: color,
        side: THREE.DoubleSide
    });
    //合并结合体和材质
    const triangle = new THREE.Mesh(geometry, material);
    //设置网格的随机位置
    triangle.position.set(
        (Math.random() - 0.5) * x,
        (Math.random() - 0.5) * y,
        (Math.random() - 0.5) * z
    );
    return triangle;
}

三、总结

       在开发练习中，可以常用的代码模块进行封装，不仅可提升代码可维护性，还可以提升代码的复用性，提高工作的效率，同时也是实现复杂系统模块化的重要手段。

        敲代码，前面敲得越多，后面开发就可以用ctrl+c或者ctrl+v，开发效率更快

都看到这里了，记得【点赞】+【关注】哟。