Three.js starter project

1

Hey all!

I’ve been using haxe with three.js for professional work for a couple years now and I love it. I thought I’d share my base project in case it’s useful to anyone else:

github.com/haxiomic/haxe-threejs-template

Screenshot 2022-01-10 at 15.43.34

Here’s the README

Haxe Three.js starter project

This is a batteries-included template project using three.js with the haxe language. Main.hx sets up a physically based rendering pipeline and some optimized HDR lighting environments are include in assets/

See live

Building and running

  • Download haxe 4.2

  • cd into this directory and install node modules with npm install

  • Start an live server with npm start

  • run haxe build.hxml to recompile the project into bin/

Editing

VSCode has great haxe IDE support with the haxe extension

I recommend installing the trigger task on save extension – this will trigger the project to recompile when you save haxe files, which is helpful for live editing

Project Overview

We can interact with three.js through externs generated from the typescript type definitions using the dts2hx tool. The generated externs are included in this repository in the .haxelib directory. To regenerate these files you can call npm run externs

three.js is included as a module by using require(), since browsers don’t have require we use a bundler (esbuild) so we generate a single file – this is called by build.hxml. Alternatively we could have used three.js globally via a script tag if we generated the externs with --global

A haxe library, three-toolkit is included, which provides useful utilities for working with three.js and haxe, including

  • Post processing pipeline tools

  • A dat.gui extension: DevUI

  • CustomPhysicalMaterial for making pbr materials with custom shaders

  • Objects such as a soft mirror plane

  • Spring physics animation tooling

Have fun :D, feel free to open issues if you have questions

24 Likes
2

thank you for your great tool dts2hx. I have a project use dts2hx +three.js +react +mui now ,and I got

some small suggestions here?

  1. support direct property instead of ts.AnyOf2 or 3 or 4… . like native js

    mesh.geometry.vertices.push(new Vector3(1,2,3),new Vector3(4,5,6);//etc.

2.add some help tool like array.push(…args);

  1. consider dts2hx support react framework,vue?

4.support gens lib.right now everything seems ok .

  1. it’s better to support the overload feature.
3

:open_mouth:

this is ginormous!

even an entire typescript binding generator? :open_mouth:

i stumbled upon this after you linked me MathVector class :smiley:

1 Like