Skip to content

🌐 Plugin for rendering 6DOF equirectangular 360 images and videos with depthmaps

License

Notifications You must be signed in to change notification settings

juniorxsound/THREE.SixDOF

Repository files navigation

THREE.6DoF


Plugin for rendering 6DoF equirectangular 360 images and video with depthmaps 🌐


Getting startedExamplesAPIThanks

Getting started

To quickly get started include the latest three-6dof.js after including three.js in your project. Next create your 6DoF viewer like

// Create the loader
var loadingManager = new THREE.LoadingManager();
var textureLoader = new THREE.TextureLoader(loadingManager);

// Load the textures
var colorTexture, depthTexture;
textureLoader.load('360_color_image.jpg', texture => { colorTexture = texture });
textureLoader.load('360_depth_image.jpg', texture => { depthTexture = texture });

// On finish loading create the viewer with the textures
loadingManager.onLoad = () => {
    sixDofViewer = new SixDOF.Viewer(colorTexture, depthTexture);
    scene.add(sixDofViewer);
}

Using with ES6

If you are using yarn with ES6 you can also

yarn add https://github.com/juniorxsound/THREE.SixDOF

You can import the plugin by simply

import { 
    Viewer,
    TextureType,
    MeshDensity, 
    Style
} from 'three-6dof'

Examples

API

When creating a viewer you pass the following parameters

const instance = new Viewer(
    colorTexture, // Or top bottom texture
    depthTexture, // Optionally
    {
        'type': TextureType.SEPERATE, // For seperate depth and texture (for single top bottom use TextureType.TOP_BOTTOM)
        'style': Style.WIRE, // Chooses the rendering style (defaults to Style.MESH)
        'density': MeshDensity.EXTRA_HIGH // Chooses geometry tesselation level
        'displacement': 4.0, // Defaults to 4.0
        'radius' : 6 // Defaults to 6
    }
)

For a full list of options see the constants.ts file.

  • instance.texture - get the THREE.Texture

  • instance.depth - get the THREE.Texture depth map (null if none)

  • instance.displacement - get or set the displacement amount

  • instance.pointSize - get or set the point size when rendering points

  • instance.opacity - get or set the material's opacity

  • instance.config - returns the current config object

  • instance.toggleDepthDebug(state) - toggle color and depth rendering (useful for debugging)


Thanks

To krpano and Kandao for the depth panoramas.

About

🌐 Plugin for rendering 6DOF equirectangular 360 images and videos with depthmaps

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published