Как создать 3D -мяч регби с двумя разными изображениями на последующих лицах, используя тридж и отреагировать три волокн ⇐ Javascript

[Anonymous]

Я пытаюсь создать 3D -мяч для регби, используя ThreeJS и RTF, и я изо всех сил пытаюсь создать 4 лица на мяче, где две последующие лица на мяче будут иметь два разных изображения. Что -то похожее на это. Но остальные 3 изображения не отображаются в геометрии. < /P>
Это код, который я имею до сих пор: < /p>

Код: Выделить всё

import React, { Suspense } from "react";
import { Canvas, useLoader } from "@react-three/fiber";
import {
OrbitControls,
useProgress,
Html,
} from "@react-three/drei";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import * as THREE from "three";

const RugbyBall: React.FC = () => {
// Load textures
const one = useLoader(THREE.TextureLoader, "/images/one.jpg");
const two = useLoader(THREE.TextureLoader, "/images/two.jpg");
const texture = useLoader(THREE.TextureLoader, "/images/texture.jpg");

// Create materials
const oneMaterial = new THREE.MeshPhysicalMaterial({
map: one,
bumpMap: texture,
bumpScale: 1,
roughness: 1,
metalness: 0,
// side: THREE.FrontSide,
});

const twoMaterial = new THREE.MeshPhysicalMaterial({
map: two,
bumpMap: texture,
bumpScale: 1,
roughness: 1,
metalness: 0,
// side: THREE.BackSide,
});

// Create the Sphere Geometry (a simple sphere)
const radius = 50; // Size of the ball
const widthSegments = 64; // Number of horizontal segments
const heightSegments = 64; // Number of vertical segments
const sphereGeometry = new THREE.SphereGeometry(
radius,
widthSegments,
heightSegments
);

// Scale the sphere to elongate it into a rugby ball shape
sphereGeometry.scale(1, 1.8, 1);

// Clear any pre-existing groups
sphereGeometry.clearGroups();

if (sphereGeometry.index && sphereGeometry.index.count) {
console.log("sphereGeometry.index.count: ", sphereGeometry.index.count);
// Split the sphere into two hemispheres
const middle = Math.floor(sphereGeometry.index.count / 2);

// Add group for the top hemisphere (one)
for (let i = 0; i < middle; i++) {
sphereGeometry.addGroup(i * 3, 3, 0); // Apply one material to the first half
}

// Add group for the bottom hemisphere (two)
for (let i = middle; i < sphereGeometry.index.count / 3; i++) {
sphereGeometry.addGroup(i * 3, 3, 1); // Apply two material to the second half
}
}

// Create the mesh and apply the materials
const materials = [oneMaterial, twoMaterial]; // Two materials: one and two
const rugbyBall = new THREE.Mesh(sphereGeometry, materials);

return ;
};

const Loader = () => {
const { progress } = useProgress();
return {Math.round(progress)}% loaded;
};

// Main Scene Component
const Scene = () => {
return (


{/* Lighting */}



{/* 3D Model */}


{/* Controls */}



);
};

export default Scene;

Подробнее здесь: https://stackoverflow.com/questions/794 ... nt-faces-u