About Coding style with Three js + type script

Discussion
,
1

Hi, I’m new person in three js and also front-end.

I’d have only experience with embeded system coding with C language. Anyway, I have serious question that, “Can I code with this style”

Let me show part of my work. I made three js content viewer and editor in this way.

this is my code dir looks like

...
├── three    
      ├── toolbox
                  ├── basicGeometry.ts
                  ├── ...
                  ├── ...
      ├── ...
      └── editor.js
...

this is part of main file editor.js


export default function editor() {
  const scene = new THREE.Scene();
  let objectList = [];
 ...
 ...
  const cursor = new editorCusor(scene, editorcamera, transformController, objectList);
...
 ...
  /*******************************************************************************/
  /*                               init editor                                   */
  /*******************************************************************************/
  function editor_init() {
   ...
   ...
    basicGeometryInit(scene, objectList, cursor);
    ...

  ...
}

this is part of file basicGeometry.ts

...
let scene: THREE.Scene, objectList: THREE.Object3D[], cursor: editorCusor;

const redoList: THREE.Object3D[] = [];

export function basicGeometryInit(Scene: THREE.Scene, ObjectList: THREE.Object3D[], Cursor: editorCusor) {
  scene = Scene;
  objectList = ObjectList;
  cursor = Cursor;
}

export function basicCubeGeometry() {
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshStandardMaterial();
  material.name = "__tozi_editor_customed";
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  cursor.snapWithObject(mesh);
  addUndoFunct

...

As you can see I declare scene in main file and give as parameter in “init function”, and then init function save the “scene” value in global variable.

I execute basicCubeGeometry() function with any parameter, and I think it quite easy to use, but All my colleague said, using global variable is very unusual and inefficient in front-end develop.

But my colleague is not expert in three js but only front-end.

I want to find out, is it really inefficient to use global variable in three js coding style and what is the alternatives of my code style should I use OOP?

I think init → do function style with global variable might be usefull, but I’m also afraid of memory loss.

I think global variable in my code is working as a pointer, then is it not actually using memory?

Please give me advise to make large project with three js!

2

Global variables are discouraged in JavaScript development only because they tend to make it easy to write code that is harder for the developer (you) to maintain. Each global can be accessed or changed anywhere, which can lead to “spaghetti code” that is difficult to debug. There is no problem with efficiency, memory, or performance.

In general, using some kind of encapsulation is a good idea. See Modules | Eloquent JavaScript for more on this. But if you find that a few globals are helpful in a small project, I wouldn’t worry much about that.

1 Like
3

Thanks for Great advise, Actually I Firstly worried about the performance or memory. But I think I should also worry about the co-work too.
I’ll study encapsulation that you’ve shown.

:slight_smile: Have a nice day!