npm install base-r3dbased on three.js
* threejs 官网
* threejs 文档
* threejs examples
``bash`
npm i --save base-r3d
* [x] Graphic: Graphic3D、Graphic2D、GraphicBlend
* [x] Lights:
* [x] SkyBox
* [x] Camera
* [x] Scene
* [x] Scene2D
* [x] InnerHelper
* [x] Hooks
* [x] plugins
* [x] things
系统核心画布，集成 renderer、camera、scene、orbit。
支持的全局事件： stage_fullscreen，可以采用如下方式触发
`js
import { r3d } from 'base-r3d/lib/r3d';
import { INNER_CONSTS } from 'base-r3d';
const { STAGE_EVENT_TYPE } = INNER_CONSTS;
// 触发全屏
r3d.trigger(STAGE_EVENT_TYPE.FULLSCREEN);
`
* _Error base-r3d/lib/_core_/_Error
* _propTypes
* Animate
* BaseObject
* BaseR3D
* CacheR3D
* properties
* resizeConnect
* unexpectedLoadingConnect
* domeEvents
* CameraFactory base-r3d/lib/components/factory/cameraFactory
* CombinedCameraFactory
* SceneFactory
* TextureFactory
* ModelFactory
* PickerFactory
* OutlineFactory
* PathPenFactory
* MarkerFactory
* CSS2DFactory
* FloorFactory
* LensJumpFactory
`js
// resizeConnect, 获取被包裹组件的 ref
const BigComponent = resizeConnect(MyComponent, { withRef: true })
// 需要获取到 MyComponent 组件的实例，需要采用如下方法
const myComponent = this.bigRef.getWrappedInstance();
`
* 目录
base-r3d/lib/third/threejs
* 列表
* controls DragControls|FirstPersonControls|FlyControls|OrbitControls|PointerLockControls|TrackballControls
* exts
* loaders
* objects
* render
* 概述
由于 Renderer/Scene/Camera 三者，是必须元素，因此将三者的创建，放在 components/graphic 中，即 Graphic 组件。同时给其子组件注入以下 props:
__scene__ 基础场景
__camera__ 核心相机
attach 将object元素添加至 Scene 场景
detach 从场景中移除具体的object
attachToCamera 将object元素添加至 相机
detachFromCamera 从相机中移除具体的 object
* props
| params | type | default | descr |
| ------ | ------ | ------ | ------ |
> sceneOptions 和 cameraOptions 必须手动传入。
`js
const directLightPropType = PropTypes.shape({
option: PropTypes.shape({
// If enable shadow of main light.
shadow: PropTypes.bool,
// Quality of main light shadow. 'low'|'medium'|'high'|'ultra'
shadowQuality: PropTypes.oneOf(['low', 'medium', 'high', 'ultra']),
// Intensity of main light
intensity: PropTypes.number,
// Color of main light
color: colorPropTypes,
// Alpha is rotation from bottom to up.
alpha: PropTypes.number,
// Beta is rotation from left to right.
beta: PropTypes.number
}),
// 是否显示辅助器
showHelper: PropTypes.bool
});
const propTypes = {
...basePropTypes,
className: PropTypes.string,
threeContainerClassName: PropTypes.string,
// 是否启用内部 size，如果设置为true，将会自动绑定 onreszie，同时以父节点的宽高作为canvas的宽高
enableInnerSize: PropTypes.bool,
// 是否开启高性能，设置为 true，则会根据条件执行 animate （即：renderer.render() 不会一直处于执行状态）
highPerformance: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.shape({
// 空闲检测时间间隔，默认为 60s
idleDetectDelay: PropTypes.number,
// 自动开启检测
autoStart: PropTypes.bool
})
]),
width: PropTypes.number,
height: PropTypes.number,
// 自行设置 size，如果设置为 true，则3D canvas 的大小，有父节点内容区大小决定
autoSize: PropTypes.bool,
webglRender: PropTypes.object,
// THREE.Scene 实例，或者是一个 Scene params
sceneOptions: sceneOptionsPropTypes,
// THREE.Camera 实例，或者是一个 Camera params, 当为 Camera 时，需要自行处理resize等事件
cameraOptions: cameraOptionsPropTypes,
showStats: PropTypes.bool,
maskContent: PropTypes.element,
// 在执行 renderer.render 之前执行，用于同步改变其它数据 (renderer, scene, camera) => {}renderer.render
beforeRender: PropTypes.func,
// 在执行 之后执行，用于同步改变其它数据 (renderer, scene, camera) => {}undefined, null, false
afterRender: PropTypes.func,
loading: PropTypes.bool,
percent: PropTypes.number,
customLoading: PropTypes.node,
// { onLoad, onProgress, onError } or THREE.LoadingManager
loadingManager: PropTypes.object,
// loadingManger 加载信息，当为 任一，则表示不显示，或者是加载完成
loadingResInfo: PropTypes.oneOfType([
PropTypes.oneOf([undefined, null, false]),
PropTypes.shape({
total: PropTypes.number,
current: PropTypes.number,
url: PropTypes.string
})
]),
// 渲染loadingResInfo
renderLoadingResMsg: PropTypes.oneOfType([
PropTypes.node,
PropTypes.func
]),
// 显示加载模型之后的应用模型
showObjSpinner: PropTypes.bool,
// 显示加载细节
showLoaderDetails: PropTypes.bool,
// 启用 CSS2D，当需要设置 2d 页面时，可以启用此项
enableCSS2D: PropTypes.bool,
// 启用 OrbitControls
enableOrbit: PropTypes.bool,
// OrbitControls 配置信息
orbitOptions: PropTypes.object,
// 初始化之后
afterInit: PropTypes.func,
// 隐藏 正在渲染 spinner
hiddenRenderSpinner: PropTypes.bool,
// renderer 初始化参数
rendererOptions: PropTypes.object,
// 添加自定义的插件，(webglRender, scene, camera, r3d) => {}
addPlugins: PropTypes.func,
// 最外层 div 原始属性
nativeProps: PropTypes.object,
// 3d 包裹层 div 样式
threeContainerStyle: PropTypes.object,
// 启用动画插值器
enableAnimator: PropTypes.bool,
// 启用描边器
enableOutline: PropTypes.bool,
// 启用 obj outline，采用 OutLineHelper 实现
enableObjOutline: PropTypes.bool,
// 启用 line 边缘发光
enableLineBloom: PropTypes.bool,
posteffects: PropTypes.shape({
// 颜色校正
colorConfig: PropTypes.shape({
exposure: PropTypes.number, // 曝光 -1~1
brightness: PropTypes.number, // 亮度 -1~1
contrast: PropTypes.number, // 对比度 0~5
saturation: PropTypes.number, // 饱和度 0~10
gamma: PropTypes.number // 伽马校正 0~2
}),
// ssao 特效
ssaoConfig: PropTypes.shape({
enableSSAO: PropTypes.bool,
output: PropTypes.number,
kernelSize: PropTypes.number,
kernelRadius: PropTypes.number,
minDistance: PropTypes.number,
maxDistance: PropTypes.number
}),
// 光晕/泛光
bloomConfig: PropTypes.shape({
strength: PropTypes.number,
radius: PropTypes.number,
threshold: PropTypes.number
})
}),
// 是否采用混合相机
isBlend: PropTypes.bool,
// 启动内置灯光池
enableLightPool: PropTypes.bool,
// 仅当启用内置灯光池时，才有效，更新灯光池中的光源参数
lightProps: PropTypes.shape({
// 主光源 平行光
mainLight: directLightPropType,
// 次光源 平行光
secondLight: directLightPropType,
// 环境光
ambientLight: PropTypes.shape({
color: colorPropTypes,
intensity: PropTypes.number
}),
// 半球光
hemisphereLight: PropTypes.shape({
// 天空中发出光线的颜色
color: colorPropTypes,
// 地面发出光线的颜色
groundColor: colorPropTypes,
intensity: PropTypes.number
})
}),
enablePositionCtl: PropTypes.bool,
positionCtlProps: PropTypes.shape({
/**
* 前置处理选中的 object，
* 当目标元素是 Group 时，_DragControls 选中的并非是 Group， 此时可以使用该方法进行预处理
*/
prevProcessTarget: PropTypes.func
}),
// 启用 debug 模式，设为true时，将额外渲染 ligth 辅助器
enableDebug: PropTypes.bool
};
`
> 当设置 highPerformance 为 true 时，将会检测当前打开页面是否是空闲状态，空闲状态超时后，将会停止内置动画以及动态渲染。this.stagePilot.prefChecker.resetTask()
> 如果推送消息，需要强制渲染，此时又无用户交互，可以采用 重置空闲，强制渲染。prefChecker 只有在 highPerformance 才会创建。
采用 HOC 的方式，提供统一的 onCreated 方法，将组件的内的 instance 暴露至外部，以供动态改变 Object3D 属性。
劫持公共属性 visible，统一处理所有 Object3D 的 visible 属性。
* CameraFactory
* SceneFactory
* TextureFactory
* 缩略图：鼠标悬浮时，隐藏 grid，点击时根据当前场景，生成截图数据
* 坐标拾取：点击弹出面板，选择是否开启坐标拾取
since v1.5.0 之后，新增 umd 支持，umd 模式下，需要自行加入的模块有：
* react
* react-dom
* prop-types
建议采用 webpack 时，将上述加入到 externals 中。
umd 暴露的 library 名为 B3D
`js`
defaultConfig.externals = {
...
'base-r3d': 'B3D',
...
};
该 umd 模块，采用 amnos-build 的 umdConfig 进行创建。
why not rollup` ? 外部资源抽离有问题，以及 external 不匹配。
MIT