lastcode802
Lastcode802 Present 3d Model View
This library render a 3d model View on React.js and Next.js
Description
This library or package is all about rendering your 3D models in way, So you can manage or get preview of your 3D models and play with them. The model loading speed in the browser depends on the user’s internet speed.
Available Code
import * as React from 'react';
import { ThreedView } from "@lastcode802/threedview";
function App() {
return (
<ThreedView
model3dmtl="./assets/IronMan/IronMan.mtl"
model3dobj="./assets/IronMan/IronMan.obj"
near={0.1}
positionx3d={0}
positiony3d={5}
positionz3d={20}
meshpositionx={0}
meshpositiony={3}
meshpositionz={0}
rotationx={0.0}
rotationy={0.01}
rotationz={0.0}
scalex={0.02}
scaley={0.02}
scalez={0.02}
threedviewcanvascolor="#263238"
directionallightcolor={0xffffff}
directionallightintensity={1.8}
/>
);
}
export default App;
In the interactive demo below, try changing the props and see how it affects the storybook output.
Download default 3d model use in library.
Document
Props
proptypedefaultexamplemodel3dmtl*string./assets/IronMan/IronMan.mtlassests must be in the public foldermodel3dobj*string./assets/IronMan/IronMan.objassests must be in the public foldernear*number0.10.1-(-10)-1000positionx3d*number3350-(-800000)positiony3d*number530-(-800000)positionz3d*number2020-(-800000)meshpositionx*number00meshpositiony*number30meshpositionz*number00rotationx*number00-0.001rotationy*number0.010-0.01rotationz*number00-0.001scalex*number0(0.1-0.9,0.01-0.0.9,0.0001-0.0009)scaley*number0.02(0.1-0.9,0.01-0.0.9,0.0001-0.0009)scalez*number0.02(0.1-0.9,0.01-0.0.9,0.0001-0.0009)threedviewcanvascolor*THREE.ColorRepresentationwhiteAccepts hash vale,rgb and name of the colordirectionallightcolor*number16777215Accepts hash vale,rgb and name of the colordirectionallightintensity*number1.80-255loaderColor*stringredAccepts hash vale,rgb and name of the colorshowLoader*booltruetrue-false
