Skip to content

Commit ed04d43

Browse files
PANSTER.DanielPANSTER.Daniel
PANSTER.Daniel
authored and
PANSTER.Daniel
committed
Update Readme
1 parent ba2af2b commit ed04d43

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+4999
-54
lines changed

‎.angular-cli.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,13 @@
1919
"testTsconfig": "tsconfig.spec.json",
2020
"prefix": "app",
2121
"styles": [
22-
"styles.css"
22+
"./../styles/styles.css",
23+
"./../styles/w3.4.10.css",
24+
"./../styles/css3d-threejs.component.css"
25+
],
26+
"scripts": [
27+
2328
],
24-
"scripts": [],
2529
"environmentSource": "environments/environment.ts",
2630
"environments": {
2731
"dev": "environments/environment.ts",

‎README.md

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,5 @@
1-
# Test3D
2-
1+
# angular5-threejs-css3d
32
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.5.
43

5-
## Development server
6-
7-
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8-
9-
## Code scaffolding
10-
11-
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12-
13-
## Build
14-
15-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
16-
17-
## Running unit tests
18-
19-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20-
21-
## Running end-to-end tests
22-
23-
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24-
25-
## Further help
26-
27-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
4+
# access to published page
5+
https://dpanster.github.io/angular5-threejs-css3d/

‎debug.log

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
[0327/163637.028:ERROR:process_info.cc(632)] range at 0xfb8c3c9800000000, size 0x292 fully unreadable
2+
[0327/163637.029:ERROR:process_info.cc(632)] range at 0xfb8c3cfe00000000, size 0x292 fully unreadable
3+
[0327/163637.029:ERROR:process_info.cc(632)] range at 0x0, size 0x292 fully unreadable

‎package-lock.json

Lines changed: 93 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,21 @@
2121
"@angular/platform-browser": "^5.2.0",
2222
"@angular/platform-browser-dynamic": "^5.2.0",
2323
"@angular/router": "^5.2.0",
24+
"@types/cannon": "^0.1.2",
25+
"@types/physijs": "0.0.27",
26+
"@types/stats": "^0.16.30",
27+
"@types/three": "^0.91.0",
28+
"cannon": "^0.6.1",
29+
"chroma-js": "^1.3.7",
2430
"core-js": "^2.4.1",
31+
"perlin-noise": "0.0.1",
32+
"physijs": "0.0.4",
33+
"physijs-webpack": "0.0.2",
2534
"rxjs": "^5.5.6",
35+
"three": "^0.91.0",
36+
"three-css3drenderer": "^1.0.1",
37+
"three-trackballcontrols": "0.0.7",
38+
"tween.js": "^16.6.0",
2639
"zone.js": "^0.8.19"
2740
},
2841
"devDependencies": {

‎src/app - Verknüpfung.lnk

1.37 KB
Binary file not shown.

‎src/app/app-routing.module.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { NgModule } from '@angular/core';
2+
import { Routes, RouterModule } from '@angular/router';
3+
4+
import { HomeComponent } from './home/home.component';
5+
import { CubeThreejsComponent } from './cube-threejs/cube-threejs.component';
6+
import { Css3dThreejsComponent } from './css3d-threejs/css3d-threejs.component';
7+
8+
const routes: Routes = [
9+
{
10+
path: '',
11+
component: HomeComponent
12+
},
13+
{
14+
path: 'cube-threejs',
15+
component: CubeThreejsComponent
16+
},
17+
{
18+
path: 'css3d-threejs',
19+
component: Css3dThreejsComponent
20+
}
21+
];
22+
23+
24+
@NgModule({
25+
imports: [RouterModule.forRoot(routes)],
26+
exports: [RouterModule]
27+
})
28+
export class AppRoutingModule { }

‎src/app/app.component.html

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
1-
<!--The content below is only a placeholder and can be replaced.-->
2-
<div style="text-align:center">
3-
<h1>
4-
Welcome to {{ title }}!
5-
</h1>
6-
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
7-
</div>
8-
<h2>Here are some links to help you start: </h2>
9-
<ul>
10-
<li>
11-
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
12-
</li>
13-
<li>
14-
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
15-
</li>
16-
<li>
17-
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
18-
</li>
19-
</ul>
201

2+
3+
<div class="w3-sidebar w3-bar-block w3-black w3-top" style="z-index:3;width:10%;">
4+
<div class="w3-container w3-display-container w3-padding-16">
5+
<h3><b>3D Test</b></h3>
6+
</div>
7+
<a routerLink="" class="w3-bar-item w3-button">About</a>
8+
<a routerLink="cube-threejs" class="w3-bar-item w3-button">Cube - Three.js</a>
9+
<a routerLink="css3d-threejs" class="w3-bar-item w3-button">CSS3D - Three.js</a>
10+
</div>
11+
12+
<div style="margin-left:10%;">
13+
<router-outlet></router-outlet>
14+
</div>

‎src/app/app.component.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { Component } from '@angular/core';
2+
import { ActivatedRoute } from '@angular/router';
23

4+
// component decorator(s)
35
@Component({
46
selector: 'app-root',
5-
templateUrl: './app.component.html',
6-
styleUrls: ['./app.component.css']
7+
styleUrls: ['app.component.css'],
8+
templateUrl: './app.component.html'
9+
710
})
811
export class AppComponent {
9-
title = 'app';
12+
test = 'app';
1013
}

‎src/app/app.module.ts

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
3-
3+
import { AppRoutingModule } from './app-routing.module';
4+
import { FormsModule } from '@angular/forms';
45

56
import { AppComponent } from './app.component';
7+
import { CubeThreejsComponent } from './cube-threejs/cube-threejs.component';
8+
import { HomeComponent } from './home/home.component';
9+
import { Css3dThreejsComponent } from './css3d-threejs/css3d-threejs.component';
610

711

812
@NgModule({
913
declarations: [
10-
AppComponent
14+
AppComponent,
15+
CubeThreejsComponent,
16+
HomeComponent,
17+
Css3dThreejsComponent
1118
],
1219
imports: [
13-
BrowserModule
20+
BrowserModule,
21+
AppRoutingModule,
22+
FormsModule
1423
],
1524
providers: [],
1625
bootstrap: [AppComponent]

‎src/assets/.gitkeep renamed to ‎src/app/css3d-threejs/css3d-threejs.component.css

File renamed without changes.

‎src/app/css3d-threejs/css3d-threejs.component.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!-- wrap w3 -->
2+
<div class="w3-container">
3+
<header>
4+
<div class="w3-container ">
5+
<h1>
6+
<b>A Three.js CSS3d showcase...</b>
7+
</h1>
8+
This canvas contains two scenes from
9+
<em>THREE</em> js and two renderer elements, a
10+
<em>WebGLRenderer</em> and a
11+
<em>CSS3DRenderer</em>.
12+
<br> The focus is the integration and handling on the CSS 3d in the scene. Features for this showcase are clickable, highlight,
13+
moveable css elements. One drop-down menu is integrated.
14+
<br> Additionally the WebGL scene contains a random generated terrain, light, shadow, camera handling with mouse, physics
15+
with collision detection, tween, object scaling, rotation around a (pivot-)point and a simple particle system. Play with the clickable elements and see whats happen.
16+
<br>
17+
<br> A list of used libraries / packages for this angular controller example:
18+
</div>
19+
</header>
20+
<div class="w3-container ">
21+
<code>
22+
<ul>
23+
<li>Three.js R91 (V0.91.0) / NPM: npm i three / main 3D part</li>
24+
<li>CSS3dRenderer (V1.0.1) / NPM: npm i three-css3drenderer / CSS part</li>
25+
<li>Trackball controls (V0.0.7) / NPM: npm i three-trackballcontrols / Camera control with mouse</li>
26+
<li>Tween (V16.6.0) / NPM: npm i @tweenjs/tween.js / Soft moving objects</li>
27+
<li>Cannon (V0.6.1) / NPM: npm i cannon / Physics</li>
28+
<li>Perlin Noise (V0.0.1) / NPM: npm i perlin-noise / Noise for terrain</li>
29+
<li>Chroma (V1.3.7) / NPM: npm i chroma-js / Color scaling for heightfield</li>
30+
</ul>
31+
</code>
32+
</div>
33+
<!-- canvas here -->
34+
<!--<canvas class="w3-center" #canvasCSS3d (window:resize)="onResize($event)"></canvas>-->
35+
<div class="w3-container">
36+
<div #canvasCSS3d (window:resize)="onResize()"></div>
37+
</div>
38+
</div>

0 commit comments

Comments
 (0)