Skip to content

Commit

Permalink
加载模型数组
Browse files Browse the repository at this point in the history
  • Loading branch information
xiaxiangfeng committed Oct 31, 2022
1 parent c3d4379 commit 77d334a
Show file tree
Hide file tree
Showing 7 changed files with 410 additions and 1 deletion.
4 changes: 4 additions & 0 deletions .umirc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,10 @@ export default defineConfig({
title: 'STL格式',
path: '/guide/stl',
},
{
title: '模型组',
path: '/guide/Group',
},
],
},
],
Expand Down
137 changes: 137 additions & 0 deletions public/chair.gltf

Large diffs are not rendered by default.

192 changes: 192 additions & 0 deletions public/chair1.gltf

Large diffs are not rendered by default.

20 changes: 20 additions & 0 deletions src/Group/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
nav:
title: 模型组
path: /guide
---

## 加载 模型组

Demo:

```tsx
import React from 'react';
import Model from 'react-3dmodelx';

export default () => (
<div style={{ maxWidth: 800, width: '100%', height: 400, margin: 'auto' }}>
<Model.Group list={['./chair1.gltf', './chair.gltf']} />
</div>
);
```
1 change: 1 addition & 0 deletions src/Group/index.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

54 changes: 54 additions & 0 deletions src/Group/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
import * as THREE from 'three';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import useScene from '../useScene';

function Group(
{ list, backgroundColor }: { list: string[]; backgroundColor: string },
ref?: React.Ref<unknown>,
) {
const canvasRef = useRef<HTMLCanvasElement>(null);

const { add2Scene, scene, animate, renderer, render } = useScene(canvasRef, backgroundColor);

useImperativeHandle(ref, () => ({
getSnapshot: () => {
render();
return renderer.current?.domElement.toDataURL('image/png', 1);
},
}));

useEffect(() => {
const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
scene.current?.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(1, 1, 0).normalize();

scene.current?.add(directionalLight);

list.forEach((url) => {
const lowerUrl = url.toLowerCase();

if (lowerUrl.endsWith('fbx')) {
const loader = new FBXLoader();
loader.load(url, function (data: any) {
add2Scene(data);
animate();
});
}
if (lowerUrl.endsWith('gltf') || lowerUrl.endsWith('glb')) {
const loader = new GLTFLoader();
loader.load(url, function (gltf: any) {
add2Scene(gltf.scene);
render();
});
}
});
}, []);

return <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />;
}

export default forwardRef(Group);
3 changes: 2 additions & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@ import FBX from './FBX';
import OBJ from './OBJ';
import PLY from './PLY';
import STL from './STL';
import Group from './Group';

export default { GLTF, Collada, FBX, OBJ, PLY, STL };
export default { GLTF, Collada, FBX, OBJ, PLY, STL, Group };

0 comments on commit 77d334a

Please sign in to comment.