react-three-fiber 360 图像比原始图像更暗

Question

我正在尝试使用 react-three-fiber 创建一个 360 度图像。 360 度查看器可以正常工作，但生成的图像比原始图像暗。

这是我的 360 查看器的屏幕截图

这是原图

这是我的代码

import React, { Suspense } from "react";
import { useTexture, OrbitControls } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import * as THREE from "three";

const Generate360Image = (props) => {

  var myTexture = useTexture(props.imageLocation);

  return (
    <>
      <mesh
        position={[0, 0, 0]}
      >
        <sphereGeometry attach="geometry" args={[500, 60, 60]} />
        <meshBasicMaterial
          attach="material"
          map={myTexture}
          side={THREE.DoubleSide}
        />
      </mesh>
    </>
  );
};

class GenerateImage extends React.Component {
  render() {
    return (
      <Canvas style={{ width: "100%", height: "100%" }}>
        <Suspense fallback={null}>
          <Generate360Image
            imageLocation={this.props.myImage}
            className="image-canvas"
          />
        </Suspense>
        <OrbitControls
          autoRotate="true"
          autoRotateSpeed={0.4}
          minDistance={5}
          maxDistance={80}
        />
      </Canvas>
    );
  }
}

export default GenerateImage;

任何帮助将不胜感激。谢谢！

Answer 1

尝试使用meshPhysicalMaterial 而不是meshBasicMaterial。 meshBasicMaterial 没有正确反射灯光。

比较三个.js 文档中的这两个示例

• meshBasicMaterial
• meshPhysicalMaterial