Trying to get ThreeJS working with Kotlin JS project

1

I have been trying to get Three.js to work with my JS Kotlin project. so far I'm just trying to get the getting started project to run.

ThreeJS Getting Started = http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene
My Project = https://bitbucket.org/ClassicThunder/kotlin_threejs/src

Below is the code that is generate by my project.

(function (Kotlin) {
  ‘use strict’;
  var _ = Kotlin.defineRootPackage(null, /** @lends _ / {
  org: Kotlin.definePackage(null, /* @lends _.org / {
  sample: Kotlin.definePackage(null, /* @lends _.org.sample */ {
  main: function (args) {
          var scene = THREE.Scene();
          var camera = THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
          var renderer = THREE.WebGLRenderer();
          renderer.setSize(window.innerWidth, window.innerHeight);
          window.document.body.appendChild(renderer.domElement);
          var geometry = THREE.BoxGeometry(1, 1, 1);
          var material = THREE.MeshBasicMaterial(THREE.Color(‘0x00ff00’));
          var cube = THREE.Mesh(geometry, material);
          scene.add(cube);
  }
  })
  })
  });
  Kotlin.defineModule(‘basic’, );
  .org.sample.main();
}(Kotlin));’

When I run this it fails on the “var camera = THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);” line.

    1. Uncaught TypeError: Cannot redefine property: position three.js:7156
      1. THREE.Object3Dthree.js:7156
      2. THREE.Camerathree.js:10566
      3. THREE.PerspectiveCamerathree.js:10740
      4. Kotlin.defineRootPackage.org.Kotlin.definePackage.sample.Kotlin.definePackage.mainbasic.js:8
      5. (anonymous function)basic.js:21
      6. (anonymous function)


The sample project run fine though. Below seems to be the difference. On the left (or on the top) is the Kotlin project and as you can see this Object3D already exists from when the Scene was created. On the right (or bottom) is the downloaded sample code. Here a new Object3D is being created. I assume this is because of how I set up things in this file; however I have been unable to fix the issue. Any help setting up the interop code would be greatly appreciated.

/uploads/kotlinlang/original/1X/8e7a36917e320dba2b37e4bf846df2bd4f57df01.png
/uploads/kotlinlang/original/1X/8e7a36917e320dba2b37e4bf846df2bd4f57df01.png723×553 30.5 KB

/uploads/kotlinlang/original/1X/29515d5d2abed65520b0cd181e1b4908890dc7b7.png
/uploads/kotlinlang/original/1X/29515d5d2abed65520b0cd181e1b4908890dc7b7.png721×350 22.7 KB

2

Probably the problem is missed new before THREE.Scene and other. Unfortunately I can't see your code("Access denied") for check it.

3

Sorry, I forgot to make the repo public. Yes that seems to be the issue. What do I need to change so that the new keyword is added before the function call?

4

For that You should declare them as class.

5

One of possible solutions:

native
public object THREE {
  native(“THREE.Scene”) // hack for KT-4298
  public class Scene() {
  // members
  }
  native(“THREE.Color”)
  public fun Color(hexString: String) {
  // members
  }
}

6

Thanks for the help, I have the getting started project running.

The ‘native(“THREE.Scene”)’ bit is very usefull to learn; no need to nest the classes anymore. Am I correct in asuuming its a simple replace for the class name for use when converted to JS?