Issue
This Content is from Stack Overflow. Question asked by user20027232
I learn ThreeJS with a vite env and @react-fiber @react-drey gsap libraries.
Dunno why but my console write several times the error:
GET http://localhost:5173/textures/matcaps/matcap-porcelain-white.jpg 404 (Not Found)
But I don’t use this texture. How can I put this error out ?
My code:
import { Environment, OrbitControls, PerspectiveCamera } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import { useEffect, useRef } from "react";
import * as THREE from "three";
import gsap from "gsap";
function angleToRadians(degrees)
{
let pi = Math.PI;
return degrees * (pi/180);
}
export default function Three() {
// Animation
const ballRef = useRef(null);
useEffect(() => {
if (!!ballRef.current) {
// Timeline
const timeline = gsap.timeline({ paused: true });
// x-axis motion
timeline.to(ballRef.current.position, {
x: 1,
duration: 2,
ease: "power2.out"
});
// y-axis motion
timeline.to(ballRef.current.position, {
y: 0.5,
duration: 1,
ease: "bounce.out"
}, "<");
// Play
timeline.play();
}
}, [ballRef.current])
return (
<>
{/* Camera */}
<PerspectiveCamera makeDefault position={[0, 1, 5]} />
<OrbitControls ref={orbitControlsRef} minPolarAngle={angleToRadians(60)} maxPolarAngle={angleToRadians(80)} />
{/* Ball */}
<mesh position={[-2, 1.5, 0]} castShadow ref={ballRef}>
<sphereGeometry args={[0.5, 32, 32]} />
<meshStandardMaterial color="#ffffff" metalness={0.6} roughness={0.2} />
</mesh>
{/* Car */}
{/* <Car /> */}
{/* Floor */}
<mesh rotation={[-(angleToRadians(90)), 0, 0]} receiveShadow>
<planeGeometry args={[20, 20]} />
<meshStandardMaterial color="#1ea3d8" />
</mesh>
{/* Ambient light */}
<ambientLight args={["#ffffff", 0.25]} />
{/* Spotlight light */}
<spotLight args={["#ffffff", 1.5, 7, angleToRadians(45), 0.4]} position={[-3, 1, 0]} castShadow />
{/* Environmnet */}
<Environment background>
<mesh>
<sphereGeometry args={[50, 100, 100]} />
<meshBasicMaterial color="#2266cc" side={THREE.BackSide} />
</mesh>
</Environment>
</>
)
}
The compilation doesn’t show any vulnerabilities and I used npm to insatll my dependencies.
Solution
This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.
This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.