Events, Text and lines?

[Ovid]

Absolutely lovely!

What would be the difficulty in adding text to each particle? I have a personal project I would love to incorporate this into, but without being able to add labels, it would be difficult for users to know what's going on.

Being able to draw lines between particles would also be useful, along with event handlers per particle (at the very least, associate a URL with them so that if I click on it, I could "drill down" or go to a page which explains what the user is looking at.

Cheers,
Ovid

[mrdoob]

Text and lines is doable. Make them clickable, I don't know how would I do that right now.

[Ovid]

I might be able to sidestep events. I could possibly put a menu on the side. Not optimal, but text and lines would be enough for me to make this workable.

Again, thanks for the great library :)

Cheers,
Ovid

[jurjen]

I've implemented rudimentary support for lines - at least using Canvas, not sure how well the SVG implementation works yet. Its certainly not optimised and has a few minor bugs, but it works well enough at the moment.

Do note that I've changed the project structure somewhat - I will bring it back into line at some stage in the future. You can see it at work in the cylinder example (same directory as the cube example)

My version ...

[D1plo1d]

Text would be an excellent addition that I could make use of as well. +1 for text feature request!

[mrdoob]

Is that 2d text (as in text that gets written in 2d but using the z position for scaling) or 3d text?

[jurjen]

Something along the lines of http://murfy.de/read/webgl-text-rendering would be awesome... I'm not sure if this is possible with Canvas, but it seems to be possible with webGL.

[D1plo1d]

mrdoob: good point, 3d text, ie. what jurjen is suggesting would probably be much more difficult in Canvas however it is what I had in mind as well.

[D1plo1d]

nm, my understanding of canvas transforms is limited and evidently this is probably fairly doable: http://stackoverflow.com/questions/2749474/how-do-i-skew-the-text-generated-by-filltext-for-the-canvas-tag-in-html5

[mrdoob]

Oh, but that's just a texture. You can do that already. Create a canvas, write some text on it. And use that with a BitmapUVMappingMaterial.

The video demo is pretty much just that: http://mrdoob.com/projects/three.js/examples/materials_video.html

In fact, it updates the texture every frame, you could update your canvas with a new text every frame too.

[mrdoob]

This is how you write text in a canvas:
http://www.robodesign.ro/coding/canvas-primer/20081208/example-text.html

[jurjen]

I've just done a very rough implementation that works with Plane() objects, basically it is a modification of the geometry_vr examples, but instead of loading an image, it draws text on a canvas, then uses canvas.getImageData as the source

function init() {
    text_placeholder = document.createElement( 'canvas' );
    text_placeholder.width = 128;
    text_placeholder.height = 128;

    var text_context = text_placeholder.getContext( '2d' );
    text_context.fillStyle = 'rgba( 200, 200, 200, 1 )';
    text_context.fillRect( 0, 0, text_placeholder.width, text_placeholder.height );
    ...
    plane = new THREE.Mesh(new Plane(200, 200, 2, 2), createText("hello", text_placeholder, text_context));                
    ....
}


function createText( sometext, canvas, context ) {
    var material = new THREE.BitmapUVMappingMaterial( canvas );
    var texture = new Image();
    context.font = 'bold 30px sans-serif';
    context.strokeText(sometext, 20, 50);
    texture.onload = function () {
      material.bitmap = this;
      render();
    }
    texture.src = context.getImageData(0, 0, 128, 128).data;

    return material;
}

I want to create another primitive (eg a modified Cube.js) that maps an image to each face, but haven't quite got my head around the geometry.vertices / geometry.uvs / geometry.faces interplay yet...

[mrdoob]

Exactly that :)

Yeah, I wanted to update the Cube pimitive too, but dealing with the subdivision and uvs stuff...

If you want to get it done quickly, you can do a cube in Blender (2.5) subdivide it, and export it to a Geometry class using the Blender export you'll find in the /utils folder :)

[D1plo1d]

jurjen your too fast for me - so I went away, learnt the canvas text api and made some text based on the particle primitive. I'm not sure if this will render any faster then the material bitmap method but it does also allow us to display text with the option of enabling the camera matrix (or not) and the camera projection matrix (or not) so that the text can scale (or not) and skew (or not) based on what you need atm.

Dono if this is still useful, next time I'll check the convo before launching into gedit for hours :)

code => http://github.com/TheOtherRob/three.js

[D1plo1d]

gah, just figured out what the _bboxRect does.. I'll have to go back and finish a few things on this but it's 90% there in my current commit. BBL with more (after sleep).

[Ovid]

This is beginning to look awesome (as for me, 2D text fits my needs, but I can understand that others need 3D).

You guys rock :)

[D1plo1d]

got the text scaling now.. anyone know how to use either transform or scale and rotate to skew the text like a 3d object?

screen shots: http://imgur.com/a/5EAVM/threejs_2d_text_demo

[mrdoob]

Oh man, what's with imgur and my connection? :/ ImageShack? TinyPic?

[D1plo1d]

i might be uploading way to big images.. i'll try scaling them down a bit next time.. anyways heres a tinypic: http://tinypic.com/view.php?pic=wjxwky&s=3

[mrdoob]

Looks good! Uhm. I think I'll merge it with the particle stuff. This is what I'm doing:

Until now a particle could be only represented as a circle. I'm moving it so the representation is defined by the material.

Now it's like this:

new THREE.Particle( new THREE.ColorFillMaterial( 0xff0000, 1 ) );

I'm changing it to this:

new THREE.Particle( new THREE.CircleParticleMaterial( 0xff0000, 1 ) );

CircleParticleMaterial could also specify borders and stuff. Having this like that, I was then going to do THREE.BitmapParticleMaterial() which is a Sprite / Billboard. And now I was thinking that in the same way it could also use THREE.TextParticleMaterial().

How does this sound?

[D1plo1d]

sounds good!

[D1plo1d]

on the topic of onClick, etc. events they should be doable as well but with some effort. The problem of clicking on objects (and dragging them, etc.) is called picking and is described fairly well if you google it.

To help get this started heres a snippet of the code I use (built on top of my own code and three.js) to click and drag move an object on the x,y plain at z=0 => http://gist.github.com/474839

if events integrated with jquery's bind that'd be awesome too :)

[mrdoob]

A friend was suggesting having bounding spheres for each object, so you would test the ray with the spheres which seems to be the simples operation, once you hit one then you can test the triangles.

Uhm, sounds exciting, I wish I could get into it just now :D

[D1plo1d]

I forgot to mention my fork has inversions for 4d matricies added to it which are sort of necessary for picking since you need to invert the camera matrix. Not really sure how to merge that fork back in to mr. doobs though so many commits later... help?

[mrdoob]

How does this look? :)
http://github.com/mrdoob/three.js/commit/010f5829e699df94267bdc0ca0bfdf731bb1ae02

[D1plo1d]

w00t! Shiny happy D1plo1d codes :D

I'll have to merge in the rest at some point (returning 'this' from all the imperative functions so functions can be strung together like in jquery: myMatrix.multiplySelf(a).transform(b) was probably one of the more useful things in every day use) ... anyways I'm going to release the three.js part of my project soon(ish) and hopefully that'll demo exactly what all this strange hackery did ;)

[mrdoob]

Looking forward! :D
Yeah, returning this is something to consider... I wonder if it has any side issues... ?

[sr3d]

Do you guys have any updates for text support? I'm playing with three.js and I was wondering if 3js can support 3D text.

[mrdoob]

Mhh... Could you do a quick drawing of what you want to achieve? That will speed up communication.

[sr3d]

I got Three.js to render 3D letters by exporting the letters from Blender 2.5 -- so basically it's like the rat demo. I haven't played with the materials yet so not sure how it'd all fit in. But I got the letters to render, pretty exciting!

[mrdoob]

\o/