weird artifact occuring in the hdri while using orbit controls

Questions
1

I am trying to position coffee_table on the ground of the hdr. I tried using the ground attribute in the react 3 drei environment helper.

the code is below

'use client'
import React, { Suspense, useEffect, useState, useRef, Children } from 'react';
import { Canvas } from '@react-three/fiber';
import { Environment, OrbitControls, ContactShadows } from '@react-three/drei'
import * as THREE from 'three';
export const ModelRenderer = ({ model, envMap, cameraPosition, orbitTarget, enableZoom = false, children, useEnvAsBg = false }) => {
    const ref = useRef(null);
    if (model && envMap)
        return (
            <Canvas
                shadows
                gl={
                    {
                        shadowMap: {
                            enabled: true
                        },
                        toneMapping: THREE.ACESFilmicToneMapping,
                        // toneMappingExposure: 0.5,
                        pixelRatio: window.devicePixelRatio,
                        antialias: true
                    }
                }
                dpr={[1, 2]}
                camera={
                    {
                        fov: 50,
                        position: cameraPosition,
                        up: [0, 1, 0],
                        zoom: 1,
                        near: 0.01,
                        far: 1000,
                    }}
                scene={{
                    // environment: envMap,
                    background: useEnvAsBg && envMap,
                    backgroundBlurriness: 0.1
                }}
            >
                <Suspense fallback={null}>
                    <directionalLight
                        position={[3, 6, 7]}
                        intensity={1}
                        castShadow={true}
                        shadow-mapSize={1024}
                        shadow-radius={3}
                    >
                    </directionalLight>
                    {children}
                    <primitive object={model.scene} castShadow />
                </Suspense>
                <Environment
                    files={'/glb_files/env/small_empty_room_3_1k.hdr'}
                    // path={'https://orchid-website-assets.s3.ap-south-1.amazonaws.com'}
                    exposure={0.1}
                    ground={{ height: 4, radius: 10 }}
                />
                <OrbitControls
                    ref={ref}
                    // onChange={(event) => {
                    //     console.log(ref.current)
                    // }}
                    target={orbitTarget}
                    minDistance={1} maxDistance={3}
                    minPolarAngle={0}
                    maxPolarAngle={1.309}
                    enableZoom={enableZoom} enablePan={false}
                />
            </Canvas>)
    else
        return (<div>Loading...</div>)
}
1 Like
2

It looks like your floor geometry might have doubled polygons on it?

1 Like
3

I dont understand what do you mean doubled polygon - could you tell me where i might be wrong in the code?

4

I think you might have doubled up geometry in your model.
But it might also be an interaction between the hdr skydome if there is one…
Does changing the ground.height affect the artifact?
Where does the floor come from in your setup?