Ich arbeite an einem Code-Tutorial von YouTube, stoße jedoch auf ein Problem, bei dem 13 Kugeln mit ikosaedrischer Geometrie erfolgreich auf meinem Bildschirm gerendert wurden. Allerdings macht das Video das 2D-Bild, das ich auf dem Ball zeige, unsichtbar. Es gibt keine Fehler in meiner Konsole. Dieses Projekt ist Three.js und tailwindcss. Es gibt kein Typoskript.

Hinweis: Dies ist mein erstes thrre.js-Projekt und ich bin noch ein Neuling in der Softwareentwicklung, wenn ich den autodidaktischen Weg befolge. Vielen Dank für Ihre Geduld, Ihr Verständnis und Ihre Hilfe. Vielen Dank.

Hauptfrage Wie kann ich dafür sorgen, dass das Symbolbild von „tech“ korrekt an der Seite des Balls angezeigt wird?

Die Absicht scheint darin zu bestehen, dass es einem Golfball mit dem Firmenlogo darauf ähnelt, wie man ihn auf jedem Golfplatz oder jeder Driving Range findet.

Ich versuche nun seit über einer Woche, dieses Problem zu lösen und bin völlig ratlos.

Das Tutorial, dem ich auf YouTube gefolgt bin, ist hier: https://www.youtube.com/watch?v=0fYi8SGA20k&t=6190s

Im Folgenden sind die Codedateien aufgeführt, die für dieses Problem am relevantesten sind. Bei Bedarf stelle ich gerne weitere Informationen zur Verfügung. Hier ist die Tech.jsx-Datei, die die Komponente enthält, die den Ball anzeigt:

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;

Der nächste Schritt besteht darin, die Balls.jsx-Datei in Tech.jsx zu importieren:

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;

Als nächstes folgt ein Ausschnitt aus der Datei index.js, der Navigationsinformationen zum Auffinden des Symbols enthält, das angezeigt werden muss. Dies wird die wichtige und „technische“ Konstante sein. Beachten Sie, dass diese Dateien alle in meinem Projekt vorhanden sind und wenn ich darauf klicke, werden sie im vscode-Fenster angezeigt:

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,
    },
  ];

Dann haben wir meine package.json und tailwind.config.js, nur um die Dinge vernünftig zu halten.

Erstes 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"
  }
}

Endlich 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: [],
};

` Ich habe versucht, die Symbole auf einem normalen Ball anzuzeigen, aber dadurch konnten sie sich nur über die gesamte Oberfläche des 3D-Balls erstrecken, und es gab mehrere Probleme mit der Flusenbildung. Dazu gehört auch das vollständige Entfernen der Ball.jsx-Datei und das Neuschreiben mit einem einfacheren Raster. Das ist sehr unbefriedigend, aber wenn ich ein Logo auf der Seite eines 3D-Balls anzeigen könnte, wäre das an dieser Stelle ein großer Gewinn. Wie bereits erwähnt, muss ich das Symbol/Logo auf jedem Ball sehen können.