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

formatting

This commit is contained in:
Neil Mathew 2024-01-10 15:06:47 -05:00
parent fc89e9daf9
commit ff58cc16ff
2 changed files with 7682 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/canvascomponent.js
View File

@ -8,19 +8,19 @@ import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { useGLTF, useGLB } from "@react-three/drei"; import { useGLTF, useGLB } from "@react-three/drei";
import { Box3, Vector3 } from 'three'; import { Box3, Vector3 } from 'three';
export function CanvasComponent({setCanvasRef, gltfModel}) { export function CanvasComponent({ setCanvasRef, gltfModel }) {
return ( return (
<> <>
<Canvas <Canvas
camera={{ fov: 40, position: [0, 0, 5]}} camera={{ fov: 40, position: [0, 0, 5] }}
gl={{ alpha:true, preserveDrawingBuffer: true }} gl={{ alpha: true, preserveDrawingBuffer: true }}
> >
<Scene gltfModel={gltfModel} setCanvasRef={setCanvasRef}/> <Scene gltfModel={gltfModel} setCanvasRef={setCanvasRef} />
<OrbitControls dampingFactor={0.3} /> <OrbitControls dampingFactor={0.3} />
</Canvas> </Canvas>
</> </>
) )
} }
function Scene({ setCanvasRef, gltfModel }) { function Scene({ setCanvasRef, gltfModel }) {
@ -28,14 +28,14 @@ function Scene({ setCanvasRef, gltfModel }) {
// Set camera position closer to the object // Set camera position closer to the object
// camera.position.set(0, 0, 5); // x, y, z // camera.position.set(0, 0, 5); // x, y, z
setCanvasRef(gl.domElement); setCanvasRef(gl.domElement);
return ( return (
<> <>
<ambientLight /> <ambientLight />
<pointLight position={[1, 1, 1]} /> <pointLight position={[1, 1, 1]} />
<Light brightness={100} color={"white"}/> // highlight-line <Light brightness={100} color={"white"} /> // highlight-line
<Model gltfModel={gltfModel} /> <Model gltfModel={gltfModel} />
</> </>
); );
@ -60,12 +60,10 @@ function Model({ gltfModel, ...props }) {
const maxSize = Math.max(sizeModel.x, sizeModel.y, sizeModel.z); const maxSize = Math.max(sizeModel.x, sizeModel.y, sizeModel.z);
const scale = Math.min(size.width, size.height) / maxSize; const scale = Math.min(size.width, size.height) / maxSize;
console.log("scaling factor is ", scale) console.log("scaling factor is ", scale)
// Apply the scaling factor to the model // Apply the scaling factor to the model
modelRef.current.scale.set(scale, scale, scale); modelRef.current.scale.set(scale, scale, scale);
const boxAfterScaling = new Box3().setFromObject(modelRef.current); const boxAfterScaling = new Box3().setFromObject(modelRef.current);
const sizeModelAfterScaling = new Vector3(); const sizeModelAfterScaling = new Vector3();
boxAfterScaling.getSize(sizeModelAfterScaling); boxAfterScaling.getSize(sizeModelAfterScaling);
@ -74,8 +72,8 @@ function Model({ gltfModel, ...props }) {
const maxSizeAfterScaling = Math.max(sizeModelAfterScaling.x, sizeModelAfterScaling.y, sizeModelAfterScaling.z); const maxSizeAfterScaling = Math.max(sizeModelAfterScaling.x, sizeModelAfterScaling.y, sizeModelAfterScaling.z);
// Optional: Adjust the camera if necessary // Optional: Adjust the camera if necessary
camera.position.z =( maxSizeAfterScaling / (1 * Math.tan((camera.fov * Math.PI) / 360))); camera.position.z = (maxSizeAfterScaling / (1 * Math.tan((camera.fov * Math.PI) / 360)));
console.log("camera position is ", camera.position.z) console.log("camera position is ", camera.position.z)
camera.near = 0.1; camera.near = 0.1;
camera.far = 10000; camera.far = 10000;

7669
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff