makimenko / angular-template-for-threejs Goto Github PK
View Code? Open in Web Editor NEWAngular Template For Three.js
Home Page: https://makimenko.github.io/angular-template-for-threejs/storybook
License: MIT License
Angular Template For Three.js
Home Page: https://makimenko.github.io/angular-template-for-threejs/storybook
License: MIT License
Hi,
how to select objects and get information?
Describe the bug
API Documentation not covering atft library
To Reproduce
Expected behavior
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
devDependency
@babel/core was updated from 7.7.7
to 7.8.0
.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.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
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:
Creation of separate repo with project template => don't think it's really needed, considering standard atft library. Readme sample should be enough.
devDependency
@storybook/addon-actions was updated from 5.2.6
to 5.2.7
.dependency
@storybook/addon-knobs was updated from 5.2.6
to 5.2.7
.devDependency
@storybook/addon-links was updated from 5.2.6
to 5.2.7
.devDependency
@storybook/addon-notes was updated from 5.2.6
to 5.2.7
.dependency
@storybook/addon-options was updated from 5.2.6
to 5.2.7
.devDependency
@storybook/addons was updated from 5.2.6
to 5.2.7
.devDependency
@storybook/angular was updated from 5.2.6
to 5.2.7
.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.
The new version differs by 53 commits.
cc73963
v5.2.7
bbf6963
Update peer dependencies to 5.2.7
669f514
5.2.7 changelog
994d011
Addon-contexts: Fix 'cannot read property h of undefined' in pr… (#9001)
6c27b63
Addon-viewports: Fix missing TypeScript types (#8848)
26c777d
Addon-A11y: Show errors, reset config properly (#8779)
46ad8df
UI: Store layout state in sessionStorage (#8786)
e6b8138
update theme docs
bdf6de4
update mdx docs
f92139e
Added docs to show how to override SB block when using MDX (#8992)
df49714
documentation:Improved readability of CONTRIBUTING.md (#8937)
8830a09
Correct Demo url for react-native-web (#8893)
31a16ea
Fixes incorrect link (#8842)
8e1590a
Add CSF upgrade example (#8807)
ada7868
📝 Fix typos on Ember guide (#8834)
There are 53 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
I heard badges improve a project's perceived quality by users 😄 I'd suggest the following ones:
npm install
ed this repo to test it and NPM warned me about "20 vulnerabilities"! Greenkeeper would have prevented that.)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.
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
);
}
0.800.1
to 0.800.2
.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.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
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); ... }
0.801.2
to 0.801.3
.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.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
TS1086: An accessor cannot be declared in an ambient context.
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:
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
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
@ViewChild(WebGLRenderingComponent)
(as in my test code for #36), andapp.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
8.1.2
to 8.1.3
.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.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
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
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.
devDependency
@storybook/addon-actions was updated from 5.3.4
to 5.3.5
.dependency
@storybook/addon-knobs was updated from 5.3.4
to 5.3.5
.devDependency
@storybook/addon-links was updated from 5.3.4
to 5.3.5
.devDependency
@storybook/addon-notes was updated from 5.3.4
to 5.3.5
.dependency
@storybook/addon-options was updated from 5.3.4
to 5.3.5
.devDependency
@storybook/addons was updated from 5.3.4
to 5.3.5
.devDependency
@storybook/angular was updated from 5.3.4
to 5.3.5
.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.
The new version differs by 13 commits.
f32b34b
v5.3.5
1e8ae25
Update peer dependencies to 5.3.5
3e3d373
5.3.5 changelog
b83dcc9
Merge pull request #9494 from jsjoeio/patch-2
26737f9
Core: Fix typo for loading addon-notes/register-panel (#9497)
1f3e0cd
Core: Fix typo for loading addon-notes/register-panel
b47e36c
docs: add note about async storage
66c524f
Merge pull request #9492 from storybookjs/9490-fix-source-loader-imports
dbce421
Source-loader: Also disable typescript checking on intermediate file
2fac0f2
Official-storybook: Test for interleaved exports
bea119a
Source-loader: Add imports to top of file
b45f98a
5.3.4 latest.json version file
be5b31b
Update version.ts to 5.3.4
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
5.3.0
to 5.4.0
.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.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
To Reproduce
Expected behavior
No glitches.
Desktop (please complete the following information):
0.801.2
to 0.801.3
.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.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Considered
Proposal
@ComFreek what you think about it? Would you mind if I will do it?
Describe the bug
Expected behavior
(from your recent comment: #108 (comment))
Desktop (please complete the following information):
3.3.15
to 3.3.16
.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.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
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 😄
3.4.6
to 3.4.7
.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.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
12.6.8
to 12.6.9
.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.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.