JohnnyDevNull

Angular + BabylonJS and Angular + ThreeJS Template

Recommended Posts

Dear ladies and gentleman,

for playing around with some web gl rendering i started playing with threeJS a few years ago, but wanted also to get a look in babylonJS.

So here are two angular template projects which i want to share with all of you who also want to play something around with or maybe to built a real app from with it:

Angluar 7 + BabylonJS

https://github.com/JohnnyDevNull/ng-babylon-template

Angular 7 + ThreeJS

https://github.com/JohnnyDevNull/ng-three-template

Both have the example code running.

 

Have some fun!

Share this post


Link to post
Share on other sites

Hello, thank you for your job!

I have a little question. I want to add the OrbitControl:

import * as THREE from 'three';

export class EngineService
{
    // ...
    private controls: THREE.OrbitControls;
    // ...

    createScene(elementId: string): void
    {
        // ...
        this.controls = new THREE.OrbitControls(this.camera);
        // ...
    }

    render()
    {
        // ...
        this.controls.update();
        // ...
    }
}

I see the warning message in the VSCode console:

Quote

WARNING in ./src/app/engine/engine.service.ts
19:28-47 "export 'OrbitControls' (imported as 'THREE') was not found in 'three

And I see the error message in the browser console:

Quote

AppComponent.html:1 ERROR TypeError: three__WEBPACK_IMPORTED_MODULE_0__.OrbitControls is not a constructor
    at EngineService.push../src/app/engine/engine.service.ts.EngineService.createScene (engine.service.ts:35)

 

Share this post


Link to post
Share on other sites

I think OrbitControl must be imported seperate, i will take a look at...

Edit:

Ok this looks strange... the problem is, that many extensions of ThreeJS are not modules.

Here at the last post should be a workaround: https://github.com/mrdoob/three.js/issues/9562

I will test it and come back later...

Share this post


Link to post
Share on other sites

Hello folks... Check out my BabylonJS Angular Component: It provides a lightweight Angular 8 component for managing the BabylonJS engine, light, and camera. 

Screenshot_2020-02-10_15-30-09.png

Share this post


Link to post
Share on other sites

Hi there,

I built a small project using your threejs template as seed. And it works really nicely on "ng serve", but after build, the resulting app doesn't seem to load models and lights correctly,

like if the build process messed things up with threejs or something.

Did you ever encounter this?

 

 

afterBuild.jpeg

duringDevelopment.jpeg

Share this post


Link to post
Share on other sites

it was a stupid mistake on a texture variable name that was wrong, and on local it defaulted to an existing texture so it wasn't noticeable and on production the default path was not set, so the error was visible... my bad, sorry.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.