THREE.JS Object Oriented Structure Problems

Question

I am making a THREE.JS game for one of my classes. I am very keen to learn and understand THREE.JS so I followed some of their tutorials and learnt Javascript. I am more of a C# and C++ guy, so the following question may just the result of the lack of my understanding of Javascript.

I wrote the following Object oriented structure for the game.

ObjectEnum = {
            Cube: 0,
            Sphere: 1,
            Cylinder: 2
        }



        Transform = function () {
            var position, rotation, scale;
        }

        function TransformInit(position, rotation, scale) {
            var t = new Transform();
            t.position = position;
            t.rotation = rotation;
            t.scale = scale;
            return t;
        }

        GameObject = function () {
            var mesh, geometry, material, transform;
            var GameObject = this;
            this.init = function (ObjectEnumType, materialShader, transformVector3) {
                if (ObjectEnumType == 0) {
                    geometry = new THREE.BoxGeometry(transformVector3.scale);
                }
                transform = transformVector3;
                material = materialShader;
                mesh = new THREE.Mesh(geometry, material);
            }
            this.getMesh = function () {
                return mesh;
            }
        }

        var go = new GameObject();
        this.onload = function () {
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
            var t = TransformInit(new THREE.Vector3(10, 0, 0), new THREE.Vector3(10, 0, 0), new THREE.Vector3(1, 1, 1));

            go.init(ObjectEnum.Cube, new THREE.MeshPhongMaterial({
                specular: '#a9fcff',
                color: '#00abb1',
                emissive: '#006063',
                shininess: 100
            }), t);
            var w = go.getMesh();
            scene.add(w);
            camera.position.z = 5;
            console.log(t);
            var render = function () {
                requestAnimationFrame(render);
                renderer.render(scene, camera);
            };
            render();
        }

Apparently, it doesn't render anything on the screen. I used a Debugger, found out that everything has non zero values, no console errors, all THREE.JS scripts are loaded before this one, things are fine in the editor, but nothing on the screen. When, I change it to an simple procedural structure, it works. Is there a problem in my code or is there a JS concept I am missing in the implementation ?

Followed tutorials from here http://threejs.org/docs/#Manual/Introduction/Creating_a_scene http://blog.teamtreehouse.com/the-beginners-guide-to-three-js

Doesn't work on IE11, Chrome, Firefox!

Answer 1

1. you have passed incorrect argument to BoxGeometry. transformVector3 is Vector3 so you should write:

   geometry = new THREE.BoxGeometry(transformVector3.scale.x, transformVector3.scale.y, transformVector3.scale.z );

2. position is not assigned to your mesh:

     transform = transformVector3; material = materialShader; mesh = new THREE.Mesh(geometry, material); //here mesh.position.copy(transform.position);