lzy
/
threepipe
İzle 1
Yıldızla 0
Çatalla 0
Kod Sorunlar 0 Değişiklik İstekleri 0 Sürümler 0 Wiki Aktivite
threepipe
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
337 İşlemeler
1 Dal
Ağaç: 1b98e2f6cd
Dallar Biçim İmleri
${ item.name }
Branş ${ searchTerm } oluştur
'1b98e2f6cd'den
${ noResults }
Palash Bansal 1b98e2f6cd
Version bump 		1 yıl önce
.github Update ci versions 1 yıl önce
.idea Add options to remove and assign new materials in object UI config. 1 yıl önce
examples Improve CanvasSnapshotPlugin with more options, Add promptForUrl button, load function in DropzonePlugin, Add initialized event in GLTFMeshOptDecodePlugin. 1 yıl önce
plugins Some type fixes 1 yıl önce
scripts lint 1 yıl önce
src Version bump 1 yıl önce
website Improve CanvasSnapshotPlugin with more options, Add promptForUrl button, load function in DropzonePlugin, Add initialized event in GLTFMeshOptDecodePlugin. 1 yıl önce
.eslintignore Add some basic examples 3 yıl önce
.eslintrc.cjs Merge remote-tracking branch 'origin/master' 2 yıl önce
.gitignore ignore 1 yıl önce
.npmignore Core viewer framework 3 yıl önce
CONTRIBUTING.md Remove markdown to html, cleanup readme, update three ref version, update website, add contributing. 1 yıl önce
LICENSE Update Apache-2.0 License 2 yıl önce
NOTICE Update Apache-2.0 License 2 yıl önce
README.md Improved file extension handling, custom url modifiers, in asset import, add IObject3D.autoUpgradeChildren, IObject3D.acceptChildEvents, handle NaN in autoScale, center, camera near far, preRender, postRender events to RenderManager, use EventListener2 in some places, add modelRootScale to viewer options, Update Readme, some minor fixes, 1 yıl önce
package-lock.json Version bump 1 yıl önce
package.json Version bump 1 yıl önce
tsconfig.json Add exports in package.json 1 yıl önce
typedoc.json Add some docs. 2 yıl önce
vite.config.js Improve warning in AssetManager, Create MaterialManager.copyMaterialProps, fix camera aspect when canvas has height 0, add undo for some buttons, changes/fixes for ui, handle InteractionPromptPlugin in CameraViewPlugin, support async onStop and onComplete in PopmotionPlugin, allow resetting geometry in BaseGroundPlugin, add pluginListeners, forPlugin in ThreeViewer, add SwitchNodeBasePlugin.snapIcons, fixes in InteractionPromptPlugin, add isEditor, LS_DEFAULT_LOGO in LoadingScreenPlugin, add isEditor in FrameFadePlugin. 1 yıl önce

README.md

ThreePipe

A new way to work with three.js, 3D models and rendering on the web.

ThreePipe — Github — Examples — API Reference — WebGi

NPM Package Discord Server Twitter

ThreePipe is a modern 3D framework built on top of three.js, written in TypeScript, designed to make creating high-quality, modular, and extensible 3D experiences on the web simple and enjoyable.

Key features include:

  • Simple, intuitive API for creating 3D model viewers/configurators/editors on web pages, with many built-in presets for common workflows and use-cases.
  • Companion editor to create, edit and configure 3D scenes in the browser.
  • Modular architecture that allows you to easily extend the viewer, scene objects, materials, shaders, rendering, post-processing and serialization with custom functionality.
  • Plugin system along with a rich library of built-in plugins that allows you to easily add new features to the viewer.
  • uiconfig compatibility to automatically generate configuration UIs in the browser.
  • Modular rendering pipeline with built-in deferred rendering, post-processing, RGBM HDR rendering, etc.
  • Material extension framework to modify/inject/build custom shader code into existing materials at runtime from plugins.
  • Extendable asset import, export and management pipeline with built-in support for gltf, glb, obj+mtl, fbx, materials(pmat/bmat), json, zip, png, jpeg, svg, webp, ktx2, ply, 3dm and many more.
  • Automatic serialization of all viewer and plugin settings in GLB(with custom extensions) and JSON formats.
  • Automatic disposal of all three.js resources with built-in reference management.
  • Realtime Realistic Rendering with screen-space post-processing effects from webgi.

Checkout the documentation and guides on the threepipe website for more details.

Examples

Code samples and demos covering various usecases and test are present in the examples folder.

Try them: https://threepipe.org/examples/

View the source code by pressing the code button on the top left of the example page.

To make changes and run the example, click on the CodePen button on the top right of the source code.

Getting Started

Checkout the full Getting Started Guide on threepipe.com

Local Setup

To create a new project locally


And follow the instructions to create a new project.

### HTML/JS Quickstart (CDN)

```html

<canvas id="three-canvas" style="width: 800px; height: 600px;"></canvas>
<script type="module">
  import {ThreeViewer, DepthBufferPlugin} from 'https://unpkg.com/threepipe@latest/dist/index.mjs'

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

  // Add some plugins 
  viewer.addPluginSync(new DepthBufferPlugin())
  
  // Load an environment map
  const envPromise = viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
  const modelPromise = viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
    autoCenter: true,
    autoScale: true,
  })

  Promise.all([envPromise, modelPromise]).then(([env, model]) => {
    console.log('Loaded', model, env, viewer)
  })
</script>

Check it in action: https://threepipe.org/examples/#html-js-sample/

Check out the details about the ThreeViewer API and more plugins.

React

The best way to use the viewer in react is to wrap it in a custom component.

Here is a sample react component in tsx to render a model with an environment map.

import React from 'react'
function ThreeViewerComponent({src, env}: {src: string, env: string}) {
  const canvasRef = React.useRef(null)
  React.useEffect(() => {
    const viewer = new ThreeViewer({canvas: canvasRef.current})

    const envPromise = viewer.setEnvironmentMap(env)
    const modelPromise = viewer.load(src)
    Promise.all([envPromise, modelPromise]).then(([env, model]) => {
      console.log('Loaded', model, env, viewer)
    })
    
    return () => {
      viewer.dispose()
    }
  }, [])
  return (
     <canvas id="three-canvas" style={{width: 800, height: 600}} ref={canvasRef} />
  )
}

Check it in action: https://threepipe.org/examples/#react-tsx-sample/

Other examples in js: https://threepipe.org/examples/#react-js-sample/ and jsx: https://threepipe.org/examples/#react-jsx-sample/

Vue.js

A sample vue.js component in js to render a model with an environment map.

const ThreeViewerComponent = {
  setup() {
    const canvasRef = ref(null);

    onMounted(() => {
      const viewer = new ThreeViewer({ canvas: canvasRef.value });

      const envPromise = viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr');
      const modelPromise = viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf');

      Promise.all([envPromise, modelPromise]).then(([env, model]) => {
        console.log('Loaded', model, env, viewer)
      })

      onBeforeUnmount(() => {
        viewer.dispose();
      });
    });

    return { canvasRef };
  },
};

Check it in action: https://threepipe.org/examples/#vue-html-sample/

Another example with Vue SFC(Single file component): https://threepipe.org/examples/#vue-sfc-sample/

Svelte (4)

A sample svelte component in js to render a model with an environment map.

<script>
    import {onDestroy, onMount} from 'svelte';
    import {ThreeViewer} from 'threepipe'; 

    let canvasRef;
    let viewer;
    onMount(() => {
        viewer = new ThreeViewer({canvas: canvasRef});

        const envPromise = viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr');
        const modelPromise = viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf');

        Promise.all([envPromise, modelPromise]).then(([env, model]) => {
          console.log('Loaded', model, env, viewer)
        })
    });
    onDestroy(() => viewer.dispose())
</script>

<canvas bind:this={canvasRef} id="three-canvas" style="width: 800px; height: 600px"></canvas>

Check it in action: https://threepipe.org/examples/#svelte-sample/

NPM/YARN

Installation

npm install threepipe

Loading a 3D Model

First, create a canvas element in your HTML page:

<canvas id="three-canvas" style="width: 800px; height: 600px;"></canvas>

Then, import the viewer and create a new instance:

import {ThreeViewer, IObject3D} from 'threepipe'

// Create a viewer
const viewer = new ThreeViewer({canvas: document.getElementById('three-canvas') as HTMLCanvasElement})

// Load an environment map
await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')

// Load a model
const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
    autoCenter: true,
    autoScale: true,
})

That’s it! You should now see a 3D model on your page.

The 3D model can be opened in the editor to view and edit the scene settings, objects, materials, lights, cameras, post-processing, etc. and exported as a GLB file. All settings are automatically serialized and saved in the GLB file, which can be loaded into the viewer. Any plugins used in the editor can be added to the viewer to add the same functionality. The plugin data is automatically loaded(if the plugin is added) when the model is added to the scene.

The viewer initializes with a Scene, Camera, Camera controls(Orbit Controls), several importers, exporters and a default rendering pipeline. Additional functionality can be added with plugins.

Check out the glTF Load example to see it in action or to check the JS equivalent code: https://threepipe.org/examples/#gltf-load/

Check out the Plugins section to learn how to add additional functionality to the viewer.

License

The core framework(src, dist, examples folders) and any plugins without a separate license are under the Free Apache 2.0 license.

Some plugins(in the plugins folder) might have different licenses. Check the individual plugin documentation and the source folder/files for more details.

Status

The project is in beta stage and under active development. Many features will be added but the core API will not change significantly in future releases.

Table of Contents

Documentation

Check the list of all functions, classes and types in the API Reference Docs.

Contributing

Contributions to ThreePipe are welcome and encouraged! Feel free to open issues and pull requests on the GitHub repository.