lzy
/
threepipe
ウォッチ 1
スター 0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

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
コミッターのメールアドレスに関連付けられたアカウントが存在しません
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 ファイルの表示

<!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 ファイルの表示

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 ファイルの表示

<!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 ファイルの表示

<div class="sidebar" data-selected-example="GLTF Load"> <div class="sidebar" data-selected-example="GLTF Load">
<button class="hamburger"> &#9776;</button> <button class="hamburger"> &#9776;</button>
<h1><a href="https://github.com/repalash/threepipe">ThreePipe</a> Examples</h1> <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> <h2 class="category">Import/Export</h2>
<ul> <ul>
<li><a href="./fbx-load/">FBX Load </a></li> <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 href="./obj-mtl-load/">OBJ MTL Load </a></li>
<li><a class="selected" href="./gltf-load/">GLTF 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="./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="./glb-export/">GLB Export </a></li>
<li><a href="./pmat-material-export/">PMAT Material export </a></li> <li><a href="./pmat-material-export/">PMAT Material export </a></li>
</ul> </ul>
<h2 class="category">Rendering</h2> <h2 class="category">Rendering</h2>
<ul> <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> <li><a href="./custom-pipeline/">Custom Pipeline specification </a></li>
</ul> </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> <h2 class="category">UI Config</h2>
<ul> <ul>
<li><a href="./material-uiconfig/">Material UI </a></li> <li><a href="./material-uiconfig/">Material UI </a></li>
</ul> </ul>
<h2 class="category">Utils</h2> <h2 class="category">Utils</h2>
<ul> <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="./parallel-asset-import/">Parallel Asset Import </a></li>
<li><a href="./obj-to-glb/">Convert OBJ to GLB </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> </ul>
<h2 class="category">Tests</h2> <h2 class="category">Tests</h2>
<ul> <ul>

+ 5
- 3
examples/obj-to-glb/script.ts ファイルの表示

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}) const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas') as HTMLCanvasElement, msaa: true})


async function init() { async function init() {


// load obj + mtl // 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, autoCenter: true,
autoScale: true, autoScale: true,
}) })
// todo wait for images to load // todo wait for images to load


// export to glb // 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') { if (!blob || blob.ext !== 'glb') {
console.error('Unable to export scene') console.error('Unable to export scene')
return return

書き込み プレビュー
読み込み中…
キャンセル
保存