three.js + haxe starter project

Last update: Nov 24, 2022

Overview

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/env

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

Why haxe not TypeScript?

Where TypeScript improves on JavaScript by adding types, haxe asks how could we build a better language from ECMAScript foundations, without maintaining the warts from js. On the surface syntactically it's similar to TS but differs in a few key ways:

metaprogrammig: you can mark functions for compile-time execution
there's only one way import code, simply import Module;
this only refers to the current type and does not change on context at runtime
it supports functional programming patterns inspired my meta languages like OCaml:
- everything is an expression
- pattern matching switch expression
significantly faster compile-times
zero-cost abstraction types with abstracts

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

College project done for the CG Artwork lecture in 2022. Used HTML for the indexes and mainly JavaScript (using to THREE.js). Ended with the final A grade (17.3 in scale grade).

CG Artwork Project 2022 This project was done by a group of 3 in 2022 with an educational purpose for the CG Artwork lecture in Instituto Superior Téc

Sep 19, 2022

Three.js boilerplate project configured with typescript, webpack and css/style loader, HTTPS local server, and a sample test codes !!

three.js-boilerplate Welcome, this is a three.js boilerplate project where you can clone it and start to work !!! Installed and Configured Items: Type

Jul 6, 2022

This fictive project was created to showcase my current skills using Three.js and GSAP.

Bike Demo Three.js This fictive project was created to showcase my current skills using Three.js and GSAP. It was inspired by the tutorial created by

Dec 29, 2022

Starter Project for Nuxt3 project with full tailwind3 implementation and also docker & docker-compose supprt

Nuxt 3 & Tailwind 3 Starter Including tailwindConfig and Tailwind Config Viewer! Be patient, this is just a Beta version of Nuxt3. For Nuxt3 Installat

Nov 10, 2022

This project is based on my nodejs starter kit. Simple CRUD project.

nodejs-crud-project Author - Akhil Sharma This project uses the nodeJS-starter project on my github. Just a demo to show you could build any project w

Dec 16, 2022

🌏 A Declarative 3D Globe Data Visualization Library built with Three.js

Gio.js English | 中文 React Version: react-giojs Wechat minigame: wechat usage Gio.js is an open source library for web 3D globe data visualization buil

Dec 29, 2022

🇨🇭 A React renderer for Three.js

react-three-fiber react-three-fiber is a React renderer for threejs. npm install three @react-three/fiber Why? Build your scene declaratively with re-

Jan 9, 2023

CSS 3D renderer for Three.js.

CSS3D.js by Steven Wittens CSS 3D renderer for Three.js Note: this library is mostly obsolete now that Three.js has its own CSS 3D renderer which is i

Aug 27, 2022

This is a Vue.js web application for streaming radio stations from Somafm.com. This app uses the public SomaFM JSON channels API endpoint to pull in a list of stations and makes it easy to switch between stations. This app also uses Three.js and the HTML5 Web Audio Context API to sample audio data and create a visualizer effect for the selected station.

SomaFM Music Player Web-App This is a Vue.js web application for streaming radio stations from Somafm.com. This app uses the public SomaFM JSON channe

Dec 27, 2022

Javascript game using Three.JS and WebGL, inspired by Geometry Dash, the Dinosaur Game, and a music video by our graphics professor (2021)

jumpy-abe By Sophia Oguri ([email protected]), Luke Kratsios ([email protected]), Isha Chirimar ([email protected]), Jacob Hocking ([email protected]

Dec 21, 2021

Interactive 3D plotting with a simple function call using Three.js

About Generate interactive 3d plots with a simple function call. Function returns a Three.js scene which can be customized as needed. Basic function c

Oct 20, 2022

Comments

Is there a way cast to generic type without knowing T？
I'm practicing the offical case code, read fbx model and do something with it

object.traverse(function (child) { if ((child as THREE.Mesh).isMesh) { // do something } })

where in haxe THREE.Mesh is defined as extern class Mesh<TGeometry, TMaterial> extends Object3D<Event> I’cant just call(cast child: Mesh).isMesh, there will be “no enough parameters” error, what should i do?
opened by FlowSand 4
Compilation error occurs when using this template library to directly apply the official case code
Recently, I am using haxe+electron to develop an app. I need to use the Threejs library for 3D model rendering, so I noticed the dts2hx solution. I downloaded this template library and modified some code for testing. According to the official example (written in js), I found that the calling method of some official cases is not feasible in haxe, for example：

var dirLight = new DirectionalLight(0xffffffff); dirLight.shadow.camera.top = -5; dirLight.shadow.camera.left = -5;

The camera member in LightShadow is Camera type, while the top and left fields are defined in the OrthographicCamera class, which extends from camera. It cannot be called directly in haxe like js. Is there any other way to call it?
opened by FlowSand 2
Some of class was not created in src of three.js

three.js v 135

Some of class was not created in src of three.js

ShapeGeometry.hx

I can find ShapeGeometry.d.ts in@types\three\src\geometries\ShapeGeometry.d.ts

opened by sonygod 1
InteractionEventsManager not work for the other renderer?

InteractionEventsManager not work for the other renderer?

I copy your template some code to do that and find it only works for one render.

haxe-threejs-template.zip

opened by sonygod 3

three.js + haxe starter project

Related tags

Overview

Haxe + three.js starter project

Building and running

Editing

Project Overview

Why haxe not TypeScript?

You might also like...

Comments

Owner

George Corney

A helper to send whatsapp without scheduling a contact, the project developed using TDD with Jest, Javascript classes, BotstrapVue and SweetAlert.

An example project using Node.js to run some common tasks including directory backup

three.js examples. if you are first in learning three.js , this will give you much help.

Text Engraving & Extrusion demo based on Three.js is implemented with Typescript and webpack5. Used THREE-CSGMesh as the core tech to achieve engraving and extrusion results

GitHub starter project link: https://github.com/buildspace/waveportal-starter-project

NFT Game Starter Project: https://github.com/buildspace/buildspace-nft-game-starter

Starter-gatsby-blog - Gatsby starter for a Contentful project from the community.

Node-cli-starter - Basic starter kit for building Node CLI applications with TypeScript.

Simple Three js game project

project using three.js and mediapipe