properly convert function properties, plus geometries examples

Author: abelnation

examples/Geometries.ipynb

@@ -319,7 +319,7 @@ _.extend(JavascriptWrapper.prototype, {
             var result = [ '{' ];
 
             result = result.concat(_.keys(this.config.properties).map(function(propName) {
-                return '                ' + propName + ": this.get('" + propName + "'),";
+                return '                ' + propName + ": " + this.getModelToThreeGetter(propName) + ',';
             }, this))
 
             result.push('            }');
@@ -330,7 +330,7 @@ _.extend(JavascriptWrapper.prototype, {
             if (propName === 'parameters') {
                 return getConstructorParametersObject.bind(this)().join('\n'); 
             } else {
-                return "this.get('" + propName + "')";
+                return this.getModelToThreeGetter(propName);
             }
         }, this);
 
@@ -362,6 +362,16 @@ _.extend(JavascriptWrapper.prototype, {
 
     },
 
+    getModelToThreeGetter: function(propName) {
+        var prop = this.config.properties[propName];
+        var converter = prop.propToValueConverterFn();
+        if (converter) {
+            return "this." + converter + "(this.get('" + propName + "'))";
+        } else {
+            return "this.get('" + propName + "')";
+        }
+    },
+
     getOutputFilename: function() {
         return this.jsAutoDestPath;
     },

js/scripts/generate-wrappers.js

@@ -5,6 +5,9 @@ _.extend(BaseType.prototype, {
     getJSPropertyValue: function() {
         return JSON.stringify(this.defaultValue);
     },
+    propToValueConverterFn: function() {
+        return null;
+    },
 })
 
 function ThreeType(typeName) {
@@ -174,6 +177,9 @@ _.extend(FunctionType.prototype, BaseType.prototype, {
     getJSPropertyValue: function() {
         return this.defaultValue.toString();
     },
+    propToValueConverterFn: function() {
+        return 'convertFunctionModelToThree';
+    },
 });
 
 function Vector2(x, y) {
@@ -186,6 +192,9 @@ _.extend(Vector2.prototype, BaseType.prototype, {
     getPropArrayName: function() {
         return 'vector_properties';
     },
+    propToValueConverterFn: function() {
+        return 'convertVectorModelToThree';
+    },
 });
 
 function Vector3(x, y, z) {
@@ -198,6 +207,9 @@ _.extend(Vector3.prototype, BaseType.prototype, {
     getPropArrayName: function() {
         return 'vector_properties';
     },
+    propToValueConverterFn: function() {
+        return 'convertVectorModelToThree';
+    },
 });
 
 function Vector4(x, y, z, w) {
@@ -210,6 +222,9 @@ _.extend(Vector4.prototype, BaseType.prototype, {
     getPropArrayName: function() {
         return 'vector_properties';
     },
+    propToValueConverterFn: function() {
+        return 'convertVectorModelToThree';
+    },
 });
 
 function Matrix3() {
@@ -227,6 +242,9 @@ _.extend(Matrix3.prototype, BaseType.prototype, {
     getPropArrayName: function() {
         return 'vector_properties';
     },
+    propToValueConverterFn: function() {
+        return 'convertMatrixModelToThree';
+    },
 });
 
 function Matrix4() {
@@ -244,6 +262,9 @@ _.extend(Matrix4.prototype, BaseType.prototype, {
     getPropArrayName: function() {
         return 'vector_properties';
     },
+    propToValueConverterFn: function() {
+        return 'convertMatrixModelToThree';
+    },
 });
 
 

js/scripts/prop-types.js

@@ -1079,10 +1079,12 @@ module.exports = {
         constructorArgs: [ 'vertices', 'faces', 'radius', 'detail' ],
         properties: {
             vertices: new Types.Array(),
-            faces:    new Types.Array(),
+            indices:  new Types.Array(),
             radius:   new Types.Float(1.0),
             detail:   new Types.Float(0.0),
+            faces:    new Types.Array(),
         },
+        propsDefinedByThree: [ 'faces' ],
     },
     RingBufferGeometry: {
         relativePath: './extras/geometries/RingBufferGeometry',

js/scripts/three-class-config.js

@@ -43,7 +43,7 @@ var ThreeView = widgets.DOMWidgetView.extend({
         this.acquireRenderer();
 
         this.camera = new THREE.PerspectiveCamera(60, 1.0); // aspect is updated by this.updateSize()
-        this.camera.position.set(0, 0, 50);
+        this.camera.position.set(-40, 40, 40);
         this.camera.lookAt(new THREE.Vector3(0,0,0));
 
         this.updateSize();
@@ -745,6 +745,36 @@ var ThreeModel = widgets.DOMWidgetModel.extend({
     syncVectorToModel: function(propName) {
         this.set(propName, this.obj[propName].toArray());
     },
+
+    convertVectorModelToThree: function(v) {
+        var result;
+        switch(v.length) {
+            case 2: result = new THREE.Vector2(); break;
+            case 3: result = new THREE.Vector3(); break;
+            case 4: result = new THREE.Vector4(); break;
+            default:
+                throw new Error('model vector has invalid length: ' + v.length); 
+        }
+        result.fromArray(v);
+        return result;
+    },
+
+    convertMatrixModelToThree: function(m) {
+        var result;
+        switch(m.length) {
+            case 9: result = new THREE.Matrix3(); break;
+            case 16: result = new THREE.Matrix4(); break;
+            default:
+                throw new Error('model matrix has invalid length: ' + m.length);
+        }
+        result.fromArray(m);
+        return result;
+    },
+
+    convertFunctionModelToThree: function(fnStr) {
+        eval('var fn = ' + fnStr);
+        return fn;
+    },
 
 }, {
 

js/src/_base/Three.js

@@ -1,9 +1,10 @@
 //
 // This file auto-generated with generate-wrappers.js
-// Date: Tue Oct 18 2016 14:57:28 GMT-0700 (PDT)
+// Date: Thu Oct 20 2016 12:05:53 GMT-0700 (PDT)
 //
 // Load all three.js python wrappers
 var loadedModules = [
+    require('./RendererPool.js'),
     require('./Three.js'),
     require('./enums.js'),
 ];

js/src/_base/index.js

@@ -1,6 +1,6 @@
 //
 // This file auto-generated with generate-wrappers.js
-// Date: Tue Oct 18 2016 14:57:27 GMT-0700 (PDT)
+// Date: Thu Oct 20 2016 12:05:52 GMT-0700 (PDT)
 //
 
 var _ = require('underscore');

js/src/animation/AnimationClip.autogen.js

@@ -1,6 +1,6 @@
 //
 // This file auto-generated with generate-wrappers.js
-// Date: Tue Oct 18 2016 14:57:27 GMT-0700 (PDT)
+// Date: Thu Oct 20 2016 12:05:52 GMT-0700 (PDT)
 //
 
 var _ = require('underscore');

js/src/animation/AnimationMixer.autogen.js

@@ -1,6 +1,6 @@
 //
 // This file auto-generated with generate-wrappers.js
-// Date: Tue Oct 18 2016 14:57:27 GMT-0700 (PDT)
+// Date: Thu Oct 20 2016 12:05:52 GMT-0700 (PDT)
 //
 
 var _ = require('underscore');

js/src/animation/AnimationObjectGroup.autogen.js

@@ -1,6 +1,6 @@
 //
 // This file auto-generated with generate-wrappers.js
-// Date: Tue Oct 18 2016 14:57:27 GMT-0700 (PDT)
+// Date: Thu Oct 20 2016 12:05:52 GMT-0700 (PDT)
 //
 
 var _ = require('underscore');