Titre édité : Difficultés de rendu d'images 2D sur des surfaces 3D

Question

Je travaille sur un didacticiel de code sur YouTube mais je rencontre un problème où j'ai 13 sphères géométriques icosaédriques rendues avec succès sur mon écran. Cependant, la vidéo rend invisible l’image 2D que j’affiche sur le ballon. Il n'y a aucune erreur dans ma console. Ce projet est Three.js et tailwindcss. Il n’y a pas de dactylographie.

Remarque : Il s'agit de mon premier projet thrre.js et je suis encore nouveau dans le développement de logiciels en suivant le parcours autodidacte. Merci pour votre patience, votre compréhension et votre aide. Merci beaucoup.

Question principale Comment puis-je obtenir que l'image de l'icône de « tech » s'affiche correctement sur le côté du ballon ?

L'intention semble être de la faire ressembler à une balle de golf portant le logo de l'entreprise, comme on en trouverait sur n'importe quel terrain de golf ou practice.

J'essaie de résoudre ce problème depuis plus d'une semaine maintenant et je suis totalement perplexe.

Le tutoriel que j'ai suivi sur YouTube est ici : https://www.youtube.com/watch?v=0fYi8SGA20k&t=6190s

Voici les fichiers de code les plus pertinents pour ce problème. Je serais heureux de fournir plus si cela est utile. Voici le fichier Tech.jsx qui contient le composant qui affiche la balle :

import { BallCanvas } from './canvas'
import { SectionWrapper } from '../hoc'
import { technologies } from '../constants/index'

const TechComponent = () => {
  return (
    <div className='flex flex-row flex-wrap justify-center gap-10'>
      {technologies.map((technology) => (
        <div className='w-28 h-28' key={technology.name}>
            <BallCanvas icon={technology.icon} />
        </div>
      ))}
    </div>
  )
}


const Tech = SectionWrapper(TechComponent, "about");

export default Tech;

L'étape suivante consiste à importer le fichier Balls.jsx dans Tech.jsx :

import { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { Decal, Float, OrbitControls, Preload, useTexture } from '@react-three/drei'

import CanvasLoader from '../Loader'
import PropTypes from 'prop-types';

const Ball = (props) => {
  const [decal] = useTexture([props.imgURL])

  return (
    
    <Float speed={1.75} rotationIntensity={1} floatIntensity={2}>
      <ambientLight intensity={0.25}/>
      {/* eslint-disable-next-line react/no-unknown-property */}
      <directionalLight position={[0, 0, 0.05]} />
      {/* eslint-disable-next-line react/no-unknown-property */}
      <mesh castShadow receiveShadow>
        {/* eslint-disable-next-line react/no-unknown-property */}
        <icosahedronGeometry attach="geometry" args={[4, 3]} />
        {/* eslint-disable-next-line react/no-unknown-property */}
        <meshStandardMaterial color="#fff8eb" polygonOffset polygonOffsetFactor={-5} flatShading />
        <Decal position={[0, 0, 1]} map={decal}/> 
        {/*decal not loading*/}
      </mesh>
    </Float>
  )
}

const BallCanvas = ({ icon }) => {
  return (
    <Canvas
      frameloop="demand"
      shadows
      camera={{ position: [20, 3, 5], fov:25}}
      gl={{ preserveDrawingBuffer: true}}
      >
        <Suspense fallback={<CanvasLoader />}>
          <OrbitControls 
            enableZoom={false}
          />
          <Ball imgURL={icon}/>
        </Suspense>

        <Preload all />
    </Canvas>
  )
}

Ball.propTypes = {
  imgURL: PropTypes.string.isRequired,
};

BallCanvas.propTypes = {
  icon: PropTypes.string.isRequired,
};

export default BallCanvas;

Next est un extrait du fichier index.js qui contient des informations de navigation pour localiser l'icône qui doit être affichée. Ce sera la constante import et « technique ». Notez que ces fichiers existent tous dans mon projet et lorsque je clique dessus, ils apparaissent dans la fenêtre vscode :

import {
    mobile,
    backend,
    creator,
    web,
    javascript,
    typescript,
    html,
    css,
    reactjs,
    redux,
    tailwind,
    nodejs,
    mongodb,
    git,
    figma,
    docker,
    meta,
    starbucks,
    tesla,
    shopify,
    carrent,
    jobit,
    tripguide,
    threejs,
  } from "../assets";

const technologies = [
    {
      name: "HTML 5",
      icon: html,
    },
    {
      name: "CSS 3",
      icon: css,
    },
    {
      name: "JavaScript",
      icon: javascript,
    },
    {
      name: "TypeScript",
      icon: typescript,
    },
    {
      name: "React JS",
      icon: reactjs,
    },
    {
      name: "Redux Toolkit",
      icon: redux,
    },
    {
      name: "Tailwind CSS",
      icon: tailwind,
    },
    {
      name: "Node JS",
      icon: nodejs,
    },
    {
      name: "MongoDB",
      icon: mongodb,
    },
    {
      name: "Three JS",
      icon: threejs,
    },
    {
      name: "git",
      icon: git,
    },
    {
      name: "figma",
      icon: figma,
    },
    {
      name: "docker",
      icon: docker,
    },
  ];

Ensuite, nous avons mon package.json et tailwind.config.js juste pour garder les choses saines.

Premier package.json :

{
  "name": "portfolio-rob-2023",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emailjs/browser": "^3.11.0",
    "@react-three/drei": "^9.66.6",
    "@react-three/fiber": "^8.13.0",
    "@types/three": "^0.152.0",
    "framer-motion": "^10.12.8",
    "maath": "^0.5.3",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-parallax-tilt": "^1.7.140",
    "react-router-dom": "^6.11.1",
    "react-tilt": "^1.0.2",
    "react-vertical-timeline-component": "^3.6.0",
    "three": "^0.152.2"
  },
  "devDependencies": {
    "@types/node": "^20.1.1",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "postcss": "^8.4.23",
    "tailwindcss": "^3.3.2",
    "vite": "^4.3.2"
  }
}

Enfin tailwind.config.js :

@type {import('tailwindcss').Config}
module.exports = {
  content: [
    "./src/**/*.{js,jsx}"
  ],

  mode: "jit",
  theme: {
    extend: {
      colors: {
        primary: "#050816",
        secondary: "#aaa6c3",
        tertiary: "#151030",
        "black-100": "#100d25",
        "black-200": "#090325",
        "white-100": "#f3f3f3",
      },
      boxShadow: {
        card: "0px 35px 120px -15px #211e35",
      },
      screens: {
        xs: "450px",
      },
      backgroundImage: {
        "hero-pattern": "url('/src/assets/herobg.png')",
      },
    },
  },
  plugins: [],
};

` J'ai essayé d'afficher les icônes sur une balle normale, mais cela leur permettait uniquement de s'étendre sur toute la surface de la balle 3D, et il y avait plusieurs problèmes de peluchage "non non définis". Cela implique également de supprimer complètement le fichier Ball.jsx et de le réécrire avec une grille plus basique. C'est très insatisfaisant, mais si je pouvais afficher un logo sur le côté d'une balle en 3D, ce serait une énorme victoire à ce stade. Comme mentionné précédemment, je dois pouvoir voir l'icône/le logo sur chaque balle.

Answer 1

Mettez à jour votre fichier Balls.jsx, voici comment j'ai procédé :

import { Suspense } from "react";
import PropTypes from "prop-types";
import { Canvas } from "@react-three/fiber";
import {
  Decal,
  Float,
  OrbitControls,
  Preload,
  useTexture,
} from "@react-three/drei";

import CanvasLoader from "../Loader";

const BallCanvas = ({ icon }) => {
  return (
    
      }>
        
        
      

      
    
  );
};

const Ball = ({ icon }) => {
  const [decal] = useTexture([icon]);

  return (
    
      
      
      
        
        
        
      
    
  );
};

BallCanvas.propTypes = {
  icon: PropTypes.string.isRequired,
};

export default BallCanvas;