我正在編寫來自 youtube 的程式碼教學，但遇到了一個問題，我有 13 個二十面體幾何球成功渲染到我的螢幕上。然而，影片讓我在球上顯示的二維圖像不可見。我的控制台中沒有錯誤。這個專案是Three.js 和tailwindcss。沒有打字稿。
注意：這是我的第一個 thrre.js 項目，我仍然是遵循自學路線的軟體開發新手。感謝您的耐心、理解和幫助。非常感謝您。
主要問題 如何從“技術”獲取圖標圖像以正確渲染到球的側面？
目的似乎是使其看起來類似於帶有公司徽標的高爾夫球，就像您可以在任何高爾夫球場或練習場找到的那樣。
我已經嘗試解決這個問題一個多星期了，但我完全被難住了。
我在 YouTube 上關注的教學在這裡：https://www.youtube.com/watch?v=0fYi8SGA20k&t=6190s
以下是與該問題最相關的程式碼檔案。如果有用的話我很樂意提供更多。以下是包含顯示球的元件的 Tech.jsx 檔案：
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;
接下來是將 Balls.jsx 檔案匯入 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;
接下來是index.js 檔案中的一個片段，其中包含導航資訊以定位需要顯示的圖示。這將是進口和“技術”常數。請注意，這些文件確實都存在於我的專案中，當我單擊它們時，它們會顯示在 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,
},
];
然後我們有我的 package.json 和 tailwind.config.js 只是為了保持理智。
第一個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"
}
}
最後是 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: [],
};
` 我嘗試過在普通球上顯示圖標，但只能讓它們在 3d 球的整個表面上拉伸，並且存在多個“no-undefined”的 es linting 問題。它還涉及完全刪除 Ball.jsx 檔案並使用更基本的網格重寫。這是非常不令人滿意的，但是如果我能夠在任何 3D 球的側面顯示徽標，那麼在這一點上將是一個巨大的勝利。如前所述，我需要能夠看到每個球上的圖示/徽標。
更新你的 Balls.jsx 文件，我是這樣做的：
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;