toxi.three.md

#toxi.three - THREE.js support

The utilities found within toxi.three are simplified strategies for working between Toxiclibs.js and THREE.js types. The modules found in this package are native to javascript and toxiclibs.js.

##Convert toxi objects to THREE types

###toColor( tcolor, [color] ):THREE.Color

• tcolor the toxi.color.TColor to convert to a THREE.Color
• color optionally provide a THREE.Color to update

Convert a TColor to a THREE.Color:

var color = toxi.three.toColor( toxi.color.NamedColor.GOLDENROD );
var material = new THREE.MeshBasicMaterial({ color: color });

//update a material
toxi.three.toColor( toxi.color.TColor.newRandom(), material.color );

###toGeometry( object, [geom], [options] ):THREE.Geometry

• object a renderable object such as TriangleMesh
• geometry optionally provide a THREE.Geometry to update instead of creating a new one.
• options optionally provide an object detailing operations to perform.
• options.faces = true update faces if they exist from object
• options.uvs = true update the UVs if they exist from object
• options.flipVertexOrder = true flip the vertex order and later restore

toxi.three.toGeometry is a simple utility to convert many toxiclibs objects into a THREE.Geometry. You can use this method to render toxi.geom.mesh.TriangleMesh, toxi.geom.Line3D, toxi.geom.Spline3D, toxi.geom.LineStrip3D among others. Below are some examples:

####Render a sphere, or any object that has toMesh()

//render a Toxiclibs Sphere with THREE.js
var sphere = new toxi.geom.Sphere( new toxi.geom.Vec3D(), 10 );

//get the geometry from toxiclibs
var geometry = toxi.three.toGeometry( sphere.toMesh({ resolution: 24 }) );
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

//three.js mesh
var mesh = new THREE.Mesh( geometry, material );

//update the same geometry
sphere.x = 10;
sphere.radius = 25;
toxi.three.toGeometry( sphere.toMesh({ resolution: 24 }), geometry );

####Render a LineStrip3D

var ls = new toxi.geom.LineStrip3D( points );

//render it as a THREE.Line
var line = new THREE.Line(
    toxi.three.toGeometry(ls),
    new THREE.LineBasicMaterial({ color: 0x00ff00 })
);

####Render a Spline3D

var spline = new toxi.geom.Spline3D( points, tightness );

//render it as a THREE.Line
var line = new THREE.Line(
    toxi.three.toGeometry( spline.computeVertices(4) ),
    new THREE.LineBasicMaterial({ color: 0x0000ff })
);

###toVector3( vec3d, [vector3] ):THREE.Vector3

• vec3d the toxi.geom.Vec3D to convert
• vector3 optionally provide a THREE.Vector3 to update

Three.js requires its vectors to be an instanceof THREE.Vector3. This makes it easy to convert vector types.

var v = toxi.three.toVector3( toxi.geom.Vec3D.randomVector().scaleSelf(100) );

//update v
toxi.three.toVector3( toxi.geom.Vec3D.randomVector(), v );

###toVector2( vec2d, [vector2] ):THREE.Vector2

• vec2d the toxi.geom.Vec2D to convert to THREE.Vector2
• vector2 optionally provide a THREE.Vector2 to update

var vector2 = toxi.three.toVector2( toxi.geom.Vec2D.randomVector() );

##Convert THREE objects to toxi objects

###fromColor( threeColor, [tcolor] ):toxi.color.TColor

• threeColor the THREE.Color to convert to a TColor
• tcolor optionally provide a TColor to update

Convert a THREE.Color to a toxi.color.TColor object. Note: THREE.Color doesn't support alpha transparency (that is a material property).

var tcolor = toxi.three.fromColor( material.color );

//update the same color:
toxi.three.toTColor( material2.color, tcolor );

###fromVector2( vector2, [vec2d] ):toxi.geom.Vec2D

• vector2 the THREE.Vector2 to convert to Vec2D
• vec2d optionally provide a toxi.geom.Vec2D to update

var vec2d = toxi.three.fromVector2( new THREE.Vector2(1,1) );

###fromVector3( vector3, [vec3d] ):toxi.geom.Vec3D

• vector3 the THREE.Vector3 to convert to Vec3D
• vec3d optionally provide a toxi.geom.Vec3D to update

var vec3d = toxi.three.fromVector3( new THREE.Vector3( 0, 10, 0 ) );