lzy
/
threepipe
보기 1
좋아요 0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 Activity
소스 검색

Add example 3dm-to-glb to convert .3dm files to .glb files. Export only the object in obj-to-glb example. Add EXR load example

master
Palash Bansal 3 년 전
부모
ddc85b2080
커밋
4355f05b73
No account linked to committer's email address
5개의 변경된 파일과 143개의 추가작업 그리고 11개의 파일을 삭제
분할 보기 변경상태 보기
  1. 34
    0
      examples/3dm-to-glb/index.html
  2. 46
    0
      examples/3dm-to-glb/script.ts
  3. 47
    0
      examples/exr-load/index.html
  4. 11
    8
      examples/index.html
  5. 5
    3
      examples/obj-to-glb/script.ts

+ 34
- 0
examples/3dm-to-glb/index.html 파일 보기

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rhino 3DM To GLB</title>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
</style>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
</div>

</body>

+ 46
- 0
examples/3dm-to-glb/script.ts 파일 보기

@@ -0,0 +1,46 @@
import {_testFinish, downloadBlob, IObject3D, Rhino3dmLoadPlugin, ThreeViewer} from 'threepipe'

const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas') as HTMLCanvasElement, msaa: true})

async function init() {

viewer.addPluginSync(Rhino3dmLoadPlugin)

// load obj + mtl
const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/3dm/Rhino_Logo.3dm', {
autoCenter: true,
autoScale: true,
})

// export to glb
const blob = await viewer.assetManager.exporter.exportObject(result)
// const blob = await viewer.exportScene(); // its possible to export the whole scene also

if (!blob || blob.ext !== 'glb') {
console.error('Unable to export scene')
return
}

// clear scene
viewer.scene.disposeSceneModels()

// load environment map and glb
await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
await viewer.load({
path: 'file.glb',
file: blob,
})

// add download button
const downloadButton = document.createElement('button')
downloadButton.innerText = 'Download .glb'
downloadButton.style.position = 'absolute'
downloadButton.style.bottom = '3rem'
downloadButton.style.right = '3rem'
downloadButton.style.zIndex = '10000'
downloadButton.onclick = () => downloadBlob(blob, 'file.glb')
document.body.appendChild(downloadButton)

}

init().then(_testFinish)

+ 47
- 0
examples/exr-load/index.html 파일 보기

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HDR Load</title>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
</style>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module">
import {_testFinish, ThreeViewer} from 'threepipe'

const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')})

async function init() {

await viewer.setEnvironmentMap('https://threejs.org/examples/textures/piz_compressed.exr')
viewer.scene.background = viewer.scene.environment

}

init().then(_testFinish)
</script>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
</div>

</body>

+ 11
- 8
examples/index.html 파일 보기

@@ -213,27 +213,28 @@
<div class="sidebar" data-selected-example="GLTF Load">
<button class="hamburger"> &#9776;</button>
<h1><a href="https://github.com/repalash/threepipe">ThreePipe</a> Examples</h1>
<h2 class="category">Plugins</h2>
<ul>
<li><a href="./depth-buffer-plugin/">Depth Buffer Plugin </a></li>
<li><a href="./normal-buffer-plugin/">Normal Buffer Plugin </a></li>
<li><a href="./render-target-preview/">Render Target Preview </a></li>
<li><a href="./dropzone-plugin/">Dropzone (Drag & Drop) </a></li>
</ul>
<h2 class="category">Import/Export</h2>
<ul>
<li><a href="./fbx-load/">FBX Load </a></li>
<li><a href="./hdr-load/">HDR Load </a></li>
<li><a href="./obj-mtl-load/">OBJ MTL Load </a></li>
<li><a class="selected" href="./gltf-load/">GLTF Load </a></li>
<li><a href="./rhino3dm-load/">Rhino 3DM Load </a></li>
<li><a href="./drc-load/">DRACO(DRC) Load </a></li>
<li><a href="./hdr-load/">HDR Load </a></li>
<li><a href="./exr-load/">EXR Load </a></li>
<li><a href="./glb-export/">GLB Export </a></li>
<li><a href="./pmat-material-export/">PMAT Material export </a></li>
</ul>
<h2 class="category">Rendering</h2>
<ul>
<li><a href="./depth-buffer-plugin/">Depth Buffer Plugin </a></li>
<li><a href="./normal-buffer-plugin/">Normal Buffer Plugin </a></li>
<li><a href="./custom-pipeline/">Custom Pipeline specification </a></li>
</ul>
<h2 class="category">Interaction</h2>
<ul>
<li><a href="./dropzone-plugin/">Dropzone (Drag & Drop) Plugin </a></li>
</ul>
<h2 class="category">UI Config</h2>
<ul>
<li><a href="./material-uiconfig/">Material UI </a></li>
@@ -244,8 +245,10 @@
</ul>
<h2 class="category">Utils</h2>
<ul>
<li><a href="./render-target-preview/">Render Target Preview Plugin </a></li>
<li><a href="./parallel-asset-import/">Parallel Asset Import </a></li>
<li><a href="./obj-to-glb/">Convert OBJ to GLB </a></li>
<li><a href="./3dm-to-glb/">Convert 3DM to GLB </a></li>
</ul>
<h2 class="category">Tests</h2>
<ul>

+ 5
- 3
examples/obj-to-glb/script.ts 파일 보기

@@ -1,11 +1,11 @@
import {_testFinish, downloadBlob, ThreeViewer} from 'threepipe'
import {_testFinish, downloadBlob, IObject3D, ThreeViewer} from 'threepipe'

const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas') as HTMLCanvasElement, msaa: true})

async function init() {

// load obj + mtl
await viewer.load('https://threejs.org/examples/models/obj/male02/male02.obj', {
const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/obj/male02/male02.obj', {
autoCenter: true,
autoScale: true,
})
@@ -13,7 +13,9 @@ async function init() {
// todo wait for images to load

// export to glb
const blob = await viewer.exportScene()
const blob = await viewer.assetManager.exporter.exportObject(result)
// const blob = await viewer.exportScene(); // its possible to export the whole scene also

if (!blob || blob.ext !== 'glb') {
console.error('Unable to export scene')
return

Write Preview
Loading…
취소
저장