Previewing a 3d model(but it is a house )

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!

3 Likes

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

1 Like