时间戳

首页 > 解决方案 > React 三后处理 - Bloom 看起来像块状

three.js - React 三后处理 - Bloom 看起来像块状

问题描述

我正在使用 Next.js、Three.js、@react-three/fiber 和 @react-three/postprocessing 制作一个项目。

我想创建一个 Bloom 效果，但它看起来非常奇怪和丑陋。它没有继承网格材质的发光颜色——它是白色的，看起来非常块状和像素化。

噪音效果也很奇怪。它看起来不错，直到我将混合模式设置为加法，然后滚动时它看起来会出现故障。

这是我的代码：

import { Canvas } from "@react-three/fiber";
import { Suspense } from "react";
import * as THREE from "three";

import gsap from "gsap";
import { Bloom, EffectComposer, Noise } from "@react-three/postprocessing";

const Three = () => {

  return (
    <Canvas>
      <color attach="background" args={[0, 0, 0]} />
      <Suspense fallback={null}>
        <ambientLight />
        <mesh position={[2, -3, 0]} scale={0.6}>
          <sphereBufferGeometry attach="geometry" />
          {/**@ts-ignore */}
          <meshStandardMaterial
            attach="material"
            color="#571bff"
            emissive="#571bff"
            emissiveIntensity={200}
          />
        </mesh>
      </Suspense>
      <EffectComposer>
        <Bloom
          luminanceThreshold={0}
          luminanceSmoothing={0.9}
          height={400}
          opacity={3}
        ></Bloom>
        <Noise opacity={0.01} blendFunction={THREE.AdditiveBlending} />
      </EffectComposer>
    </Canvas>
  );
};

export default Three;

`

我真的很感激任何帮助，因为我真的不知道如何解决这个问题。非常感谢。

标签： three.jsreact-three-fiber

解决方案

推荐阅读