A few questions about THREE.js

Questions
,
1

Hello all. I am becoming more familiar with THREE.js but don’t understand a few things.

Camera position: after many tutorials I have noticed that the camera.position.z seems to change greatly. Is there a standard number that should get used? Is there a mathematical equation for this? Does it really matter at all if I set it to 10 or 1000? I have noticed some tutorial set it low and make the geometry with small numbers and others zoom way out and make the geometries with larger numbers.

PerspectiveCamera fov: Again is there a standard for this? Is there other considerations I should be thinking about when choosing this number?

I’m using the Codepen below to practice and have colored each face of the geometry by calling out each face individually. Is there a way to shorten this?

 //front
  cubeGeo.faces[1].color =
  cubeGeo.faces[2].color =
  cubeGeo.faces[3].color =
  cubeGeo.faces[4].color =
  cubeGeo.faces[5].color =
  new THREE.Color('red');
  //back
   cubeGeo.faces[10].color =
  cubeGeo.faces[11].color =
  cubeGeo.faces[12].color =
  cubeGeo.faces[13].color =
  cubeGeo.faces[14].color =
  new THREE.Color('red');
  //front
  cubeGeo.faces[6].color =
  cubeGeo.faces[7].color =
  cubeGeo.faces[8].color =
  cubeGeo.faces[9].color =
  cubeGeo.faces[0].color =
  new THREE.Color('blue');
  //back
  cubeGeo.faces[15].color =
  cubeGeo.faces[16].color =
  cubeGeo.faces[17].color =
  cubeGeo.faces[18].color =
  cubeGeo.faces[19].color =
  new THREE.Color('blue');

Glow effect: Is the only way to create a glow effect to use shaders? Is there a well know or commonly used shader for this if so? Anyone have a good tutorial on using shaders in THREE.js. I have never used them before.

Thank you!

2

Not all tutorials make the scaling of their scene right. Normally, you always want to have units in mind such that 1 world unit corresponds to 1 meter. 3D objects should be designed according to this definition. Positioning the camera in 3D space is then a very natural process.

Picking a proper fov is also a matter of design since you can create different impressions with different values, see Generalized threejs model Viewer - #3 by mjurczyk. In three.js demos, most values are between 40 and 70.

Have you considered to work with BufferGeoemtry? The code will not necessarily be more compact but you will save some memory and processing overhead when the geometry is used for the first time (since all instances of Geometry have to be converted to BufferGeoemtry).

Post-processing is the proper way to produce glow or bloom effects.

https://threejs.org/examples/webgl_postprocessing_unreal_bloom

However, you can implement this without FX by duplicating the object that should receive the glow. The new object gets a special transparent material that produces a similar but very low-quality effect. An example for this approach is the following demo (be aware, it uses a legacy version of three.js): Shader - Glow (Three.js)

1 Like
3

Thank you @Mugen87. I’ll do some research on 3D sizing and that 1m rule.

That first unreal bloom example is spectacular. That’s exactly what I need to learn how to do. The second example is a bit too fake looking.

I haven’t looked into BufferGeometry yet. I had read somewhere the Geometry is easier to use so I started there. I will however see if I can covert this to a bufferGeometry for the sake of practicing and learning.
EDIT: Would doing this allow for an easier method of Coloring the faces as I have above?

4

If you are new to BufferGeometry, it might be more complicated at the beginning. But it’s the most efficient method to setup geometry data.

1 Like