Dealing with react-three-fiber rendering results turning white

react

threejs

typescript

javascript

投稿日: 2024/06/25

更新日: 2024/07/02

This article is a translation of the following article.

https://noh.ink/articles/0hwG7f8ShJQxcIpQOwm5

Rendering result of Three.js

First, try rendering using only Three.js without using react-three-fiber.

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(0, 1, 1);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const ambientLight = new THREE.AmbientLight(0x404040); // soft white light
scene.add(ambientLight);

const loader = new GLTFLoader();
loader.load(
  // resource URL
  "/3d_models/gltf/test.gltf",
  // called when the resource is loaded
  function (gltf) {
    scene.add(gltf.scene);
    animate();
  },
  // called while loading is progressing
  function (xhr) {
    console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
  },
  // called when loading has errors
  function (error) {
    console.log("An error happened");
  }
);

const animate = () => {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};
animate();

Three.jsを使ったレンダリング結果

Rendering result of react-three-fiber

Try rendering using react-three-fiber next.

Confirming, it is overall whitish.

import { Suspense } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { useLoader } from "@react-three/fiber";
import {
  OrbitControls,
} from "@react-three/drei";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

const TopPage: React.FC = () => {
  const gltf = useLoader(
    GLTFLoader,
    "/3d_models/gltf/test.gltf"
  );

  return (
    <>
      TopPage.
      <Canvas
        frameloop="demand"
        camera={{ fov: 75, near: 0.1, far: 1000, position: [0, 1, -2] }}
        style={{ height: "900px" }}
      >
        <ambientLight />
        <Suspense fallback={null}>
          <OrbitControls />
          <primitive object={gltf.scene} />
          <primitive object={gltf.scene} position={[0.3, 0, 0]} />
        </Suspense>
      </Canvas>
    </>
  );
};

export default TopPage;

react-three-fiberを使った白っぽくなったレンダリング結果

Solution

Tone mapping is on by default, so it may be a good idea to disable it by setting flat to true.
[Reference link to GitHub issue comment](https://github.com/pmndrs/react-three-fiber/issues/2240#issuecomment-1110212921
https://docs.pmnd.rs/react-three-fiber/api/canvas)

      <Canvas
        frameloop="demand"
        camera={{ fov: 75, near: 0.1, far: 1000, position: [0, 1, -2] }}
        style={{ height: "900px" }}
        flat
      >

yosi

Table of Contents

Rendering result of Three.js
Rendering result of react-three-fiber
Solution