import React,{useRef,useState} from 'react';
import{createRoot}from'react-dom/client';
import{Canvas,useFrame,useThree}from'@react-three/fiber';
import{Grid,Html,OrbitControls,PerspectiveCamera}from'@react-three/drei';
import*as THREE from'three';
import'./styles.css';

const original={
  length:8.272,
  depth:3.352,
  height:2.4,
  balconyDepth:1.3,
  glazingReturn:.6,
  wardrobe:1.7,
  ensuite:1.7,
  bedWidth:1.8,
  bedLength:2,
  bedX:2.65
};

const C={
  wall:'#ece9e2',
  floor:'#c9a678',
  wood:'#8f6847',
  teal:'#668c93',
  rug:'#d8d0c2',
  tile:'#b8b7b2',
  glass:'#aee6ee'
};

const Box=({p,s,c=C.wall,opacity=1})=>
  
    
    <meshStandardMaterial
      color={c}
      transparent={opacity<1}
      opacity={opacity}
      roughness={opacity<1?.08:.