JS console does not see newly added Object3d

Questions
1

i add a planeGeometry to the scene from the start.

var planeGeometry = new THREE.PlaneGeometry( 1, 2 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( planeGeometry, material );
scene.add( plane );

then i render it

  var animate = function () {
      requestAnimationFrame( animate );
		
      renderer.render(scene, camera);
 };
 animate();

everythinng works fine till here but now i want to wirte my own function “createPoints();” which creates a point for every vertex in a given geometry.

var createPoint = function ( geo ) {
	
	    for( var i = 0; i < geo.vertices.length; i++){
		    
			var pointGeometry = new THREE.Geometry();
		    pointGeometry.vertices.push( new THREE.Vector3( geo.vertices[i].x, geo.vertices[i].y, geo.vertices[i].z ) );
			
			var pointMaterial = new THREE.PointsMaterial( { color: 0x888888, size: 0.15 } );

            var pointOnGeo = new THREE.Points( pointGeometry, pointMaterial );

            scene.add( pointOnGeo );
		}
	};

and i call this function from JS console -createPoint( planeGeometry )- and it does it job very well . i can see points on the scene. however when i type “pointOnGeo” in console it throws this error:

Uncaught ReferenceError: pointOnGeo is not defined

what could be the problem?

2

This is because pointOnGeo is a local variable. It does not exist in the global context. I am not sure what you want to do exactly, but if you want to just see it appear in the global context delete the “var” in front of it. However for each iteration of your for loop, that variable is going to be overwritten. The problem is coming down to how javascript variables work so it is hard to give you a good answer unless I know what you are trying to do.

3

i deleted “var” and it indeed worked. i didn’t know we can create a variale without “var” , “let” or “const” before it

4

Yes, so those variables each do something. And it is in good form to use them. I did not really propose my solution as a fix to the problem. More to just shed light on what is going on. By removing the “var” term you made the variable a global variable. in the loop it keeps stomping on the existing value. By having a var in front, you limited the scope of the variable. Let does something similar to var, while const has some optimization properties. When you open the console and type in a variable name it is looking at the global scope so if your variable is defined at the function level, then it will not exist at the global level.

5

how can i give a different name for a variable at every iteration of the loop? can i get an idea for that?

like:
pointongeo1 
pointongeo2
pointongeo3
......
6

Why not make an array? like pointsOnGeo = []
then append the points to the array?

7

I think you would greatly benefit from the understanding of scopes in Javascript. Understanding this will help you immensely when writing code and write code more efficiently.

I’m sure you know how to use Google, but I’ll try to give a very brief example anyway.

<script>

// The following variable is declared directly in the <script> tag, also known as the "global scope".
var i_am_accessible_via_console = "Hello World!";

console.log(i_am_accessible_via_console); // will print: Hello World!

function myFunction () {
    // Since we delcare this inside a function, the variable is not accessible outside of it, but is inside any inner scope.
    var i_am_inside_a_function = "I am 'private'".

    console.log(i_am_inside_a_function); // prints: I am 'private'

    // We can still access the global variable we declared before.
    console.log(i_am_accessible_via_console); // will print: Hello World!

    // Let's go inside another scope within the scope of myFunction...
    function anotherScope () {
        // We can access both variables here.
        // So variable declarations always go from parents to children, but never the other way around.
        var awesome_variable = 42;
    }

    console.log(awesome_variable); // undefined
}

// We're now leaving the scope of "myFunction", so...
console.log(i_am_inside_a_function); // is undefined
console.log(awesome_variable); // is also undefined.
</script>

So, the gist of it is to remember that variables always go from the parent scopes to child scopes, but never from children back to their parents.

Also, something I tend to see a lot of people struggle with during my day job:

var a = 42;

function someFunction () {
    var a = 13;
}

someFunction();
console.log(a); // Will print 42

// but...
function anotherFunction () {
    a = 13;
}

anotherFunction();
console.log(a); // Will print 13
1 Like