webGL实现简单星空---真丑--看来一个优秀的工程师,还需要是个美术爱好,会想象,才能做出更好看. 加油----

实现大概方式

1 scene --生成背景

    initScene() {
        this.scene = new this._THREE.Scene();
    },

2 camera--生成相机

    this.camera = new this._THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight,0.1, 2000 );
    this.camera.position.set(0,0,500);
    this.camera.lookAt(0,0,0);

3 star --生成星星

    initMesh_Star(colr, x, y, z) {
        var star_geometry = new this._THREE.CircleBufferGeometry( 10, 5 );
        var material = new this._THREE.MeshBasicMaterial( { color: colr } );
        var star = new this._THREE.Mesh( star_geometry, material );
        this.starArr.push(star);
        star.position.set(x, y, z)
        this.scene.add(star);
    },

4 moon --生成月亮

    var geometry = new this._THREE.CircleBufferGeometry( 35, 66 );
    var material = new this._THREE.MeshBasicMaterial( { color: 0xffff00 } );
    var moon_geometry = new this._THREE.Mesh( geometry, material );
    moon_geometry.position.set(300,220, 100)
    this.scene.add( moon_geometry );

5 light --生成光

    let ambient = new this._THREE.AmbientLight(0x444444);
    this.scene.add(ambient);
    let point = new this._THREE.PointLight(0xfffffff);
    point.postion = (400,400,500);
    this.scene.add(point)

6 render--渲染

    render() {
        this.renderer.render(this.scene, this.camera)
        requestAnimationFrame(this.render);
        this.animateStar();
    },
    animateStar() {
        let random = Math.random();
        for(let i = 0; i < this.starArr.length; i++) {
            if(this.starArr[i].position.y > 389) {
                this.scene.remove(this.starArr[i]);
                this.starArr.splice(i, 1);
            }else{
                this.starArr[i].rotateZ(0.02);
                this.starArr[i].position.x += 0.5 + random;
                this.starArr[i].position.y += 0.5 + random;
            }
        }
    },
    

仅以此,记录学习记录.