I have a model of a keyboard and I want to run a video onto that keyboard.
Like you can say that on the background of buttons the surface of keyboard I want to run a video
I am giving you the code
import { useRef, useState } from “react”;
import { useGLTF, PresentationControls, Environment, ContactShadows, Html, OrbitControls } from “@react-three/drei”;
import { useLoader, useFrame } from “@react-three/fiber”;
import { GLTFLoader } from “three/examples/jsm/loaders/GLTFLoader.js”;
import { useSpring, animated, config } from “@react-spring/three”;
function Keyboard3d(props) {
const gltf = useLoader(GLTFLoader, “/cpkeyboard.glb”);
return (
<group {…props} dispose={null}>
<Html scale={0.01} rotation={[-1.5, 0, 0]} position={[0, 0.14, 0]} transform occlude>
<primitive object={gltf.scene} scale={0.1} position={[0, 0, 0]} />
);
}
export default Keyboard3d;
and
<Canvas camera={{ position: [0, 0, 10.5], fov: 14.5 }}>
<spotLight position={[5, 5, 5]} angle={0} />
<PresentationControls polar={[0, 0]} config={{ mass: 2, tension: 500 }} snap={{ mass: 4, tension: 50 }} rotation={[0, 0, 0]} azimuth={[-Math.PI / 1.4, Math.PI / 2]}>
<Keyboard3d rotation={[Math.PI / 2.7, 0, 0]} position={[0, 0, 0]} scale={6.6} />
