Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

3D Model Viewer

threejs based on 3D model component used in JimengIO

Usages

yarn add @jimengio/3d-model-viewer
import { ThreeDViewer, Old3dModelViewer } from "@jimengio/3d-model-viewer";
  • ThreeDViewer 支持stl、obj格式的3D模型展示组件
  • Old3dModelViewer 老版本显示 GLTF 格式的组件, 使用的是极坐标.

ThreeDViewer

<ThreeDViewer
  url={gltfDemo}
  renderSize={{
    width: 500,
    height: 500,
  }}
  backgroundColor="#000"
  isDragging
  isZoom
  isRotate
  materialColor="#fff"
  initPostion={
    cameraPosition:[0,0,0]
  }
  style={{}}
  onLoadComplete={()=>{}}
  onListen={(listenParam)=>{}}
/>

Old3dModelViewer

let [radius, setRadius] = useState(2.4);
let [polarAngle, setPolarAngle] = useState(90);
let [equatorAngle, setEquatorAngle] = useState(90);

<ThreeModelViewer
  url={gltfDemo}
  radius={radius}
  minRadius={0.01}
  maxRadius={20}
  backgroundColor={"black"}
  polarAngle={polarAngle}
  equatorAngle={equatorAngle}
  key={gltfDemo}
  size={{ width: 800, height: 800 }}
  onRadiusChange={(z) => {
    setRadius(z);
  }}
  onAnglesChange={(polarAngle, equatorAngle) => {
    setPolarAngle(polarAngle);
    setEquatorAngle(equatorAngle);
  }}
/>;

Building

Dev:

yarn dll
yarn dev

Compile library:

yarn compile

Release:

yarn release
# yarn serve

Workflow

https://github.com/jimengio/ts-workflow

License

MIT