interesting
/
3d-to-photo
mirror of https://github.com/Dabble-Studio/3d-to-photo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

cleaning up canvas component

This commit is contained in:
neil 2023-10-12 16:47:46 -04:00
parent b2fa49a6c3
commit 9bf77bd637
1 changed files with 0 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
components/canvascomponent.js
View File

@ -7,68 +7,8 @@ import { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { useGLTF, useGLB } from "@react-three/drei"; import { useGLTF, useGLB } from "@react-three/drei";
// export function CanvasComponent({setCanvasRef}) {
// return (
// <>
// <Canvas
// gl={{ preserveDrawingBuffer: true }}
// >
// <Scene setCanvasRef={setCanvasRef}/>
// <OrbitControls dampingFactor={0.3} />
// </Canvas>
// </>
// )
// }
// function Scene({setCanvasRef}) {
// const gl = useThree((state) => state.gl)
// setCanvasRef(gl.domElement);
// return (
// <>
// <ambientLight />
// <pointLight position={[10, 10, 10]} />
// <Model position={[0, 0, 0]} />
// </>
// )
// }
// function Model(props) {
// const { nodes, materials } = useGLTF("/sneaker.glb");
// return (
// <group {...props} dispose={null}>
// <group rotation={[-Math.PI / 2, 0, 0]}>
// <group rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
// <group
// position={[0, 5.13, 0]}
// rotation={[-Math.PI / 2, 0, 0]}
// scale={100}
// >
// <mesh
// geometry={nodes.Plane_Material_0.geometry}
// material={materials.Material}
// />
// </group>
// </group>
// </group>
// </group>
// );
// }
// useGLTF.preload("/sneaker.glb");
export function CanvasComponent({setCanvasRef, gltfModel}) { export function CanvasComponent({setCanvasRef, gltfModel}) {
return ( return (
<> <>
<Canvas <Canvas
@ -83,19 +23,6 @@ export function CanvasComponent({setCanvasRef, gltfModel}) {
} }
// function Scene({ setCanvasRef, gltfModel }) {
// const gl = useThree((state) => state.gl)
// setCanvasRef(gl.domElement);
// return (
// <>
// <Model gltfModel={gltfModel} position={[0, 0, 0]} />
// </>
// )
// }
function Scene({ setCanvasRef, gltfModel }) { function Scene({ setCanvasRef, gltfModel }) {
const { gl, camera } = useThree(); const { gl, camera } = useThree();
@ -117,9 +44,6 @@ function Scene({ setCanvasRef, gltfModel }) {
function Model({ gltfModel, ...props }) { function Model({ gltfModel, ...props }) {
console.log(gltfModel)
const { nodes, materials } = gltfModel; const { nodes, materials } = gltfModel;
console.log("model loaded") console.log("model loaded")
@ -147,4 +71,3 @@ function Light({ brightness, color }) {
/> />
); );
} }
// useGLTF.preload("/sneaker.glb");