johnnydevnull / ng-three-template Goto Github PK

Hi,

I will try to explain this weird problem. Did you ever used angular router?

When i change the route and come back to engine component page the animation getting faster and faster everytime i change the path and come back. When i change the url manually its reset its speed.

Any idea what could be the reason?

Best regards

Hi there,

seems like there is a problem with typescript v3.8.3. Gettings following error when trying to serve the template:

ERROR in TypeError: Cannot read property 'flags' of undefined at resolveAlias (C:\Users\v.hartig\Documents\Projekte\ng-three-template\node_modules\typescript\lib\typescript.js:36513:37) at checkAliasSymbol (C:\Users\v.hartig\Documents\Projekte\ng-three-template\node_modules\typescript\lib\typescript.js:64502:26) at checkImportBinding (C:\Users\v.hartig\Documents\Projekte\ng-three-template\node_modules\typescript\lib\typescript.js:64534:13) at checkImportDeclaration (C:\Users\v.hartig\Documents\Projekte\ng-three-template\node_modules\typescript\lib\typescript.js:64552:29) at checkSourceElementWorker (C:\Users\v.hartig\Documents\Projekte\ng-three-template\node_modules\typescript\lib\typescript.js:64961:28) at checkSourceElement (C:\Users\v.hartig\Documents\Projekte\ng-three-template\node_modules\typescript\lib\typescript.js:64800:17) at Object.forEach (C:\Users\v.hartig\Documents\Projekte\ng-three-template\node_modules\typescript\lib\typescript.js:317:30) at checkSourceFileWorker (C:\Users\v.hartig\Documents\Projekte\ng-three-template\node_modules\typescript\lib\typescript.js:65123:20) at checkSourceFile (C:\Users\v.hartig\Documents\Projekte\ng-three-template\node_modules\typescript\lib\typescript.js:65091:13) at getDiagnosticsWorker (C:\Users\v.hartig\Documents\Projekte\ng-three-template\node_modules\typescript\lib\typescript.js:65179:17) at Object.getDiagnostics (C:\Users\v.hartig\Documents\Projekte\ng-three-template\node_modules\typescript\lib\typescript.js:65165:24) at C:\Users\v.hartig\Documents\Projekte\ng-three-template\node_modules\typescript\lib\typescript.js:98703:85 at runWithCancellationToken (C:\Users\v.hartig\Documents\Projekte\ng-three-template\node_modules\typescript\lib\typescript.js:98665:24) at getBindAndCheckDiagnosticsForFileNoCache (C:\Users\v.hartig\Documents\Projekte\ng-three-template\node_modules\typescript\lib\typescript.js:98691:20) at getAndCacheDiagnostics (C:\Users\v.hartig\Documents\Projekte\ng-three-template\node_modules\typescript\lib\typescript.js:98956:26) at getBindAndCheckDiagnosticsForFile (C:\Users\v.hartig\Documents\Projekte\ng-three-template\node_modules\typescript\lib\typescript.js:98688:20)

Any suggestions?

Hello!
I'm trying to load a GLB model using GLTFLoader without success.
I modified engine.service.ts as it follows:

export class EngineService implements OnDestroy {
  private canvas: HTMLCanvasElement;
  private renderer: THREE.WebGLRenderer;
  private camera: THREE.PerspectiveCamera;
  private scene: THREE.Scene;
  private light: THREE.AmbientLight;
  private cube: THREE.Mesh;
  private loaderGLTF: GLTFLoader; 

// ... other methods

  public createScene(canvas: ElementRef<HTMLCanvasElement>): void {

  // ... scene creation

    this.loaderGLTF = new GLTFLoader();
    this.loaderGLTF.load('./assets/models/gltf/Soldier.glb', function (gltf) {
      console.log(gltf);
      this.scene.add(gltf.scene);
    }, undefined, function (error) {
      console.error(error);
    });
 }

// ... other methods

}

If I run the npm start command i can see the scene, but i receive an error in the browser console (chrome v80.0.3987.149):

engine.service.ts:162 TypeError: Cannot read property 'scene' of undefined
    at engine.service.ts:159
    at GLTFLoader.js:148
    at GLTFLoader.js:1453
    at ZoneDelegate.invoke (zone-evergreen.js:365)
    at Object.onInvoke (core.js:41277)
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Zone.run (zone-evergreen.js:124)
    at zone-evergreen.js:851
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:41255)

Any idea about why the scene object is undefined?

PS: thanks for the great repo: it is what I was looking for to start experimenting with Angular and THREE js

Receiving a 'schema validation failed' error when I do ng serve. I've installed all dependencies and updated node. any insight would be helpful. here is the error log:
"
Schema validation failed with the following errors:
Data path ".builders['app-shell']" should have required property 'class'.
Error: Schema validation failed with the following errors:
Data path ".builders['app-shell']" should have required property 'class'.
at MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [as project] (/Users/alex/.nvm/versions/node/v8.11.3/lib/node_modules/@angular/cli/node_modules/@angular-devkit/core/src/workspace/workspace.js:215:42)
at MergeMapSubscriber._tryNext (/Users/alex/.nvm/versions/node/v8.11.3/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:69:27)
at MergeMapSubscriber._next (/Users/alex/.nvm/versions/node/v8.11.3/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:59:18)
at MergeMapSubscriber.Subscriber.next (/Users/alex/.nvm/versions/node/v8.11.3/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
at MergeMapSubscriber.notifyNext (/Users/alex/.nvm/versions/node/v8.11.3/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:92:26)
at InnerSubscriber._next (/Users/alex/.nvm/versions/node/v8.11.3/lib/node_modules/@angular/cli/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
at InnerSubscriber.Subscriber.next (/Users/alex/.nvm/versions/node/v8.11.3/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
at MapSubscriber._next (/Users/alex/.nvm/versions/node/v8.11.3/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/map.js:55:26)
at MapSubscriber.Subscriber.next (/Users/alex/.nvm/versions/node/v8.11.3/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
at SwitchMapSubscriber.notifyNext (/Users/alex/.nvm/versions/node/v8.11.3/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/switchMap.js:86:26)
at InnerSubscriber._next (/Users/alex/.nvm/versions/node/v8.11.3/lib/node_modules/@angular/cli/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
at InnerSubscriber.Subscriber.next (/Users/alex/.nvm/versions/node/v8.11.3/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
at /Users/alex/.nvm/versions/node/v8.11.3/lib/node_modules/@angular/cli/node_modules/rxjs/internal/util/subscribeTo.js:17:28
at Object.subscribeToResult (/Users/alex/.nvm/versions/node/v8.11.3/lib/node_modules/@angular/cli/node_modules/rxjs/internal/util/subscribeToResult.js:10:45)
at SwitchMapSubscriber._innerSub (/Users/alex/.nvm/versions/node/v8.11.3/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/switchMap.js:65:54)
at SwitchMapSubscriber._next (/Users/alex/.nvm/versions/node/v8.11.3/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/switchMap.js:55:14)

"

Hope someone can help

I need to get the size of the canvas not overall window. Doesn't matter what I try it stays fixed at 300 which I believe is the defaults.

So how would I rewrite this function to use the size of the canvas passed in as opposed to the overall window size

`public resize(): void {
    const width = window.innerWidth;
    const height = window.innerHeight;

    this.cameraNew.aspect = width / height;
    this.cameraNew.updateProjectionMatrix();

    this.rendererNew.setSize( width, height );
  }`

Hi,
First, great seed and job.

Second, I'm trying to load a SVG image as texture but I'm getting this error.

Link to docs -> https://threejs.org/docs/#examples/loaders/SVGLoader

Looks like that functionality is not in @types, do you know some solution?

Thanks in advance

I love your template project, has definitely helped me start learning how to build things in ThreeJS but I am now at the point that I want some objects to be able to be thrown and rolled around. Would you be able to update your project with AmmoJS in it? So far I have been very unsuccessful in getting the package to load, constantly getting the error: Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat ‘C:\hiberfil.sys‘. Any help would be greatly appreciated!

edit build commands...

   "build": "ng build",
   "build:prod": "ng build --prod",
   "build:both": "npm run build && npm run build:prod",

add dist/dev, dist/prod build config

"outputPath": "dist/prod",
"outputPath": "dist/dev",

add preprocessor include path

            "stylePreprocessorOptions": {
              "includePaths": [
                "src/scss"
              ]
            },

Hi,
thanks for your good job.
I created spher with your methid using service and component. When i launch my application in the browser the first time my component don't renderer. But it's work when i refresh.ha ve you an idea to solve this.
thanks
my compoent :

import {Component, ViewChild, ElementRef, OnDestroy, AfterViewInit} from '@angular/core';
import * as THREE from 'three';
import { SphereService } from './sphere.service';

@component({
selector: 'app-sphere',
templateUrl: './sphere.component.html',
styleUrls: ['./sphere.component.sass']
})
export class SphereComponent implements AfterViewInit, OnDestroy {

@ViewChild('rendererCanvas')
public rendererCanvas: ElementRef;

constructor(private sphereService: SphereService) {}

ngAfterViewInit() {
this.sphereService.running = true;
this.sphereService.createScene(this.rendererCanvas);
this.sphereService.animate();

}

ngOnDestroy(): void {
this.sphereService.running = false;
}
}

my service

import { Injectable, ElementRef, OnDestroy, NgZone } from '@angular/core';
import * as THREE from 'three';
import { SphereModel } from './sphere.model';

@Injectable({
providedIn: 'root'
})
export class SphereService implements OnDestroy {

private canvas: HTMLCanvasElement;
private renderer: THREE.WebGLRenderer;
private camera: THREE.PerspectiveCamera;
private scene: THREE.Scene;
private frameId: number = null;
private arrayOfThreeSpheres: SphereModel[] = new Array();
private sphere;

// controle running
public running: boolean;

public constructor(private ngZone: NgZone) {}

public ngOnDestroy() {
if (this.frameId != null) {
cancelAnimationFrame(this.frameId);
}
}

createScene(canvas: ElementRef): void {

// Check that we're still running.
if (!this.running) {
  return;
}

// The first step is to get the reference of the canvas element from our HTML document
this.canvas = canvas.nativeElement;
console.log('canvas reference---->', this.canvas);

this.renderer = new THREE.WebGLRenderer({
  canvas: this.canvas,
  alpha: false,    // transparent background
  antialias: true // smooth edges
});
// renderer = new THREE.CanvasRenderer();


this.renderer.setSize(window.innerWidth, window.innerHeight);

// create the scene
this.scene = new THREE.Scene();

this.camera = new THREE.PerspectiveCamera(45, 1.0);
this.camera.position.set(0, 0, +1000);

for (let i = 1; i <= 3; i++) {
  const p = ( (v) => {let r = 0; (v >= 0.5) ? r = 1 : r = -1; return r; })(Math.random());
  const q = ( (v) => {let r = 0; (v >= 0.5) ? r = 1 : r = -1; return r; })(Math.random());
  const r = ( (v) => {let r = 0; (v >= 0.5) ? r = 1 : r = -1; return r; })(Math.random());
  console.log('r -->' + r + 'q -->' + q + 'p -->' + p);
  if(i === 1) {
    this.sphere = new SphereModel(i * 100, 30, 30, 0.03 * p, 0.03 * q , 0.03 * r, '#7B68EE');
  }
  if(i === 2) {
    this.sphere = new SphereModel(i * 100, 30, 30, 0.03 * p, 0.03 * q , 0.03 * r, '#2E8B57');
  }
  if(i === 3) {
    this.sphere = new SphereModel(i * 100, 30, 30, 0.03 * p, 0.03 * q , 0.03 * r, '#DC143C');
  }
  console.log('on build sphere');
  this.scene.add(this.sphere.getMesh());
  this.arrayOfThreeSpheres.push(this.sphere);
}

// tick();
// function tick() {
//   for (let i = 0; i < array.length; i++) {
//     array[i].next();
//     console.log('array[i]----->', array[i]);
//   }

//   this.render();
// }
// this.animate();

}

tick() {
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < this.arrayOfThreeSpheres.length; i++) {
this.arrayOfThreeSpheres[i].next();
console.log('array[i]----->', this.arrayOfThreeSpheres[i]);
}

}

animate(): void {
// We have to run this outside angular zones,
// because it could trigger heavy changeDetection cycles.
this.ngZone.runOutsideAngular(() => {
window.addEventListener('DOMContentLoaded', () => {
this.render();
});

  window.addEventListener('resize', () => {
    this.resize();
  });
});

}

render(): void {
this.frameId = requestAnimationFrame(() => {
this.render();
});

this.tick();
this.renderer.render(this.scene, this.camera);

}

resize() {
const width = window.innerWidth;
const height = window.innerHeight;

this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(width, height);
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();

}
}

the model

import * as THREE from 'three';

export class SphereModel {
private geometry;
private material;
private materialParam;
private mesh;

constructor(private radius,
private widthseg,
private heightseg,
private rotx,
private roty,
private rotz,
private colorSphere) {

this.geometry = new THREE.SphereGeometry(this.radius, this.widthseg, this.heightseg);
this.materialParam = {
        color: this.colorSphere,
        wireframe: true ,
        blending: THREE.AdditiveBlending,
        transparent: true
    };
this.material = new THREE.MeshBasicMaterial(this.materialParam);
this.mesh = new THREE.Mesh(this.geometry, this.material);
this.rotx = rotx / 20;
this.roty = roty / 15;
this.rotz = rotz / 20;

}

getColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

getMesh() {
return this.mesh;
}

next() {
this.mesh.rotation.x += this.rotx;
this.mesh.rotation.y += this.roty;
this.mesh.rotation.z += this.rotz;
}

}