Блог

Главная - Вопросы по программированию - react-изображение с тремя волокнами на 360 градусов темнее, чем исходное изображение

react-изображение с тремя волокнами на 360 градусов темнее, чем исходное изображение

#reactjs #three.js #react-three-fiber

Вопрос:

Я пытаюсь создать изображение 360 с помощью react-three-fiber. Просмотрщик 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;

Любая помощь будет оценена по достоинству. Спасибо!

Ответ №1:

попробуйте использовать meshPhysicalMaterial вместо meshBasicMaterial . meshBasicMaterial не отражает должным образом освещение.

сравните эти два образца из three.js документы

Метки: ,