makimenko / angular-template-for-threejs Goto Github PK

Hi,
how to select objects and get information?

not all source is shown in report:

Only tested/ committed changes are covered.
No visibility of overall state.
Coverage wrongly jumps +/- every PR

Describe the bug
API Documentation not covering atft library

To Reproduce

1. Go to https://makimenko.github.io/angular-template-for-threejs/coverage.html
2. components from atft library are missing

Expected behavior

1. API documentation covering library as well.

Hi, @ComFreek
It seems that #110 causing failures in the Storybook:
Error: Expected 'styles' to be an array of strings.

See https://makimenko.github.io/angular-template-for-threejs/storybook/?path=/story/actor--actors

gh-pages not in sync with master

TravisCI build is not running (or think that should ignore commits):
https://travis-ci.com/makimenko/angular-template-for-threejs/requests

There have been updates to the babel7 monorepo:

• • The devDependency @babel/core was updated from 7.7.7 to 7.8.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Thanks to functionality introduced by Storybook, we have now good component development tool and very nice component showcase demonstration. Demo app becomes a bit useless.

@ComFreek Some time ago you proposed to remove app / demo template and keep only library in this repository. I think now we can do it. What do you think?

Planned tasks:

• Replace gh-pages demo to Storybook
• Remove root app and keep only projects/atft
• Modify API Docs: Generate docs for atft library
• Adjust pipeline
• Update readme

Creation of separate repo with project template => don't think it's really needed, considering standard atft library. Readme sample should be enough.

There have been updates to the storybook monorepo:

• • The devDependency @storybook/addon-actions was updated from 5.2.6 to 5.2.7.

• The dependency @storybook/addon-knobs was updated from 5.2.6 to 5.2.7.
• The devDependency @storybook/addon-links was updated from 5.2.6 to 5.2.7.
• The devDependency @storybook/addon-notes was updated from 5.2.6 to 5.2.7.
• The dependency @storybook/addon-options was updated from 5.2.6 to 5.2.7.
• The devDependency @storybook/addons was updated from 5.2.6 to 5.2.7.
• The devDependency @storybook/angular was updated from 5.2.6 to 5.2.7.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the storybook group definition.

storybook is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

I heard badges improve a project's perceived quality by users 😄 I'd suggest the following ones:

• Travis CI (+ badge)
• Automatic push of demo, and
• Automatic push of API documentation to gh-pages via Travis CI (@makimenko how did you generate the files in gh-pages? What was the command you ran?)
• Greenkeeper (+ badge)
  
  (I just npm installed this repo to test it and NPM warned me about "20 vulnerabilities"! Greenkeeper would have prevented that.)
• Maybe coverage (+ badge), but we only have few tests, though. But that could kickoff providing more tests!

See https://github.com/ComFreek/async-playground (shameless self-promotion) or any other repository. Popular repositories tend to have them most.

What do you think? I could do a PR in the next days.

Actors scene is very slow on workstation with low GPU.

• Analyze performance
• Implement the performance fix

Ideas:
https://discoverthreejs.com/tips-and-tricks/

There seems to be no way to change or set the aspect ratio of the perspective camera. The component has this function:

public updateAspectRatio(aspect: number) { // console.log('PerspectiveCameraComponent.updateAspectRatio: ' + aspect); this.camera.aspect = aspect; this.camera.updateProjectionMatrix(); }

But it is never called. In createCamera, there's a comment that says the aspect ratio is "updated later", but looking at the code it seems it is never updated?

 protected createCamera(): void {
    // console.log('PerspectiveCameraComponent.createCamera');
    // let aspectRatio = undefined; // Updated later
    this.camera = new THREE.PerspectiveCamera(
      this.fov,
      undefined,
      this.near,
      this.far
    );
  }

The devDependency @angular-devkit/build-ng-packagr was updated from 0.800.1 to 0.800.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@angular-devkit/build-ng-packagr is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Steps

1. run ng serve

Actual
Sliders are not working

renderPane/area must be propagated to OrbitControls (refactoring in scope of release 1.2.0)

Expected
Sliders working

c1f12d4 removed package-lock.json. I would like to ask for the rationale behind this

Multiple sources (e.g. the official NPM docs on package-lock.json) suggest committing this file for 100% reproducability.

Hi, I'm new to three.js, and I like how you're creating interfaces and services for it. I'm trying to port https://codelabs.developers.google.com/codelabs/ar-with-webxr/#6 to angular as way to learn webXR https://github.com/playground/angular-template-for-dummies/tree/web-xr, but I'm having trouble adding model to the scene. Tried to debug it but it's not throwing any errors. Thanks in advance for you help.

To test, clone https://github.com/playground/angular-template-for-dummies/tree/web-xr
then "npm install" and "ng build web-xr" and point server to "dist/web-xr"

ERROR TypeError: "this.cameraDirective is undefined"
I think because ViewChild is called AfterInit but Hostlistener by OnInit...?
@ViewChild(PerspectiveCameraDirective) private cameraDirective: PerspectiveCameraDirective;

@HostListener('click') shoutClickedObject() { this.raycaster.setFromCamera(this.mousePosition, this.cameraDirective.camera); ... }

The devDependency @angular-devkit/build-ng-packagr was updated from 0.801.2 to 0.801.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@angular-devkit/build-ng-packagr is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Steps

1. Upgrade dependency: three 0.112
2. Build library

Actual Result

TS1086: An accessor cannot be declared in an ambient context.

Expected Result

No failure

This is just a really minor nitpicking comment:

Several templates for Angular 5 projects with frequently used technology stacks

Now that #3 upgraded the project (at least master and threejs) to Angular 6.0.0, I think the project description should be changed accordingly.

See https://makimenko.github.io/angular-template-for-threejs/:

It's rendered fine on GitHub and NPM, though: https://www.npmjs.com/package/atft

A lot of warning messages:
THREE.BufferGeometry: .addAttribute() has been renamed to .setAttribute()

Wait for: spite/THREE.MeshLine#92

Alternative:

• or remove dependency to THREE.MeshLine (seems project is not active anymore, no updates more than 10 months)

I assume that ObjLoader completion callback is too early (even if some texture images are not loaded). This results to undefined textures.

not nice workaround - rerender scene

Storybook: https://makimenko.github.io/angular-template-for-threejs/storybook/?path=/story/bugs--95

Is your feature request related to a problem? Please describe.
I would like to add geometries like (Sphere, Box, Cylinder, Cone, etc)

Describe the solution you'd like
I have started by adding a Directive for SphereGeometry like PointLightDirective. But then I get a compiler error: Type 'SphereGeometry' does not satisfy the constraint 'Object3D'. Property 'parent' is missing in type 'SphereGeometry'.

Yes, that is clear. Geometry is not a Object3D. But what would you consider the correct way?

Do an AbstarctGeometry? Like AbstractObject3D?

It would be nice to see some Groups of Object too. How would you implement this?

Thx,
Regards,
Sandor

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
Publish projects/atft library to npm

Describe the solution you'd like
Follow Guide to publish an Angular library to npm

• Publish library to npm
• update dependencies
• update readme/documentation

Describe the bug
AbstractObject3D in the ng-content is not visible for parent. As result it's not added to the scene.

For example:
ComponentA:

<atft-scene>
     ....
     <ng-content></ng-content>
</atft-scene>

ComponentB:

<component-a>
   <atft-axes-helper size=200></atft-axes-helper>
   ...
</component-a>

=> atft-axes-helper is not added to the scene.

To Reproduce
https://makimenko.github.io/angular-template-for-threejs/storybook/?path=/story/bugs--87
(see Notes in Storybook)

Actual
atft-cylinder-mesh not added to the scene

Expected
atft-cylinder-mesh should be added to the scene

Describe the bug
https://github.com/makimenko/angular-template-for-threejs/blob/master/projects/atft/src/public_api.ts doesn't export all the directives and components.

Implications are

1. you cannot use those directives in the app, e.g. if you want a @ViewChild(WebGLRenderingComponent) (as in my test code for #36), and
2. in app.component.html you'll see lots of errors shown by Visual Studio Code:
   

Expected behavior
Export all directives and components in public_api.ts. Now that we have a public package published, we should be cautious with modify the API without adhering to semver. If in doubt, make all properties/methods private first.

Suggested fix
For every subdirectory of projects/atft/lib create an index.ts exposing the public API. E.g. projects/atft/lib/cameras/index.ts, then in public_api.ts do export * from './lib/cameras.

Hello @makimenko,

thank you very much for the Three.js template! I would like to contribute some minor features I added back to this repository, but I will resort these to individual PRs.
Apart from that, would you accept a PR with style changes only, fixing all the warnings issued by TSLint (with the options from Angular)? For example, usage of ' instead of ", omission of types for trivially inferrable declarations (const x: number = 5 -> const x = 5).

Include into poly fills:

(window as any).__Zone_disable_requestAnimationFrame = true;
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove', 'touchmove'];

Link: https://discourse.threejs.org/t/angular-threejs/2739/5

Is your feature request related to a problem? Please describe.

Codacy/PR Quality Review — Not up to standards.

Don't know why it complains about not using double quotes. The tslint.json in project/atft in fact includes the root ./tslint.json one. And the latter specifies single quotes as the standard. I guess this is some kind of bug with Codacy. Also, running tslint manually doesn't show me any errors.

Describe the solution you'd like
Verify Codacy configuration.

Describe alternatives you've considered
Switch this repo to a different code quality tool

The devDependency @angular/cli was updated from 8.1.2 to 8.1.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@angular/cli is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

I think we should strive to be as clear as possible to end users what the differences between this repo and atft are.

I tried to do so in the 2019-04-18-unified-language-in-READMEs branch, see

• repo README
• atft README (as shown in repo under projects/atft & on NPM)

Note that I commented out your basic usage GIF (as shown in https://www.npmjs.com/package/atft/v/0.0.3) resulting from your code:

<atft-orbit-controls [rotateSpeed]=1 [zoomSpeed]=1.2 [listeningControlElement]=mainRenderer.renderPane>
  <atft-webgl-renderer #mainRenderer>
    <atft-perspective-camera [fov]=60 [near]=1 [far]=1100 positionX=20 positionY=50 positionZ=50></atft-perspective-camera>
    <atft-scene>
      <atft-axes-helper size=200></atft-axes-helper>
      <atft-grid-helper size=100 divisions=10></atft-grid-helper>
    </atft-scene>
  </atft-webgl-renderer>
</atft-orbit-controls>

I think we should only have one GIF and one demo in the NPM README. Also, it isn't clear how your code above should be run at all. This is what this template repo is for, right? But then, we can focus on showing this template's demo alone. Still, showing the basic code above is a good idea in my opinion to attract users. They somehow reach the atft NPM page and see this small code snippet and (hopefully) think "cool, that simple? let's try that".

What do you think?

Another thing: Shouldn't this template pull the atft dependency from NPM and not locally from projects/atft? If users are to use this template as their starting point, then they should definitely depend on the NPM atft.
In an ideal world, we maybe would have two repos: atft and atft-demo-project. However, now splitting is not an option, I guess. We would lose stars and confuse users even more.

PS: I noticed we have 47 weekly downloads so far on NPM! I didn't download it once! So if they don't all belong to you, we have some real downloaders there 🎆

I keep on getting:

WARNING in ./src/app/three-examples/objects/loaders/collada-loader.directive.ts 12:27-46
"export 'ColladaLoader' (imported as 'THREE') was not found in 'three'

WARNING in ./src/app/three-examples/objects/loaders/obj-loader.directive.ts 19:30-45
"export 'MTLLoader' (imported as 'THREE') was not found in 'three'

WARNING in ./src/app/three-examples/objects/loaders/obj-loader.directive.ts 18:27-42
"export 'OBJLoader' (imported as 'THREE') was not found in 'three'

WARNING in ./src/app/three-examples/controls/orbit-controls.directive.ts 55:28-47
"export 'OrbitControls' (imported as 'THREE') was not found in 'three'

i ｢wdm｣: Compiled with warnings.

There have been updates to the storybook monorepo:

• • The devDependency @storybook/addon-actions was updated from 5.3.4 to 5.3.5.

• The dependency @storybook/addon-knobs was updated from 5.3.4 to 5.3.5.
• The devDependency @storybook/addon-links was updated from 5.3.4 to 5.3.5.
• The devDependency @storybook/addon-notes was updated from 5.3.4 to 5.3.5.
• The dependency @storybook/addon-options was updated from 5.3.4 to 5.3.5.
• The devDependency @storybook/addons was updated from 5.3.4 to 5.3.5.
• The devDependency @storybook/angular was updated from 5.3.4 to 5.3.5.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the storybook group definition.

storybook is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

Currently, it's not enough TravisCI check of PRs.
As result it's frequently happen, that PR check is green, but after merge to master deployment is failing.

Proposal:
Move project docs, storybook build from "before_deploy" to "build" phase to verify them as well.

The devDependency ng-packagr was updated from 5.3.0 to 5.4.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

ng-packagr is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

To Reproduce

1. Go to https://makimenko.github.io/angular-template-for-threejs/storybook/?path=/story/embedded--as-component
2. You'll see:
   
   

Expected behavior

No glitches.

Desktop (please complete the following information):

• OS: Windows 10 Pro 64-bit
• Browser: Edge, Chrome Canary
• Version: Edge 44.18362.267.0, Chrome Canary 78.0.3899.0

The devDependency @angular-devkit/build-angular was updated from 0.801.2 to 0.801.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@angular-devkit/build-angular is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Considered

1. Considering repository analytics, it seems that "threejs" branch is noticeable popular (95% of visits). The rest branches are not so popular.
2. The initial idea of repository was to create atomic templates (charts, auth0, admin, material design, threejs etc). It seems that "schematics-cli" (which appeared after repo creation) is more suitable for such atomic templates. In addition the rest branches are outdated.
3. repo postfix "for-dummies" is not reflecting the truth. The repo content is more for experienced users.

Proposal

1. merge threejs branch to master
2. rename repository to "angular-template-for-threejs" (old URLs will be backward compatible and redirected to new repo)
3. update readme/project description
4. modify threejs scene a bit + will make it as demo in gh-pages

@ComFreek what you think about it? Would you mind if I will do it?

Describe the bug

1. Go to https://makimenko.github.io/angular-template-for-threejs/storybook/?path=/story/actor--actors with MS Edge
2. Hover over the servers

Expected behavior

(from your recent comment: #108 (comment))

Screenshots

Desktop (please complete the following information):

• OS: Windows 10 Pro 64-bit
• Browser: Microsoft Edge 44.18362.267.0

The devDependency @types/jasmine was updated from 3.3.15 to 3.3.16.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/jasmine is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

See https://storybook.js.org/docs/basics/exporting-storybook/ on how to export it as a static app.
I think that would be a cool showcase, particularly given your latest PR.

I can do this in the next days if you approve 😄

The dependency core-js was updated from 3.4.6 to 3.4.7.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

core-js is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

The devDependency @types/node was updated from 12.6.8 to 12.6.9.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴