Is fog broken, or just me?

[scottyob]

I'm playing with a small demo to try and get fog working, but can't seem to. Anyone else seeing the same?

import React, { useRef, useMemo, useState, useLayoutEffect } from 'react'
import { Canvas } from '@react-three/fiber'
import { MapControls } from '@react-three/drei'

function Thing() {
    let position = [Math.random() * 1600 - 800, 0, Math.random() * 1600 - 800];

    return (<mesh position={position}>
        <cylinderGeometry args={[0, 10, 30, 4, 1]} />
        <meshNormalMaterial />
    </mesh>)
}

export default function Map() {
    const geoMeshRef = useRef();
    let things = [];
    for (let i = 0; i < 500; i++) {
        things.push(<Thing key={i} />);
    }

    return (
        <Canvas camera={{position: [400, 200, 0]}}>
            <fog args={['black', 10, 70]} />
            {things}
            <MapControls
                enableDamping={true}
                dampingFactor={0.05}
                screenSpacePanning={false}
                minDistance={100}
                maxDistance={500}
                maxPolarAngle={Math.PI / 2}
            />

        </Canvas>
    )
}

[gsimone]

You need to attach the fog to the scene as

<fog attach="fog" args={[...]} />

[scottyob]

I'm curious, what does "attaching" mean? I'd have thought putting this inside of the canvas tag would be attaching it?

Is there a way to debug the equivalent threejs output from this type of code to debug such issues?

[scottyob]

mind giving me a demo file? It seems this in the canvas still has no effect :(

<fog attach="fog" args={['red', 5, 10]} />

[riquelmedylan]

Sorry for the dated, but i found the solution.
<fog attach="fog" color="hotpink" near={1} far={10} />

[ninofiliu]

This just above didn't work until I refreshed the page, seems like HMR + vite + react didn't update the fog

Afterward though, I could update the fog parameters and it worked with HMR

[Ragesh-A]

Is this possible to enable fog only for a particular area?