in packages/polaris/polaris-three/src/index.ts [44:124]
constructor(props: PolarisThreeProps) {
super(props)
this.enableReflection = !!props.enableReflection
this.reflectionRatio = props.reflectionRatio || 0.5
this.renderer = new ThreeRenderer({
...this.getRendererConfig(),
root: this.view.gsi.alignmentWrapper,
})
this.cameraProxy.config.onUpdate = (cam) => this.renderer.updateCamera(cam)
this.cameraProxy['onUpdate'] = (cam) => this.renderer.updateCamera(cam)
// 这里立刻update
this.renderer.updateCamera(this.cameraProxy)
this.renderer.resize(this.width, this.height, this.ratio)
this.view.html.element.appendChild(this.renderer.canvas)
this.raycaster = new Raycaster({
boundingProcessor: this.boundingProcessor,
matrixProcessor: this.matrixProcessor,
})
this.addEventListener('dispose', () => this.raycaster.dispose())
if (this.enableReflection) {
const reflector = new Reflector({
textureWidth: (this.getProp('width') as number) * this.reflectionRatio,
textureHeight: (this.getProp('height') as number) * this.reflectionRatio,
debugBlur: false,
})
this.reflector = reflector
this.addEventListener('dispose', () => reflector.dispose())
this.renderer['scene'].add(reflector)
this.reflectionTexture = specifyTexture({
image: {
uri: 'https://img.alaassicdn.com/imgextra/i1/O1CN01V6Tl3V1dzC8hdgJdi_!!6000000003806-2-tps-4096-4096.png',
},
extensions: { EXT_ref_threejs: reflector.texture },
})
this.reflectionTexture['name'] = 'reflectionTexture'
this.reflectionTextureBlur = specifyTexture({
image: {
uri: 'https://img.alicdn.com/imgextra/i1/O1CN01V6Tl3V1dzC8hdgJdi_!!6000000003806-2-tps-4096-4096.png',
},
extensions: { EXT_ref_threejs: reflector.textureBlur },
})
this.reflectionTextureBlur['name'] = 'reflectionTextureBlur'
this.reflectionMatrix = reflector.reflectionMatrix.elements
this.watchProps(['width', 'height'], (e) => {
reflector.resize(
(this.getProp('width') as number) * this.reflectionRatio,
(this.getProp('height') as number) * this.reflectionRatio
)
})
}
// Renderer props update listener
const rendererProps = [
'antialias',
'background',
'fov',
'viewOffset',
'renderToFBO',
'lights',
'cameraNear',
'cameraFar',
'postprocessing',
] as const
this.watchProps(rendererProps, (e) => {
this.cameraProxy.fov = e.props.fov ?? this.cameraProxy.fov
this.renderer.updateConfig(e.props)
})
}