Events, Text and lines? about three.js HOT 32 CLOSED

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

from three.js.

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

from three.js.

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 ...

from three.js.

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

from three.js.

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

from three.js.

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.

from three.js.

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.

from three.js.

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

from three.js.

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.

from three.js.

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

from three.js.

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...

from three.js.

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 :)

from three.js.

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

from three.js.

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).

from three.js.

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 :)

from three.js.

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

from three.js.

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

from three.js.

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

from three.js.

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?

from three.js.

sounds good!

from three.js.

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 :)

from three.js.

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

from three.js.

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?

from three.js.

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

from three.js.

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 ;)

from three.js.

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

from three.js.

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.

from three.js.

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

from three.js.

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!

from three.js.

\o/

from three.js.

Added mouse events in the mindlapse fork. The example page is examples/hci_clickcube.html which shows a couple of cubes and each face of the cube has an onclick event. Please review!

from three.js.

6 months later we can finally close this issue.
Lines: http://mrdoob.github.com/three.js/examples/lines_test.html THREE.Line is your friend
Text: http://xplsv.com/prods/demos/xplsv_orsotheysay/ Basically writing the text in a canvas and using it as THREE.MeshBitmapMaterial or THREE.ParticleBitmapMaterial.
Events: http://mrdoob.github.com/three.js/examples/interactive_cubes.html Not exactly events, but it can easily be built using that as base.

from three.js.