Skip to content

juniorxsound/THREE.SixDOF

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

THREE.6DoF


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


Getting started β€’ Examples β€’ API β€’ Thanks

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