引入three.min.ts
1、ts文件
|
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-comp',
templateUrl: './comp.component.html',
styleUrls: ['./comp.component.less']
})
export class CompComponent implements OnInit , AfterViewInit{
@ViewChild('cloud') cloud: ElementRef;
SEPARATION = 100;
AMOUNTX = 50;
AMOUNTY = 50;
container;
camera;
scene;
renderer;
particles;
particle; count = 0;
mouseX = 618;
mouseY = -312;
windowHalfX;
windowHalfY;
constructor() { }
ngAfterViewInit() {
this.windowHalfX = window.innerWidth / 2;
this.windowHalfY = window.innerHeight / 2;
this.container = document.createElement( 'div' );
this.container.setAttribute("class", "canvas");
this.cloud.nativeElement.appendChild( this.container );
this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
this.camera.position.z = 1000;
this.scene = new THREE.Scene();
this.particles = new Array();
const PI2 = Math.PI * 2;
const material = new THREE.ParticleCanvasMaterial( {
color: 0x017dd7,
program: function ( context ) {
context.beginPath();
context.arc( 0, 0, 1, 0, PI2, true );
context.fill();
}
} );
let i = 0;
for ( let ix = 0; ix < this.AMOUNTX; ix ++ ) {
for ( let iy = 0; iy < this.AMOUNTY; iy ++ ) {
this.particle = this.particles[ i ++ ] = new THREE.Particle( material );
this.particle.position.x = ix * this.SEPARATION - ( ( this.AMOUNTX * this.SEPARATION ) / 2 );
this.particle.position.z = iy * this.SEPARATION - ( ( this.AMOUNTY * this.SEPARATION ) / 2 );
this.scene.add( this.particle );
}
}
const that = this;
this.renderer = new THREE.CanvasRenderer();
this.renderer.setSize( window.innerWidth, window.innerHeight/2 );
this.container.appendChild( this.renderer.domElement );
window.addEventListener( 'resize', that.onWindowResize, false );
const animate = function() {
requestAnimationFrame(animate);
that.render();
}
animate();
}
onWindowResize() {
this.windowHalfX = window.innerWidth / 2;
this.windowHalfY = window.innerHeight / 2;
}
render() {
this.camera.position.x += ( this.mouseX - this.camera.position.x ) * .05;
this.camera.position.y += ( - this.mouseY - this.camera.position.y ) * .05;
this.camera.lookAt( this.scene.position );
let i = 0;
for ( let ix = 0; ix < this.AMOUNTX; ix ++ ) {
for ( let iy = 0; iy < this.AMOUNTY; iy ++ ) {
this.particle = this.particles[ i++ ];
this.particle.position.y = ( Math.sin( ( ix + this.count ) * 0.3 ) * 50 ) + ( Math.sin( ( iy + this.count ) * 0.5 ) * 50 );
this.particle.scale.x = this.particle.scale.y = ( Math.sin( ( ix + this.count ) * 0.3 ) + 1 ) * 2 + ( Math.sin( ( iy + this.count ) * 0.5 ) + 1 ) * 2;
}
}
this.renderer.render( this.scene, this.camera );
this.count += 0.1;
}
ngOnInit() {
}
}
|
2、html文件
|
<div #cloud></div>
|
