Skip to content
Snippets Groups Projects
Commit 186899ea authored by Philipp Sautner's avatar Philipp Sautner
Browse files

Adds basic sphere rotation, without image renderer

parent 9db28d5f
No related merge requests found
......@@ -72,11 +72,4 @@ export class QuizEntity {
}
return false;
}
//TODO: Fix this
public allNicks(): Array<MemberEntity> {
var members: Array<MemberEntity>
return members
}
}
......@@ -88,7 +88,7 @@ export class QuizLobbyComponent implements OnInit, OnDestroy, IHasTriggeredNavig
public ngOnInit(): void {
this.threejsService.createScene(this.rendererCanvas)
this.threejsService.createScene(this.rendererCanvas, this.attendeeService.attendees)
this.threejsService.animate()
this.quizService.quizUpdateEmitter.pipe(takeUntil(this._destroy)).subscribe(quiz => {
......@@ -209,10 +209,6 @@ export class QuizLobbyComponent implements OnInit, OnDestroy, IHasTriggeredNavig
return Boolean(value.match(/:[\w\+\-]+:/g));
}
public allNicks(): Array<MemberEntity> {
return this.quizService.allNicks();
}
public ngOnDestroy(): void {
this._destroy.next();
this._destroy.complete();
......
......@@ -173,10 +173,6 @@ export class QuizService {
return this.quiz.sessionConfig.nicks.selectedNicks.indexOf(nickname) !== -1;
}
public allNicks(): Array<MemberEntity> {
return this.quiz.allNicks();
}
public toggleSelectedNick(nickname: string): void {
if (this.hasSelectedNick(nickname)) {
this.removeSelectedNickByName(nickname);
......
......@@ -10,21 +10,30 @@ export class ThreejsService implements OnDestroy {
private renderer: THREE.WebGLRenderer;
private camera: THREE.PerspectiveCamera;
private scene: THREE.Scene;
private light: THREE.AmbientLight;
private cube: THREE.Mesh;
private parentContainer: THREE.Mesh;
private circles: THREE.Mesh[];
private width: number = window.innerWidth;
private height: number = window.innerHeight;
private frameId: number = null;
public constructor(private ngZone: NgZone) {}
public ngOnDestroy(): void {
if (this.frameId != null) {
cancelAnimationFrame(this.frameId);
}
}
public createScene(canvas: ElementRef<HTMLCanvasElement>): void {
public createScene(canvas: ElementRef<HTMLCanvasElement>, nicks: MemberEntity[]): void {
// TODO: Only returns available nicknames
nicks.forEach(function(nick: MemberEntity): void {
console.log(nick.name);
});
// The first step is to get the reference of the canvas element from our HTML document
this.canvas = canvas.nativeElement;
......@@ -33,28 +42,30 @@ export class ThreejsService implements OnDestroy {
alpha: true, // transparent background
antialias: true // smooth edges
});
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setSize(this.width, this.height);
// create the scene
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(
75, window.innerWidth / window.innerHeight, 0.1, 1000
75, this.width / this.height, 0.1, 1000
);
this.camera.position.z = 5;
this.scene.add(this.camera);
this.camera.position.copy(new THREE.Vector3(this.fti(0), this.fti(0), this.fti(10)) );
this.camera.lookAt(new THREE.Vector3(0, 0, 0));
// soft white light
this.light = new THREE.AmbientLight( 0x404040 );
this.light.position.z = 10;
this.scene.add(this.light);
// code here --x
this.parentContainer = new THREE.Mesh();
this.scene.add(this.parentContainer);
this.circles = this.createCirclesOffsetPosition(['hans', 'peter', 'paul']);
this.circles.forEach(c => {
this.parentContainer.add(c);
});
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
this.cube = new THREE.Mesh( geometry, material );
this.scene.add(this.cube);
}
public animate(): void {
// We have to run this outside angular zones,
// because it could trigger heavy changeDetection cycles.
......@@ -66,30 +77,77 @@ export class ThreejsService implements OnDestroy {
this.render();
});
}
window.addEventListener('resize', () => {
this.resize();
});
});
}
public render(): void {
this.frameId = requestAnimationFrame(() => {
this.render();
});
this.cube.rotation.x += 0.01;
this.cube.rotation.y += 0.01;
this.parentContainer.rotateZ(.001);
// keeps the circle upright
this.circles.forEach(c => {c.rotateZ(-0.001); });
// this.mesh.rotation.x += 0.01;
// this.mesh.rotation.y += 0.01;
this.renderer.render(this.scene, this.camera);
}
public resize(): void {
const width = window.innerWidth;
const height = window.innerHeight;
this.camera.aspect = width / height;
this.camera.aspect = this.width / this.height;
this.camera.updateProjectionMatrix();
this.renderer.setSize( width, height );
this.renderer.setSize( this.width, this.height );
}
public createCirclesOffsetPosition(nicknames: string[]): THREE.Mesh[] {
const radius = 3;
const segments = 10;
const circles = [];
for (let i = 0; i < nicknames.length; i++) {
circles.push(this.createCircle(radius, segments));
}
const offsetDistance = 20;
// east, north, west, south
const vectorList = [
new THREE.Vector3(1, 0, 0),
new THREE.Vector3(0, 1, 0),
new THREE.Vector3(-1, 0, 0),
new THREE.Vector3(0, -1, 0)
];
// apply the offset distance to each offsetVector
vectorList.forEach(offsetVector => {
offsetVector.setLength(offsetDistance);
});
// add the offset vectors to each circle to give them their offset starting position
for (let i = 0; i < circles.length; i++) {
circles[i].position.add(vectorList[i]);
}
return circles;
}
public createCircle(radius: number = 1, sections: number = 8): THREE.Mesh {
const geo = new THREE.CircleGeometry(radius, sections);
const mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial());
console.log('Added circle to scene');
this.scene.add(mesh);
return mesh;
}
public fti(feet: number): number {
return feet * 12;
}
}
\ No newline at end of file
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment