Haxe => Three.js

1

Hi

I’m experimenting with Haxe and three.js

I’ve installed the library haxelib threejs

But, it returning error Scene not found
src/Main.hx:11: characters 19-24 : Type not found : Scene
src/Main.hx:13: characters 22-33 : Type not found : BoxGeometry
src/Main.hx:14: characters 18-22 : Type not found : Mesh
src/Main.hx:18: characters 24-34 : Type not found : PointLight
src/Main.hx:22: characters 20-37 : Type not found : PerspectiveCamera
src/Main.hx:26: characters 22-35 : Type not found : WebGLRenderer

What other libraries do I need to install?

import js.Browser;
import js.three.*;

class Main {
	public static function main() {
		var w = Browser.window.innerWidth;
		var h = Browser.window.innerHeight;

		var scene = new Scene();

		var geometry = new BoxGeometry(50, 50, 50, 1, 1, 1);
		var cube = new Mesh(geometry, new MeshLambertMaterial({color: 0xcc0000}));
		cube.position.set(0, 100, 0);
		scene.add(cube);

		var pointLight = new PointLight(0xffffff, 1, 0);
		pointLight.position.set(10, 50, 130);
		scene.add(pointLight);

		var camera = new PerspectiveCamera(70, w / h, 1, 1000);
		camera.position.z = 500;
		scene.add(camera);

		var renderer = new WebGLRenderer();
		renderer.setSize(w, h);

		Browser.document.body.appendChild(renderer.domElement);

		var update = null;
		update = function(f:Float):Bool {
			Browser.window.requestAnimationFrame(update);
			renderer.render(scene, camera);
			return true;
		}
		update(0);
	}
}

Thanks

2

Just installing it isn’t enough, you also need to include it in compilation… Did you add -lib threejs to your hxml file?

3

Thanks Gama11

No I did not. I added the -lib threejs

Below is the build.hxml file

-cp src
-dce full
-lib threejs

# Generate three.js javascript in the threejs 
-main Main
-js bin/threejs/Main.js

But, I started to get warming messages:
\HaxeToolkit\haxe\lib\threejs/84,0,0/js/three/Matrix.hx:10: characters 17-29 :
Warning : This typedef is deprecated in favor of js.lib.Float32Array

I’ll run the javascript to see if it works.

Thanks again

4

That’s just a deprecation warning that can safely be ignored. If you want, you can add -D no-deprecation-warnings to silence it.

5

Thanks Gama11

I’ll do that.

6

I’m using visual studio code the writhe the haxe/three.js code.

I’m just writing simple text to the screen.
var tst = new THREE.FontLoader();
var scene = new Scene();

I’m getting syntax errors related to three.js code.
or when I compile it returns the error THREE not found.

I’ved checked but can not find any three.js extension for Vscode.

AAny suggestion? Have any got this to work?

Thanks again.

7

That worked.

Thanks

8

Still getting the same error on Haxe V3.x.x

9

What error? “This typedef is deprecated in favor of js.lib.Float32Array”? That’s not possible, that warning didn’t even exist in Haxe 3 yet.

10

Thanks Gama11

Since I when back to Haxe V3.x.x. It can compile the three.js example.

// package js.three;
import js.Browser;
//import js.Browser.window;
//import js.Browser.document;
import js.three.*;
// import js.html.*;

// import js.Dom;
//import js.Lib;

class Main {
	public static function main() {
		var w = Browser.window.innerWidth;
		var h = Browser.window.innerHeight;

		var scene = new Scene();

		// var tst = new THREE.FontLoader();
		var tst2 = new THREE.geometry();

		var geometry = new BoxGeometry(50, 50, 50, 1, 1, 1);
		var cube = new Mesh(geometry, new MeshLambertMaterial({color: 0xcc0000}));
		cube.position.set(0, 100, 0);
		scene.add(cube);

		var pointLight = new PointLight(0xffffff, 1, 0);
		pointLight.position.set(10, 50, 130);
		scene.add(pointLight);

		var camera = new PerspectiveCamera(70, w / h, 1, 1000);
		camera.position.z = 500;
		scene.add(camera);

		var renderer = new WebGLRenderer();
		renderer.setSize(w, h);

		Browser.document.body.appendChild(renderer.domElement);

		var update = null;
		update = function(f:Float):Bool {
			Browser.window.requestAnimationFrame(update);
			renderer.render(scene, camera);
			return true;
		}
		update(0);
	}
}

But, when I want to start using other three.js syntax errors RG
you can not access the js package while targeting cross (for js.browser)

var tst = new THREE.FontLoader();

return an error THREE not found.

THanks

11

The cross target means you didn’t select a target for output generation, you’re probably missing the -js file.js.

The error is because some packages can only be used on some targets, and the js package can only be used on the js target.

12

Hi

Just trying to understand how extern works. the haxelib install threejs. Allows me to access three.js syntax via Haxe?

13

Externs allow you to call code from another language in haxe, if the targets match and you link (definition of this varies by target) with the library.
See Externs - Haxe - The Cross-platform Toolkit for more information on externs,
and Using external JavaScript libraries - Haxe - The Cross-platform Toolkit for more information on javascript externs.

haxelib install threejs downloads the threejs haxe library which contains externs for the js target giving you access to the threejs js library when you include it in your project (-lib threejs).
See Getting Started - Haxelib Documentation for more information on haxelib.

14

Great!

Thank for your time in replying to this.