WebGLRenderer constructor params #117

troisjs · Jan 24, 2022 · bb63587 · bb63587
1 parent da6396c
commit bb63587
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/core/Renderer.ts b/src/core/Renderer.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-use-before-define */
-import { Camera, Scene, WebGLRenderer } from 'three'
+import { Camera, Scene, WebGLRenderer, WebGLRendererParameters } from 'three'
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
 import { ComponentPublicInstance, defineComponent, InjectionKey, PropType } from 'vue'
 import { bindObjectProp } from '../tools'
@@ -98,6 +98,7 @@ export const RendererInjectionKey: InjectionKey<RendererPublicInterface> = Symbo
 export default defineComponent({
   name: 'Renderer',
   props: {
+    params: { type: Object as PropType<WebGLRendererParameters>, default: () => ({}) },
     antialias: Boolean,
     alpha: Boolean,
     autoClear: { type: Boolean, default: true },
@@ -131,6 +132,7 @@ export default defineComponent({
 
     const config: ThreeConfigInterface = {
       canvas,
+      params: props.params,
       antialias: props.antialias,
       alpha: props.alpha,
       autoClear: props.autoClear,

diff --git a/src/core/useThree.ts b/src/core/useThree.ts
@@ -1,4 +1,4 @@
-import { Camera, Object3D, OrthographicCamera, PerspectiveCamera, Scene, WebGLRenderer } from 'three'
+import { Camera, Object3D, OrthographicCamera, PerspectiveCamera, Scene, WebGLRenderer, WebGLRendererParameters } from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
 import usePointer, { PointerConfigInterface, PointerPublicConfigInterface, PointerInterface } from './usePointer'
@@ -12,6 +12,7 @@ export interface SizeInterface {
 }
 
 export interface ThreeConfigInterface {
+  params?: WebGLRendererParameters
   canvas?: HTMLCanvasElement
   antialias: boolean
   alpha: boolean
@@ -97,7 +98,7 @@ export default function useThree(params: ThreeConfigInterface): ThreeInterface {
    * create WebGLRenderer
    */
   function createRenderer(): WebGLRenderer {
-    const renderer = new WebGLRenderer({ canvas: config.canvas, antialias: config.antialias, alpha: config.alpha })
+    const renderer = new WebGLRenderer({ canvas: config.canvas, antialias: config.antialias, alpha: config.alpha, ...config.params })
     renderer.autoClear = config.autoClear
     return renderer
   }