three.js objects disappear

Question

I haven't got a lot of experience with 3D Frameworks - but was playing around with three.js and came across something that (to me) is a bit odd and I wondered why this happened. I am rendering the number "1" on screen with the following code.

shapes = THREE.FontUtils.generateShapes("1", {
    font: "helvetiker",
    weight: "normal",
    size: 0.25
});

geom = new THREE.ShapeGeometry(shapes);
mat = new THREE.MeshBasicMaterial();
mesh = new THREE.Mesh(geom, mat);
mesh.position.set(1.5, +2.5, 0);
scene.add(mesh);

Now I also implemented camera movement, so I can rotate and move along the z/x/y axis. When I move the camera past the number "1", and turn the camera 180° around - the number is gone. So the camera is behind it but I did change the point the camera is facing - yet the object is gone.

[Well, if I put the camera sideways and slide past it, it also stops rendering. So I'm 100% sure it's not rendered].

I was wondering two things. 1) Is this the normal approach in 3D? To not render things that lie behind you on the Z-axis (even though the camera is turned.) 2) I'm assuming it's not the standard, as it surely isn't the expected behaviour. So how would I, in Three.JS, have the object rendered when the camera faces it, even though the camera is behind it.

Just an explanation would already be a huge help, but if you can provide a code snippet it would be even better. Thanks!

Answer 1

I solved it!

A friend of mine told me it's pretty standard if the material is not set to doublesided. (Or I could make a billboard out of it). But in code I had to add

 mat.side = Three.DoubleSide;

Sorry guys for bothering you with this - it was probably quite basic but I'll leave it on just in case someone else encounters this problem!