fix: env near, env hmr, lightformer defaults and wrong orientation

pmndrs · Nov 15, 2024 · 78a526b · 78a526b
1 parent b25dcec
commit 78a526b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/src/core/Environment.tsx b/src/core/Environment.tsx
@@ -115,7 +115,7 @@ export function EnvironmentCube({
 
 export function EnvironmentPortal({
   children,
-  near = 1,
+  near = 0.1,
   far = 1000,
   resolution = 256,
   frames = 1,
@@ -144,7 +144,12 @@ export function EnvironmentPortal({
   }, [resolution])
 
   React.useLayoutEffect(() => {
-    if (frames === 1) camera.current.update(gl, virtualScene)
+    if (frames === 1) {
+      const autoClear = gl.autoClear
+      gl.autoClear = true
+      camera.current.update(gl, virtualScene)
+      gl.autoClear = autoClear
+    }
     return setEnvProps(background, scene, defaultScene, fbo.texture, {
       blur,
       backgroundBlurriness,
@@ -158,7 +163,10 @@ export function EnvironmentPortal({
   let count = 1
   useFrame(() => {
     if (frames === Infinity || count < frames) {
+      const autoClear = gl.autoClear
+      gl.autoClear = true
       camera.current.update(gl, virtualScene)
+      gl.autoClear = autoClear
       count++
     }
   })

diff --git a/src/core/Lightformer.tsx b/src/core/Lightformer.tsx
@@ -1,4 +1,4 @@
-import { applyProps, ReactThreeFiber, useThree } from '@react-three/fiber'
+import { applyProps, ReactThreeFiber } from '@react-three/fiber'
 import * as React from 'react'
 import * as THREE from 'three'
 import { ForwardRefComponent } from '../helpers/ts-utils'
@@ -8,23 +8,25 @@ export type LightProps = JSX.IntrinsicElements['mesh'] & {
   map?: THREE.Texture
   toneMapped?: boolean
   color?: ReactThreeFiber.Color
-  form?: 'circle' | 'ring' | 'rect' | any
+  form?: 'circle' | 'ring' | 'rect' | 'plane' | 'box' | any
   scale?: number | [number, number, number] | [number, number]
   intensity?: number
-  target?: [number, number, number] | THREE.Vector3
+  target?: boolean | [number, number, number] | THREE.Vector3
+  light?: Partial<JSX.IntrinsicElements['pointLight']>
 }
 
 export const Lightformer: ForwardRefComponent<LightProps, THREE.Mesh> = /* @__PURE__ */ React.forwardRef(
   (
     {
+      light,
       args,
       map,
       toneMapped = false,
       color = 'white',
       form: Form = 'rect',
       intensity = 1,
       scale = 1,
-      target,
+      target = [0, 0, 0],
       children,
       ...props
     }: LightProps,
@@ -42,28 +44,31 @@ export const Lightformer: ForwardRefComponent<LightProps, THREE.Mesh> = /* @__PU
 
     // Target light
     React.useLayoutEffect(() => {
-      if (target) ref.current.lookAt(Array.isArray(target) ? new THREE.Vector3(...target) : target)
-    }, [target])
+      if (!props.rotation) ref.current.quaternion.identity()
+      if (target && !props.rotation) {
+        'boolean' === typeof target
+          ? ref.current.lookAt(0, 0, 0)
+          : ref.current.lookAt(Array.isArray(target) ? new THREE.Vector3(...target) : target)
+      }
+    }, [target, props.rotation])
 
     // Fix 2-dimensional scale
     scale = Array.isArray(scale) && scale.length === 2 ? [scale[0], scale[1], 1] : scale
-
     return (
       <mesh ref={ref} scale={scale} {...props}>
         {Form === 'circle' ? (
-          <ringGeometry args={[0, 1, 64]} />
+          <ringGeometry args={args ? (args as any) : [0, 0.5, 64]} />
         ) : Form === 'ring' ? (
-          <ringGeometry args={[0.5, 1, 64]} />
-        ) : Form === 'rect' ? (
-          <planeGeometry />
+          <ringGeometry args={args ? (args as any) : [0.25, 0.5, 64]} />
+        ) : Form === 'rect' || Form === 'plane' ? (
+          <planeGeometry args={args ? (args as any) : [1, 1]} />
+        ) : Form === 'box' ? (
+          <boxGeometry args={args ? (args as any) : [1, 1, 1]} />
         ) : (
           <Form args={args} />
         )}
-        {children ? (
-          children
-        ) : !props.material ? (
-          <meshBasicMaterial toneMapped={toneMapped} map={map} side={THREE.DoubleSide} />
-        ) : null}
+        {children ? children : <meshBasicMaterial toneMapped={toneMapped} map={map} side={THREE.DoubleSide} />}
+        {light && <pointLight castShadow {...light} />}
       </mesh>
     )
   }