วีดีโอ

import React, { useRef, useState, useEffect } from "react"; import { Canvas, useFrame } from "@react-three/fiber"; import { OrbitControls, Line } from "@react-three/drei"; import * as THREE from "three"; const Sphere = ({ position, raycaster }) => { const meshRef = useRef(); useFrame(() => { if (meshRef.current) { // Reset color to red meshRef.current.material.color.set("red"); // Check intersections const intersects = raycaster.current.intersectObject(meshRef.current); if (intersects.length > 0) { meshRef.current.material.color.set("blue"); } } }); return ( <mesh ref={meshRef} position={position}> <sphereGeometry args={[0.5, 16, 16]} /> <meshBasicMaterial color="red" /> </mesh> ); }; const RaycasterLine = ({ origin, direction, length }) => { const linePoints = [ origin, // Start at origin origin.clone().add(direction.clone().multiplyScalar(length)), // End at ray length ]; return <Line points={linePoints} color="green" lineWidth={1} />; }; const MovingBox = ({ raycaster, objects }) => { const boxRef = useRef(); const [position, setPosition] = useState([0, 0.5, 0]); const speed = 0.1; // Direction of the raycaster const direction = useRef(new THREE.Vector3(0, -1, 0)); // Handle keyboard input useEffect(() => { const handleKeyDown = (event) => { setPosition((prev) => { switch (event.key) { case "w": // Move forward return [prev[0], prev[1], prev[2] - speed]; case "s": // Move backward return [prev[0], prev[1], prev[2] + speed]; case "a": // Move left return [prev[0] - speed, prev[1], prev[2]]; case "d": // Move right return [prev[0] + speed, prev[1], prev[2]]; default: return prev; } }); }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, []); useFrame(() => { if (boxRef.current) { // Update box position boxRef.current.position.set(...position); // Update raycaster origin to match the box's position raycaster.current.set( new THREE.Vector3(...position), // Raycaster origin direction.current // Raycaster direction ); // Check for intersections const intersects = raycaster.current.intersectObjects(objects); console.log("intersects",intersects) if (intersects.length > 0) { console.log("Collision detected with:", intersects[0].object); intersects[0].object.material.color.set("yellow"); } } }); return ( <> <mesh ref={boxRef}> <boxGeometry args={[1, 1, 1]} /> <meshStandardMaterial color="orange" /> </mesh> {/* Visualize Raycaster Line */} <RaycasterLine origin={new THREE.Vector3(...position)} direction={direction.current} length={10} /> </> ); }; const Scene = () => { const raycaster = useRef(new THREE.Raycaster()); const objects = useRef([]); return ( <> <ambientLight intensity={0.5} /> <Sphere position={[-2, 0, 0]} raycaster={raycaster} ref={(ref) => objects.current.push(ref)} /> <Sphere position={[0, 0, 0]} raycaster={raycaster} ref={(ref) => objects.current.push(ref)} /> <Sphere position={[2, 0, 0]} raycaster={raycaster} ref={(ref) => objects.current.push(ref)} /> {/* Grid Helper */} <gridHelper args={[10, 10]} /> {/* Dynamic Moving Box */} <MovingBox raycaster={raycaster} objects={objects.current} /> <OrbitControls enableDamping /> </> ); }; const App = () => { return ( <Canvas camera={{ position: [0, 5, 5] }} style={{ height: "100vh" }}> <Scene /> </Canvas> ); }; export default App;

import React, { useRef, useState, useEffect } from "react"; import { Canvas, useFrame } from "@react-three/fiber"; import { OrbitControls, Line } from "@react-three/drei"; import * as THREE from "three"; const Sphere = ({ position, raycaster }) => { const meshRef = useRef(); useFrame(({ clock }) => { const elapsedTime = clock.getElapsedTime(); if (meshRef.current) { meshRef.current.position.y = Math.sin(elapsedTime * position[0] * 0.3) * 1.5; // Reset color to red meshRef.current.material.color.set("red"); } // Check intersections const intersects = raycaster.current.intersectObject(meshRef.current); if (intersects.length > 0) { meshRef.current.material.color.set("blue"); } }); return ( <mesh ref={meshRef} position={position}> <sphereGeometry args={[0.5, 16, 16]} /> <meshBasicMaterial color="red" /> </mesh> ); }; const RaycasterLine = ({ origin, direction, near, far }) => { const linePoints = [ origin.clone().add(direction.clone().multiplyScalar(near)), // Start at near distance origin.clone().add(direction.clone().multiplyScalar(far)), // End at far distance ]; return <Line points={linePoints} color="red" lineWidth={2} />; }; const MovingBox = ({ raycaster }) => { const boxRef = useRef(); // Declare boxRef to refer to the mesh const [position, setPosition] = useState([0, 0.5, 0]); const speed = 0.1; // Handle keyboard input useEffect(() => { const handleKeyDown = (event) => { setPosition((prev) => { switch (event.key) { case "w": // Move forward return [prev[0], prev[1], prev[2] - speed]; case "s": // Move backward return [prev[0], prev[1], prev[2] + speed]; case "a": // Move left return [prev[0] - speed, prev[1], prev[2]]; case "d": // Move right return [prev[0] + speed, prev[1], prev[2]]; default: return prev; } }); }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, []); useFrame(() => { if (boxRef.current && raycaster.current) { // Reset color to orange boxRef.current.material.color.set("yellow"); // Check intersections const intersects = raycaster.current.intersectObject(boxRef.current); if (intersects.length > 0) { // Change color if intersected boxRef.current.material.color.set("blue"); } } }); return ( <mesh ref={boxRef} position={position}> <boxGeometry args={[1, 1, 1]} /> <meshStandardMaterial color="yellow" /> </mesh> ); }; const Scene = () => { const raycaster = useRef(new THREE.Raycaster()); const origin = new THREE.Vector3(-3, 0.5, 0); const direction = new THREE.Vector3(10, 0, 0).normalize(); const near = 10; // Correct near distance const far = 20; // Correct far distance raycaster.current.near = near; raycaster.current.far = far; useFrame(() => { raycaster.current.set(origin, direction); }); return ( <> <ambientLight intensity={0.5} /> <Sphere position={[-2, 0, 0]} raycaster={raycaster} /> <Sphere position={[0, 0, 0]} raycaster={raycaster} /> <Sphere position={[2, 0, 0]} raycaster={raycaster} /> {/* Raycaster Line with near and far applied */} <RaycasterLine origin={origin} direction={direction} near={near} far={far} /> {/* Grid Helper */} <gridHelper args={[10, 10]} /> {/* Dynamic Moving Box */} <MovingBox raycaster={raycaster} /> <OrbitControls enableDamping /> </> ); }; const App = () => { return ( <Canvas camera={{ position: [0, 5, 5] }} style={{ height: "100vh" }}> <Scene /> </Canvas> ); }; export default App;

import { useRef, useState, useEffect } from "react"; import { Canvas, useFrame } from '@react-three/fiber' import { OrbitControls } from "@react-three/drei"; import { useThree } from '@react-three/fiber' import React, { Suspense, useMemo } from 'react' import useRefs from 'react-use-refs' import * as THREE from 'three' import { AxesHelper } from 'three'; // Import AxesHelper from three.js import { Grid ,Axes} from '@react-three/drei'; function Box({ position }) { const boxRef = useRef(); const { scene } = useThree() // Access the scene //const raycaster = new THREE.Raycaster(new THREE.Vector3(0,0, 0), new THREE.Vector3(1, 0, 0)); //const raycaster = new THREE.Raycaster(); const origin = new THREE.Vector3(0, 0, 0) const direction = new THREE.Vector3(-.1, 0, 0) // Set the ray's origin and direction //raycaster.ray.origin.copy(origin); //raycaster.ray.direction.copy(direction); const raycaster = new THREE.Raycaster(origin,direction); useFrame(() => { //const intersections = raycaster.intersectObjects(scene.children); //const intersections1 = raycaster.intersectObjects(scene.children); const intersections = raycaster.intersectObjects(scene.children); [boxRef].forEach((ref) => { ref.current.material.color.set('red') }) for (const intersect of intersections) { console.log("khan",intersect.object) intersect.object.material.color.set('green') } /* for (const intersect of intersections1) { console.log("tahzeeb",intersect.object) intersect.object.material.color.set('green') } */ }) return ( <mesh ref={boxRef} position={position}> <boxGeometry args={[1, 1, 1]} /> <meshStandardMaterial color="orange" /> </mesh> ); } function GroundPlane() { return ( <mesh rotation={[-Math.PI / 2, 0, 0]} receiveShadow> <planeGeometry args={[100, 100]} /> <meshStandardMaterial color="lightgray" /> </mesh> ); } function Scene() { const [position, setPosition] = useState([0, 0.5, 0]); useEffect(() => { const handleKeyDown = (event) => { setPosition((prev) => { const [x, y, z] = prev; const step = 0.5; switch (event.key) { case "w": return [x, y, z - step]; // Move forward case "s": return [x, y, z + step]; // Move backward case "a": return [x - step, y, z]; // Move left case "d": return [x + step, y, z]; // Move right default: return prev; } }); }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, []); return ( <> <ambientLight intensity={0.5} /> <directionalLight position={[5, 10, 5]} intensity={1} /> <Box position={position} /> <GroundPlane /> <OrbitControls /> </> ); } export default function App() { return ( <Canvas shadows style={{height:"100vh"}}> <Grid args={[10, 10]} /> <axesHelper args={[5]} /> <Scene /> </Canvas> ); }

import React, { useEffect, useRef, useState } from "react"; const InputWithTimer = ({ initialTime = 30 }) => { const [time, setTime] = useState(initialTime); // Timer value const [inputValue, setInputValue] = useState(""); // User input const inputRef = useRef(null); // Reference to the input field // Timer logic useEffect(() => { const timer = setInterval(() => { setTime((prevTime) => (prevTime > 0 ? prevTime - 1 : 0)); // Countdown }, 1000); return () => clearInterval(timer); // Cleanup on unmount }, []); // Focus on the input field when the component mounts useEffect(() => { if (inputRef.current) { inputRef.current.focus(); } }, []); // Handle input changes const handleInputChange = (e) => { setInputValue(e.target.value); }; // Handle resend button click const handleResend = () => { setTime(initialTime); // Reset timer setInputValue(""); // Clear input if (inputRef.current) { inputRef.current.focus(); // Focus back on input } }; return ( <div style={{ textAlign: "center", marginTop: "50px" }}> <div> <input ref={inputRef} value={inputValue} onChange={handleInputChange} type="number" min="0" inputMode="numeric" pattern="[0-9]*" title="Non-negative integral number" placeholder="Type here..." style={{ fontSize: "16px", padding: "10px", marginBottom: "20px", borderRadius: "5px", border: "1px solid #ccc", }} /> </div> <div> {time > 0 ? ( <h2>Time Remaining: {time}s</h2> ) : ( <button onClick={handleResend} style={{ fontSize: "16px", padding: "10px 20px", borderRadius: "5px", border: "none", backgroundColor: "#007bff", color: "#fff", cursor: "pointer", }} > Resend </button> )} </div> </div> ); }; export default InputWithTimer;

Love you sir, Its working now❤

import React from "react"; import { useGLTF } from "@react-three/drei"; import { RigidBody } from "@react-three/rapier"; import HallModel from '../assets/Hall/Hall.glb' const Hall = () => { const { scene } = useGLTF(HallModel); return ( <RigidBody type="fixed" colliders="trimesh"> {/* Render the GLTF model */} <primitive object={scene} /> </RigidBody> ); }; export default Hall; import React from "react"; import { Canvas } from "@react-three/fiber"; import { OrbitControls } from "@react-three/drei"; import { Physics } from "@react-three/rapier"; import Hall from "./Components/Hall"; const App = () => { return ( <Canvas style={{height:"100vh"}}> {/* Add lighting */} <ambientLight intensity={0.5} /> <directionalLight position={[10, 10, 5]} intensity={1} /> {/* Set up the physics world */} <Physics debug={true} > <Hall /> </Physics> {/* Camera controls */} <OrbitControls /> </Canvas> ); }; export default App;

import React, { useState, useEffect, useRef } from "react"; import { Canvas, useFrame } from "@react-three/fiber"; import { Box, OrbitControls, Plane } from "@react-three/drei"; import * as THREE from "three"; const DynamicCube = ({ staticCubes, onCollision, onProximity }) => { const [position, setPosition] = useState([0, 0.5, 0]); // Dynamic cube's position const dynamicRef = useRef(); const raycaster = useRef(new THREE.Raycaster()); // Single Raycaster instance const directions = [ new THREE.Vector3(1, 0, 0), // Right new THREE.Vector3(-1, 0, 0), // Left new THREE.Vector3(0, 0, 1), // Forward new THREE.Vector3(0, 0, -1), // Backward ]; useEffect(() => { const handleKeyDown = (event) => { setPosition((prev) => { const [x, y, z] = prev; switch (event.key) { case "w": // Move forward (z-axis) case "ArrowUp": // Arrow Up (move forward) return [x, y, z - 0.5]; case "s": // Move backward (z-axis) case "ArrowDown": // Arrow Down (move backward) return [x, y, z + 0.5]; case "a": // Move left (x-axis) case "ArrowLeft": // Arrow Left (move left) return [x - 0.5, y, z]; case "d": // Move right (x-axis) case "ArrowRight": // Arrow Right (move right) return [x + 0.5, y, z]; default: return prev; } }); }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, []); useFrame(() => { if (!dynamicRef.current) return; // Get the dynamic cube's position const dynamicPosition = new THREE.Vector3(...position); // Iterate through each direction for raycasting directions.forEach((direction) => { raycaster.current.set(dynamicPosition, direction); const intersects = raycaster.current.intersectObjects( staticCubes.map((cube) => cube.ref.current) ); // Handle collision (direct intersection) if (intersects.length > 0 && intersects[0].distance <= 1) { const collidedObject = staticCubes.find( (cube) => cube.ref.current === intersects[0].object ); if (collidedObject) { onCollision(collidedObject.id); } } // Handle proximity (objects within a range) if (intersects.length > 0 && intersects[0].distance <= 3) { const nearbyObject = staticCubes.find( (cube) => cube.ref.current === intersects[0].object ); if (nearbyObject) { onProximity(nearbyObject.id); } } }); }); return ( <Box args={[1, 1, 1]} position={position} ref={dynamicRef}> <meshStandardMaterial color="black" /> </Box> ); }; const StaticCube = React.forwardRef(({ id, position }, ref) => ( <Box args={[1, 1, 1]} position={position} ref={ref}> <meshStandardMaterial color="red" /> </Box> )); const Ground = () => { return ( <Plane args={[20, 20]} rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, 0]}> <meshStandardMaterial color="yellow" /> </Plane> ); }; const App = () => { const staticCubes = [ { id: "Cube 1", position: [2, 0.5, 4], ref: React.createRef() }, { id: "Cube 2", position: [10, 0.5, 4], ref: React.createRef() }, ]; const handleCollision = (id) => { console.log(`Collision detected with: ${id}`); // Collision logs }; const handleProximity = (id) => { console.log(`Proximity detected around: ${id}`); // Proximity logs }; return ( <Canvas style={{ height: "100vh" }}> {/* Lights */} <ambientLight intensity={0.5} /> <directionalLight position={[5, 10, 5]} /> {/* OrbitControls */} <OrbitControls enableDamping={true} /> {/* Ground */} <Ground /> {/* Static Cubes */} {staticCubes.map((cube) => ( <StaticCube key={cube.id} id={cube.id} position={cube.position} ref={cube.ref} /> ))} {/* Dynamic Cube */} <DynamicCube staticCubes={staticCubes} onCollision={handleCollision} onProximity={handleProximity} /> </Canvas> ); }; export default App;

import React, { useState, useEffect, useRef } from "react"; import { Canvas, useFrame } from "@react-three/fiber"; import { Box, OrbitControls, Plane } from "@react-three/drei"; import * as THREE from "three"; const DynamicCube = ({ staticCubes, onCollision, onProximity }) => { const [position, setPosition] = useState([0, 0.5, 0]); // Dynamic cube's position const dynamicRef = useRef(); useEffect(() => { const handleKeyDown = (event) => { setPosition((prev) => { const [x, y, z] = prev; switch (event.key) { case "w": // Move forward (z-axis) case "ArrowUp": // Arrow Up (move forward) return [x, y, z - 0.5]; case "s": // Move backward (z-axis) case "ArrowDown": // Arrow Down (move backward) return [x, y, z + 0.5]; case "a": // Move left (x-axis) case "ArrowLeft": // Arrow Left (move left) return [x - 0.5, y, z]; case "d": // Move right (x-axis) case "ArrowRight": // Arrow Right (move right) return [x + 0.5, y, z]; default: return prev; } }); }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, []); useFrame(() => { if (!dynamicRef.current) return; const dynamicBox = new THREE.Box3().setFromObject(dynamicRef.current); staticCubes.forEach(({ ref, id }) => { if (ref.current) { const staticBox = new THREE.Box3().setFromObject(ref.current); // Expanded box for proximity detection const expandedBox = staticBox.clone().expandByScalar(2); // Adjust proximity margin // Check for collision (direct intersection) if (dynamicBox.intersectsBox(staticBox)) { onCollision(id); // Log collision } // Check for surrounding area (expanded bounding box) if (expandedBox.intersectsBox(dynamicBox)) { onProximity(id); // Log surrounding area } } }); }); return ( <Box args={[1, 1, 1]} position={position} ref={dynamicRef} > <meshStandardMaterial color="orange" /> </Box> ); }; const StaticCube = React.forwardRef(({ id, position }, ref) => ( <Box args={[1, 1, 1]} position={position} ref={ref}> <meshStandardMaterial color="blue" /> </Box> )); const Ground = () => { return ( <Plane args={[20, 20]} rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, 0]}> <meshStandardMaterial color="green" /> </Plane> ); }; const App = () => { const staticCubes = [ { id: "Cube 1", position: [2, 0.5, 4], ref: React.createRef() }, { id: "Cube 2", position: [10, 0.5, 4], ref: React.createRef() }, ]; const handleCollision = (id) => { console.log(`Collision detected with: ${id}`); // Collision logs }; const handleProximity = (id) => { console.log(`Surrounding area detected around: ${id}`); // Proximity logs }; return ( <Canvas style={{ height: "100vh" }}> {/* Lights */} <ambientLight intensity={0.5} /> <directionalLight position={[5, 10, 5]} /> {/* OrbitControls */} <OrbitControls enableDamping={true} /> {/* Ground */} <Ground /> {/* Static Cubes */} {staticCubes.map((cube) => ( <StaticCube key={cube.id} id={cube.id} position={cube.position} ref={cube.ref} /> ))} {/* Dynamic Cube */} <DynamicCube staticCubes={staticCubes} onCollision={handleCollision} onProximity={handleProximity} /> </Canvas> ); }; export default App;

GIVE ME THE LIBRARIES !!!!!!!

Can you give the assets folder

write to the post office

mailru

If you can't help me or make a software for a vending machine, how can I contact you

If you can't help me or make a software for a vending machine, how can I contact you

jazakaAllah hu khairan brother I actually worked

Sir pins of esp32

hello! how do we contact you 776 put this number in the foreground

3413949

how to contact you 7776

9

4

9

3

1

4

3

6

7

7

7

+

how to contact you

how to contact you, do you delete TH-cam comments

how to contact you, do you delete TH-cam comments

hello! I am from the Republic of Kazakhstan. it will not help to write software for vending machines. please write the price

bro what code did you put in rootSaga.js

nice. do you have sample tutorial or file ?

how about this im getting error in the icon={route.icon}the code is : "use client"; import { Compass, Layout } from "lucide-react"; import { SidebarItem } from "./sidebar-item"; const guestRoutes = [ { icon: Layout, label: "Dashboard", href: "/" }, { icon: Compass, label: "Browse", href: "/search" }, ] export const SidebarRoutes = () => { const routes = guestRoutes; return ( <div className="flex flex-col w-full"> {routes.map((route) =>( <SidebarItem key={route.href} icon={route.icon} label={route.label} href={route.href} /> ))} </div> ) }

Hello sir POST 429 error need help

Best video

Referal dedo bhaiya, With 2.5 years of experience at Angular Minds Pvt. Ltd., I’ve developed strong skills in JavaScript, Angular, TypeScript, and Node.js. I’ve designed and developed web applications, improving performance and user experience. My recent project in billing software increased efficiency, showcasing my ability to deliver impactful solutions.

Thank you very much for your very detailed information video. It has helped me a lot to make a project without micro controllers.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Babylon.js Scene</title> <style> body { margin: 0; overflow: hidden; } canvas { width: 100%; height: 100%; display: block; } </style> </head> <body> <canvas id="renderCanvas"></canvas> <script src="cdn.jsdelivr.net/npm/babylonjs@6.1.0/babylon.min.js"></script> <script> // Get the canvas element const canvas = document.getElementById('renderCanvas'); // Create the Babylon.js engine const engine = new BABYLON.Engine(canvas, true); // Create a basic scene const createScene = function() { // Create a new scene const scene = new BABYLON.Scene(engine); // Create a camera and set its position const camera = new BABYLON.ArcRotateCamera( 'camera1', Math.PI / 2, Math.PI / 4, 10, BABYLON.Vector3.Zero(), scene ); camera.attachControl(canvas, true); // Create a basic light const light = new BABYLON.HemisphericLight( 'light1', new BABYLON.Vector3(1, 1, 0), scene ); light.intensity = 0.7; // Create a sphere const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', { diameter: 2 }, scene); // Set the position of the sphere sphere.position = new BABYLON.Vector3(2, 1, 0); // x, y, z coordinates // Create a ground plane const ground = BABYLON.MeshBuilder.CreateGround('ground', { width: 6, height: 6 ,depth: 100}, scene); ground.position.y = -1 // Rotate the sphere continuously scene.registerBeforeRender(function() { sphere.rotation.y += 0.01; }); return scene; }; // Create the scene const scene = createScene(); // Render loop engine.runRenderLoop(function() { scene.render(); }); // Resize event handler window.addEventListener('resize', function() { engine.resize(); }); </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Babylon.js Scene</title> <style> body { margin: 0; overflow: hidden; } canvas { width: 100%; height: 100%; display: block; } </style> </head> <body> <canvas id="renderCanvas"></canvas> <script src="cdn.jsdelivr.net/npm/babylonjs@6.1.0/babylon.min.js"></script> <script> // Get the canvas element const canvas = document.getElementById('renderCanvas'); // Create the Babylon.js engine const engine = new BABYLON.Engine(canvas, true); // Create a basic scene const createScene = function() { // Create a new scene const scene = new BABYLON.Scene(engine); // Create a camera and set its position const camera = new BABYLON.ArcRotateCamera( 'camera1', Math.PI / 2, Math.PI / 4, 10, BABYLON.Vector3.Zero(), scene ); camera.attachControl(canvas, true); // Create a basic light const light = new BABYLON.HemisphericLight( 'light1', new BABYLON.Vector3(1, 1, 0), scene ); light.intensity = 0.7; // Create a sphere const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', { diameter: 2 }, scene); // Set the position of the sphere sphere.position = new BABYLON.Vector3(2, 1, 0); // x, y, z coordinates // Create a ground plane const ground = BABYLON.MeshBuilder.CreateGround('ground', { width: 6, height: 6 ,depth: 100}, scene); ground.position.y = -1 // Rotate the sphere continuously scene.registerBeforeRender(function() { sphere.rotation.y += 0.01; }); return scene; }; // Create the scene const scene = createScene(); // Render loop engine.runRenderLoop(function() { scene.render(); }); // Resize event handler window.addEventListener('resize', function() { engine.resize(); }); </script> </body> </html>

Thanks

hello bro plzz reply

Hi

Solución efectiva 100%, gracias

Can i order from Nepal

Incomprehensible content