Git Product home page Git Product logo

js.blend's Introduction

JS.BLEND

The Blender file parser for JavaScript

JS.BLEND is a file parser that is designed to read unmodified Blender files and convert the binary data into JavaScript objects which can be used in JavaScript applications. It's designed with an easy to use interface to allow for quick integration with 3D apps, namely by using the ThreeJS library. It also allows for manual access to Blender C class and data structures that are converted into JavaScript objects.

Demo

Example

Usage

JS.BLEND can be installed through NPM. Once downloaded, the production file can be found in the /build folder as js.blend.js. The source files will need built using Browserify or any other Common.js module bundler.

<script src="./build/js.blend.js"></script>

Using the script is easy. You can either pass to 'JSBLEND' a raw ArrayBuffer or Blob containing the binary of the Blender file, or you can supply a URI to the Blender file resource.

	JSBLEND(array_buffer).then((blend)=>{...})

	JSBLEND(blob).then((blend)=>{...})
	
	JSBLEND("./blends/test.blend").then((blend)=>{...})

A promise will be returned that will provide a reference to a parsed blender file object in the response, or a string with an error message if the file could not be parsed.

	JSBLEND("./blends/test.jpg").then((blend)=>{}).catch((error)=>{
		console.log(error) //->  "Not a Blender file"
	}); 

ThreeJS

To use the parsed results with ThreeJS a three member is available in the response object. This member contains two function: loadScene and loadObject.

*.three.loadScene([ThreeJSScene]) will load Lights, Mesh Objects, and Materials into a ThreeJS scene object that is passed to the function.

	var scene = new THREE.Scene();

	blend.three.loadScene(scene);

*.three.loadObject([string]) accepts a string with the name of a Blender object and will attempt to extract and return an equivilant ThreeJS object.

	var light = blend.three.loadObject("Lamp"); //-> ThreeJS light returned;

	var cube = blend.three.loadObject("Cube"); //-> ThreeJS Mesh Object with materials returned;

Notes on using with Blender

Please see the following document for more information on using JS.BLEND with ThreeJS: notes

Raw Data

JS.BLEND works by turning the schemas, also known in Blender as SDNAs, in the .blend file into JavaScript prototype objects. It then creates new objects from these prototypes, one for every single data structure stored in the file. The actual data is left stored in an ArrayBuffer and TypedArray views and DataViews used to make the stuctured data available to the rest of JS.

The compiled objects can be found by accessing blend.file.objects, which is used as a key/value lookup for all data structures from the file. For example blend.file.objects["Mesh"] will return an array of all mesh objects stored in the file.

Official documentation for Blender data structures is hard to come by, and there have been several changes to the data structures since version 1.0 of Blender. This means that accessing and using the raw data is a bit of a discovery process, and requires utilizing the Debugger to investigate the object prototypes to see what members they contain.

Potential

Since the entire .blend file is made available through this script, every single resource that can be created in Blender and saved to file can be accessed and used in JavaScript. This means that, ultimataly, information such as animation data, bone hiearchies, and particle system setups can be saved in Blender and then immediatly extracted and used in Javascript and integrated into projects.

License

This program is free to use and distribute under the MIT.

js.blend's People

Contributors

acweathersby avatar

Watchers

James Cloos avatar Wolfgang von Ludwigsburg avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.