All Projects â†’ juniorxsound â†’ Depthkit.js

juniorxsound / Depthkit.js

Licence: MIT license
🎞 A plugin for using DepthKit's volumteric captures in Three.js

Programming Languages

javascript
184084 projects - #8 most used programming language
GLSL
2045 projects

Projects that are alternatives of or similar to Depthkit.js

DepthKit-A-Frame
đŸŽĨ An A-Frame component for rendering DepthKit volumetric videos in WebVR
Stars: ✭ 34 (-46.87%)
Mutual labels:  threejs, volumetric
THREE.WebGPURenderer
Experimental Three.js WebGPU renderer
Stars: ✭ 117 (+82.81%)
Mutual labels:  threejs
generative
Creative coding experiments
Stars: ✭ 71 (+10.94%)
Mutual labels:  threejs
three-kt-wrapper
Kotlin wrappers for Three.js
Stars: ✭ 46 (-28.12%)
Mutual labels:  threejs
droplet-render
Volumetric cloud modeling and rendering for Blender.
Stars: ✭ 29 (-54.69%)
Mutual labels:  volumetric
three-jsm
Minimal three.js project setup using ES6 modules and rollup.
Stars: ✭ 74 (+15.63%)
Mutual labels:  threejs
three-mithril-ts
THREE.js, Mithril.js, TypeScript starter project
Stars: ✭ 34 (-46.87%)
Mutual labels:  threejs
terkel.com-2016
My Personal website. Build with Vue and ThreeJS.
Stars: ✭ 38 (-40.62%)
Mutual labels:  threejs
voxelizer
👾 Voxelization of 3D models
Stars: ✭ 32 (-50%)
Mutual labels:  threejs
potree-core
Potree point cloud viewer library core components for easier integration in a three.js project.
Stars: ✭ 88 (+37.5%)
Mutual labels:  threejs
threejs-dem-visualizer
Visualizing ASTER and LANDSAT satellite data using THREE.js
Stars: ✭ 35 (-45.31%)
Mutual labels:  threejs
vuletube
Starter project for vue in combination with typescript. Getting response for youtube search. Call server part for saving videos. Use videos in three.js 3d port view. Control vuletube site with hands (NUI) also with voice command.
Stars: ✭ 12 (-81.25%)
Mutual labels:  threejs
three-orbitcontrols
is the three.js OrbitControls from official repo examples
Stars: ✭ 80 (+25%)
Mutual labels:  threejs
tycho
đŸĒ A real-time, WebGL-based interactive simulation of our solar system.
Stars: ✭ 90 (+40.63%)
Mutual labels:  threejs
three-vrm
⚠ī¸ [deprecated] VRM file loader for three.js
Stars: ✭ 44 (-31.25%)
Mutual labels:  threejs
three-to-cannon
Convert a THREE.Mesh to a CANNON.Shape.
Stars: ✭ 207 (+223.44%)
Mutual labels:  threejs
three-musketeers
A simple module to introspect, debug and test any THREE.js application.
Stars: ✭ 30 (-53.12%)
Mutual labels:  threejs
three-earth
į”ģ“地回”
Stars: ✭ 15 (-76.56%)
Mutual labels:  threejs
solarsystemts
ėŧ€í”ŒëŸŦ ë°Šė •ė‹ė„ ė´ėšŠí•œ 태ė–‘ęŗ„ 행ė„ąë“¤ė˜ ęļ¤ë„ ęŗ„ė‚° ė‹œëŽŦ레ė´í„°
Stars: ✭ 49 (-23.44%)
Mutual labels:  threejs
three-onEvent
Add an EventListener for Object3d in your three.js project.(support click,hover or gaze)
Stars: ✭ 55 (-14.06%)
Mutual labels:  threejs

DepthKit.js

Build Status PRs Welcome

A plugin for visualising DepthKit volumteric captures using Three.js in WebGL. The plugin requires Three.js and a DepthKit combined-per-pixel video export from Visualise. The plugin was developed for Tzina: A Symphony of Longing. The project's code is available here.

DepthKit.js screencapture

Include depthkit.js or depthkit.min.js after loading three.js in your project.

Alternatively, if you use Node.js you can install the package with npm using npm install depthkit npm package

Creating a character

var character = new DepthKit("mesh", "meta.txt", "take.mp4");

scene.add(character);

Where the first argument takes a string for the rendering type (i.e "mesh", "wire" or "points"), the second and the third arguments are the path to the metadata file exported by Visualise and the top-bottom video.

Controlling a character

Calling new DepthKit() returns a three.js Object3D which has all the regular properties and methods (e.g character.position.set()). Inside the character there is a depthkit object that has the neccesery methods to control the playback and rendering of the character

character.depthkit.play() - Play the video

character.depthkit.pause() - Pause the video

character.depthkit.stop() - Stop and rewind to begining

character.depthkit.setLoop(isLooping) - Set loop to true or false

character.depthkit.setVolume(volume) - Change the volume of the audio

character.depthkit.setPointSize(size) - Only when rendering points

character.depthkit.setOpacity(opacity) - Change opacity

character.depthkit.setLineWidth(width) - Change line width when rendering wireframe

character.depthkit.dispose()

  • Dispose and clean the character instance

Examples:

Simple DepthKit example

Mouse hover example

Simple webVR example

Raycasting webVR example

How to contribute:

  1. Fork/Clone/Download
  2. Install all dependcies using npm install
  3. Use the following node commands:

npm run start uses concurrently to start an http-server and to run watchify and bundle on every change to build/depthkit.js

npm run build to bundle and minify to build/depthkit.min.js

Thanks

Originally written by @mrdoob and @obviousjim ported and modified by @juniorxsound and @avnerus. Special thank you to Shirin Anlen and all the Tzina crew, @ZEEEVE, @jhclaura

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].