i want to preview a 3d model that is a house but just want to see inside the model which is a house and make orbitcontrol works inside the model
Sounds rad! You should do it!
i don’t understand
You only need put a camera inside a house:)
i used perspective camera
this is what i have written
import React, { Suspense, useEffect, useRef } from “react”;
import { Canvas, useThree } from “@react-three/fiber”;
import { OrbitControls, useGLTF } from “@react-three/drei”;
import * as THREE from “three”;
// Load the model
function Model({ scale }) {
const { scene } = useGLTF(“./public/model/SiittngRmBaked.glb”); // Ensure the model is in ‘public/model/’
return <primitive object={scene} scale={[scale, scale, scale]} />;
}
// Resize handling component
function ResizeHandler() {
const { camera, gl } = useThree(); // Access camera and renderer (gl)
useEffect(() => {
const handleResize = () => {
// Update camera aspect ratio
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
// Update renderer size and pixel ratio
gl.setSize(window.innerWidth, window.innerHeight);
gl.setPixelRatio(Math.min(window.devicePixelRatio, 2));
};
// Add resize event listener
window.addEventListener("resize", handleResize);
// Cleanup on unmount
return () => window.removeEventListener("resize", handleResize);
}, [camera, gl]);
return null; // This component doesn’t render anything
}
// Main Experience component
function Experience() {
return (
<Canvas camera={{ position: [3, 5, 5], fov: 45 }}>
{/* Add OrbitControls /}
{/ Handle resizing /}
<ResizeHandler />
{/ Ambient and directional lights /}
<ambientLight intensity={0.5} />
<directionalLight position={[5, 10, 5]} intensity={1} />
{/ Load the model */}
<Suspense fallback={null}>
<Model scale={3} />
</Suspense>
</Canvas>
);
}
export default Experience;
Here is an R3F house demo you can use for reference