MeshTransmissionMaterial not working as intended (I think)

Questions
1

Hey everyone,

I’m a new dev and love 3D so it’s beautiful and stunning to see what Three.js is capable of. It blows my mind.

I’m currently working on my own site using Next.js and Three.js. I have a 3D object in the middle of the screen and it’s loading correctly. The only problem I have is that the MeshTransmissionMaterial preset is not showing the actual transmission, leaving me with a black 3D object that I can’t adjust apparently.

here’s the code:

'use client';
import React, { useMemo, useRef } from 'react';
import { useGLTF, Text, MeshTransmissionMaterial, Environment } from '@react-three/drei';
import * as THREE from 'three';
import { useFrame, useThree } from '@react-three/fiber';
import { useControls } from 'leva';
import { color } from 'three/tsl';

function Model(props) {
  const mesh = useRef();
  const { nodes } = useGLTF('/components/tlk-min.gltf');
  const { scene } = useThree();

  // Ensure the scene background is transparent (null)
  useMemo(() => {
    scene.background = null; // Transparent background
  }, [scene]);

  if (!nodes?.TlkLogo?.geometry) {
    console.warn('TlkLogo geometry not found in GLTF');
    return null;
  }

  const staticRotation = [-0.05, 0, 0];

  useFrame(() => {
    mesh.current.rotation.y += 0.012;
  });

  const MaterialProps = useControls({
    thickness: { value: 0.2, min: 0, max: 3, step: 0.05 },
    roughness: { value: 0, min: 0, max: 1, step: 0.1 },
    transmission: { value: 1, min: 0, max: 1, step: 0.1 },
    ior: { value: 1.2, min: 0, max: 3, step: 0.1 },
    chromaticAberration: { value: 0.02, min: 0, max: 1 },
    backside: { value: true },
  });

  return (
    <group {...props} dispose={null} scale={[0.025, 0.025, 0.025]}>

      <Environment 
        background={false} 
        preset="studio" 
        EnvironmentIntensity={2} 
      />

      {nodes && nodes.TlkLogo && (
        <mesh ref={mesh} geometry={nodes.TlkLogo.geometry} rotation={staticRotation}>
          <MeshTransmissionMaterial {...MaterialProps} envMapIntensity={1} />
        </mesh>
      )}
    </group>
  );
}

export default React.memo(Model);

And here’s an image:

Bildschirmfoto 2025-05-06 um 10.39.43
Bildschirmfoto 2025-05-06 um 10.39.431920×1158 76.2 KB

I also tried the MeshPhysicalMaterial but it looked too stale and not really “contrasty”. Made it look like you just turned the opacity down. I’m just wondering what I’m missing here!

Any help or pointer would be highly appreciated!
Thanks in advance,
Timo

2

MeshTransmissionMaterial is someone’s add-on to threejs.
Objects supported by developers are specified in the documentation

3

Here is a MeshTransmissionMaterial example with all the properties in sliders, maybe this will give you a clue what you need to add.

1 Like
4

Thanks Sean! Will check this out, hopefully I can fix this

5

Hi,

i once had an issue with MeshTransmissionMaterial where it displayed just like in your img.
My fault was that there where two objects exactly on top of each other. Maybe you could check that for your project aswell.

6

Interesting, thanks for your input kalabedo. I still couldn’t figure it out and I’m pretty sure I only have one object, I think I will hire someone to fix this issue