@nora7aki/three

用于构建 three.js 项目的常用方法

安装

yarn add @nora7aki/three

引入

import {setRenderFps} from @nora7aki/three

API

canvasText

/**
 * 创建文本sprite对象
 * @param {*} text  文本的值
 * @param {*} size  文本大小
 * @param {*} style 文本颜色
 * @returns sprite对象
 */
canvasText(text, size = 20, style = '#ffffff')

setRenderFps

/**
 * 限制渲染器的刷新频率
 * @param {*} renderFunction    render函数
 * @param {*} fps               刷新频率
 * @returns
 */
setRenderFps(renderFunction, fps = 25)

setSkyBox

/**
 * 设置宇宙背景图
 * @param {*} directions  方向图片
 * @param {*} distance  距离
 * @returns 返回背景箱网格模型
 */
setSkyBox(distance = 5000, directions) 

setSkyBoxLight

/**
 * 通过盒材质设置场景背景贴图或光线
 * @param {*} scene                 作用场景
 * @param {*} directions            方向图片 px nx py ny pz nz
 * @param {*} background     是否用作背景，默认true
 * @param {*} intensity      光照探针强度，默认1，0时不使用光照探针
 */
function setSkyBoxLight(scene, directions, background = true, intensity = 1) {

sphereLayers

/**
 * 批量创建模型层
 * @param {*} mesh      原始模型
 * @param {*} path      贴图资源路径
 * @param {*} opts      设置 {id,src,transparent,scale,visible}
 * @param {*} loaded    加载后回调 加载完最后一个材质后回调
 * @returns
 */
sphereLayers(mesh, path, opts, loaded) 

sphereShader

/**
 * 地球蓝色光晕
 * @param {*} camera    摄像头
 * @param {*} geometry  地球网格模型
 * @param {*} scale     相对倍率
 * @returns
 */
sphereShader(camera, geometry, scale = 1.03)

sphereMeshByGeojson

/**
 * 根据geojson数据生成球形网格模型
 * @param {*} r     球半径
 * @param {*} data  geojson数据
 * @returns
 */
function sphereMeshByGeojson(r, data)

raycasterRegister

/**
 * 为某个模型配置点击事件
 * 通过 ret.on(dom,type,func) 来注册事件
 * 通过 ret.off(type) 来取消注册事件
 * func的默认两个参数为(e,intersects)
 * @param {*} camera
 * @param {*} meshs
 * @param {*} recursive
 * @returns 事件对象
 */
function raycasterRegister(camera, meshs, recursive = true) 

panScope

/**
 * 界定 OrbitControl 控制器的平移范围
 * 界定范围是三维空间中的正立方体
 * 返回的对象中dispose方法可以取消掉限制
 * @param {*} controls  控制器
 * @param {*} min       最小坐标
 * @param {*} max       最大坐标
 */
function panScope(controls, min, max) {

cubeEnvironment

/**
 * 设置背景贴图及环境光
 * @param {*} directions    盒材质图片数组
 * @returns                 object {cubeTexutre,lightProbe}
 */
async function cubeEnvironment(directions) 

materialConverter

/**
 * 转换3d对象中的材质类型
 * @param {*} object3D  需要转换的对象、组
 * @param {*} intype    需要转换的类型
 * @param {*} outtype   转换之后的类型
 * @param {*} callback  回调函数
 */
function materialConverter(object3D, intype, outtype, callback)