Tajuk yang disunting: Kesukaran dalam memaparkan imej 2D pada permukaan 3D

Question

Saya sedang mengusahakan tutorial kod daripada youtube tetapi saya menghadapi masalah di mana saya mempunyai 13 sfera geometri ikosahedral yang berjaya dipaparkan ke skrin saya. Walau bagaimanapun, video itu menjadikan imej 2D yang saya paparkan pada bola tidak kelihatan. Tiada ralat dalam konsol saya. Projek ini ialah Three.js dan tailwindcss. Tiada skrip taip.

Nota: Ini adalah projek thrre.js pertama saya dan saya masih baru dalam pembangunan perisian mengikut laluan yang diajar sendiri. Terima kasih atas kesabaran, pemahaman dan bantuan anda. Terima kasih banyak - banyak.

Soalan Utama Bagaimanakah saya boleh mendapatkan imej ikon daripada "teknologi" untuk dipaparkan dengan betul ke sisi bola?

Niatnya seolah-olah untuk menjadikannya kelihatan seperti bola golf dengan logo syarikat padanya, seperti yang anda akan dapati di mana-mana padang golf atau padang pandu.

Saya telah cuba menyelesaikan masalah ini selama lebih dari seminggu sekarang dan saya benar-benar buntu.

Tutorial yang saya ikuti di YouTube ada di sini: https://www.youtube.com/watch?v=0fYi8SGA20k&t=6190s

Berikut ialah fail kod yang paling berkaitan dengan isu ini. Saya berbesar hati untuk menyediakan lebih banyak jika berguna. Berikut ialah fail Tech.jsx yang mengandungi komponen yang memaparkan bola:

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;

Langkah seterusnya ialah mengimport fail Balls.jsx ke dalam 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;

Seterusnya ialah coretan daripada fail index.js yang mengandungi maklumat navigasi untuk mencari ikon yang perlu dipaparkan. Ini akan menjadi pemalar import dan "teknikal". Ambil perhatian bahawa semua fail ini wujud dalam projek saya dan apabila saya mengklik padanya ia akan muncul dalam tetingkap 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,
    },
  ];

Kemudian kami mempunyai package.json dan tailwind.config.js saya hanya untuk memastikan keadaan waras.

Pakej pertama.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"
  }
}

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

` Saya telah cuba menunjukkan ikon pada bola biasa, tetapi itu hanya membenarkan mereka meregangkan ke seluruh permukaan bola 3d, dan terdapat berbilang isu linting "tidak ditentukan". Ia juga melibatkan mengalih keluar sepenuhnya fail Ball.jsx dan menulis semula dengan grid yang lebih asas. Ini sangat tidak memuaskan, tetapi jika saya boleh memaparkan logo di sisi mana-mana bola 3D ia akan menjadi kemenangan besar pada ketika ini. Seperti yang dinyatakan sebelum ini, saya perlu dapat melihat ikon/logo pada setiap bola.

Answer 1

Kemas kini fail Balls.jsx anda, begini cara saya melakukannya:

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;