云cloud

云cloud

  • 示例
  • HTML
  • CSS
  • JS

更多有趣示例 尽在 小红砖社区

示例

HTML



CSS

body {
     
    background-color: #000;
    color: #fff;
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    margin: 0;
    overflow: hidden;
    padding: 0px;
    position: relative;
}

a {
     
  color: #00b7ff;
}

JS

'use strict';

/* global dat: true */

var LowPolyCloudWebGLDemo = LowPolyCloudWebGLDemo || {
     };

/**
 * Create an instance of configurable settings for the demo.
 * You can allow or disallow a GUI for these settings with the query string "ui=true/false", ie: http://localhost:3000?ui=false
 * @return {object} Scene settings
 */
LowPolyCloudWebGLDemo.settings = function() {
     

    /**
     * Default sun color
     * @type {String}
     */
    const sunColor = '#fcd2a8',

        /**
         * Default sun intensity
         * @type {Number}
         */
        sunIntensity = 0.53,

        /**
         * Default ambient light color
         * @type {String}
         */
        ambientLight = '#8c8c8c',

        /**
         * Default sky color
         * @type {String}
         */
        skyColor = '#67b4e7',

        /**
         * Default show wireframe state for sky
         * @type {Boolean}
         */
        skyWireframe = false,

        /**
         * Default cloud color
         * @type {String}
         */
        cloudsColor = '#ffffff',

        /**
         * Default cloud opacity
         * @type {Number}
         */
        cloudsOpacity = 0.79,

        /**
         * Default show wireframe state for clouds
         * @type {Boolean}
         */
        cloudsWireframe = false,

        /**
         * Default cloud base velocity
         * @type {Number}
         */
        cloudsBaseVelocity = 0.008,

        /**
         * Project URL
         * @type {String}
         */
        homepage = 'https://github.com/enesser/low-poly-clouds-webgl';

    let gui = new dat.GUI({
     
        width: 360
    });
    gui.close();

    /**
     * Settings schema business object
     * @type {Object}
     */
    let settingsSchema = {
     
        /**
         * Reset settings to default
         */
        reset: function() {
     
            this.sunColor = sunColor;
            this.sunIntensity = sunIntensity;
            this.ambientLight = ambientLight;
            this.skyColor = skyColor;
            this.skyWireframe = skyWireframe;
            this.cloudsColor = cloudsColor;
            this.cloudsOpacity = cloudsOpacity;
            this.cloudsWireframe = cloudsWireframe;
            this.cloudsBaseVelocity = cloudsBaseVelocity;

            for (let folder in gui.__folders) {
     
                for (let i in gui.__folders[folder].__controllers) {
     
                    gui.__folders[folder].__controllers[i].updateDisplay();
                }
            }
        },

        /**
         * Go to home page
         */
        homepage: function() {
     
            window.open(homepage, '_blank');
        }
    };

    /**
     * Bind settings schema object to dat.gui interface.
     * @param  {object} settingsSchema
     */
    function bindSettingsSchemaToUi(settingsSchema) {
     

        let sunFolder = gui.addFolder('Sun');
        sunFolder.addColor(settingsSchema, 'sunColor');
        sunFolder.add(settingsSchema, 'sunIntensity').min(-10).max(50);
        sunFolder.addColor(settingsSchema, 'ambientLight');

        let skyFolder = gui.addFolder('Sky');
        skyFolder.addColor(settingsSchema, 'skyColor');
        skyFolder.add(settingsSchema, 'skyWireframe');

        let cloudsFolder = gui.addFolder('Clouds');
        cloudsFolder.addColor(settingsSchema, 'cloudsColor');
        cloudsFolder.add(settingsSchema, 'cloudsOpacity').min(0).max(1);
        cloudsFolder.add(settingsSchema, 'cloudsWireframe');
        cloudsFolder.add(settingsSchema, 'cloudsBaseVelocity').min(0).max(3);

        gui.add(settingsSchema, 'reset');
        gui.add(settingsSchema, 'homepage');
    }

    settingsSchema.reset();
    bindSettingsSchemaToUi(settingsSchema);
    return settingsSchema;
};

/* global console, THREE: true */

/**
 * Create an instance of world, represents the ThreeJS model with meshes and materials.
 * You can load high or low quality textures with the query string "quality=high/low", ie: http://localhost:3000?quality=low
 * @return {object} world model
 */
LowPolyCloudWebGLDemo.world = function() {
     

    const pathWorldModel = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/168282/low-poly-clouds.obj';
    const pathWorldMaterial = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/168282/low-poly-clouds.mtl';

    /**
     * Represents the ThreeJS model of world with meshes and materials.
     * @type {Object}
     */
    let worldObject = {
     

        /**
         * Are textures and materials loaded yet?
         * @type {Boolean}
         */
        isLoaded: false,

        /**
         * Texture and materials loading progress
         * @type {Number}
         */
        percentLoaded: 0,

        /**
         * Sky background mesh
         * @type {[type]}
         */
        background: null,

        /**
         * Sky background material
         * @type {[type]}
         */
        backgroundMaterial: null,

        /**
         * Cloud material
         * @type {[type]}
         */
        cloudsMaterial: null,

        /**
         * Cloud meshes
         * @type {Array}
         */
        clouds: []
    };

    /**
     * Load materials and textures, then map them to the object.
     * @param  {object} worldObject Target object to map.
     */
    function mapMaterialsTexturesToObject(worldObject) {
     

        let loader = new THREE.OBJMTLLoader();
        loader.load(pathWorldModel, pathWorldMaterial, (o) => {
     

                const cloudBaseSize = 1.8;

                worldObject.clouds = [];
                worldObject.background = o.children.find(child => child.name === 'Plane_Plane.003');
                worldObject.background.receiveShadow = true;
                worldObject.backgroundMaterial = worldObject.background.children[1].material;
                worldObject.backgroundMaterial.depthWrite = false;
                worldObject.backgroundMaterial.receiveShadow = true;

                for (let cloudTemplate of[
                    o.children.find(child => child.name === 'Cloud2_Icosphere.011'),
                    o.children.find(child => child.name === 'Cloud1_Icosphere.005')
                ]) {
     

                    worldObject.cloudsMaterial = cloudTemplate.children[1].material;
                    cloudTemplate.position.setY(cloudTemplate.position.y - 10);

                    for (let i = 0; i < 8; i++) {
     

                        let cloud = cloudTemplate.clone();

                        //randomly size clouds
                        let cloudSize = cloudBaseSize + (Math.random() * 1.2);
                        cloud.scale.set(cloudSize, cloudSize, cloudSize);

                        //randomly place clouds
                        let posXFlip = (Math.floor(Math.random() * 2) + 1) % 2 === 0 ? 1 : -1;
                        let posYFlip = (Math.floor(Math.random() * 2) + 1) % 2 === 0 ? 1 : -1;
                        let posX = cloud.position.x + (Math.random() * 50);
                        let posY = posYFlip > 0 ? cloud.position.y + (Math.random() * 3) : cloud.position.y - (Math.random() * 3);
                        cloud.position.setX(posX * posXFlip);
                        cloud.position.setY(posY);
                        cloud.position.setZ(cloud.position.z + (Math.random() * 3));

                        //give cloud random velocity accelerator
                        cloud.velocityAccelerator = (Math.random() * 0.008);

                        //add cloud to the array
                        worldObject.clouds.push(cloud);
                    }
                }

                worldObject.cloudsMaterial.transparent = true;
                worldObject.cloudsMaterial.depthWrite = false;

                worldObject.isLoaded = true;
            },

            /**
             * Successful load
             * @param  {object} xhr XmlHttpRequest
             */
            (xhr) => {
     
                if (xhr.lengthComputable) {
     
                    worldObject.percentLoaded = xhr.loaded / xhr.total * 100;
                }
            },

            /**
             * Error loading world materials and textures
             * @param  {object} xhr XmlHttpRequest
             */
            (xhr) => {
     
                console.error('Error loading world materials and textures', xhr);
            });
    }

    mapMaterialsTexturesToObject(worldObject);
    return worldObject;
};

/* global window, THREE: true */

/**
 * Entry point for Low Poly Cloud WebGL Demo
 * @param  {object} window
 */
((window, document) => {
     
    window.onload = () => {
     

        let scene,
            camera,
            renderer,
            directionalLightColor,
            directionalLight,
            ambientLightColor,
            ambientLight,
            settings,
            world,
            windowHalfX = window.innerWidth / 2,
            windowHalfY = window.innerHeight / 2;

        /**
         * Initialize scene
         */
        (function init() {
     

            //setup scene and perspective camera with a fov of 45, a near plane at 1, and a far plane at 1000
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
            camera.position.set(0, 4, 64);
            camera.lookAt(scene.position);

            //setup renderer with antialiasing enabled
            renderer = new THREE.WebGLRenderer({
     
                antialias: true
            });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);

            //add rendering div to the DOM
            let container = document.createElement('div');
            document.body.appendChild(container);
            container.appendChild(renderer.domElement);

            //create the sun
            directionalLightColor = new THREE.Color();
            directionalLight = new THREE.DirectionalLight(directionalLightColor);
            directionalLight.position.set(-20, 9.7, 14);

            scene.add(directionalLight);

            //create ambient lighting
            ambientLightColor = new THREE.Color();
            ambientLight = new THREE.AmbientLight(ambientLightColor);
            scene.add(ambientLight);

            //import settings
            settings = LowPolyCloudWebGLDemo.settings();

            //import the world, but don't add it to the scene until the model is finished loading
            world = LowPolyCloudWebGLDemo.world();
            world.isAddedToScene = false;


            //update renderer and camera aspect to the new size of the drawing area on window resize
            window.addEventListener('resize', () => {
     
                windowHalfX = window.innerWidth / 2;
                windowHalfY = window.innerHeight / 2;
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);

            }, false);
        })();

        /**
         * Render method, called each time a frame is rendered
         */
        (function render() {
     

            //update sun with settings
            directionalLight.intensity = settings.sunIntensity;
            directionalLightColor.setStyle(settings.sunColor);
            directionalLight.color = directionalLightColor;

            //update ambient lighting with settings
            ambientLightColor.setStyle(settings.ambientLight);
            ambientLight.color = ambientLightColor;

            //when world model is fully loaded (including materials and textures)
            if (world.isLoaded) {
     

                //add the world to the scene only when it's fully loaded
                if (!world.isAddedToScene) {
     

                    scene.add(world.background);

                    for (let cloud of world.clouds) {
     
                        scene.add(cloud);
                    }

                    world.isAddedToScene = true;
                }

                //adjust sky
                world.backgroundMaterial.color.setStyle(settings.skyColor);
                world.backgroundMaterial.wireframe = settings.skyWireframe;

                //adjust clouds
                world.cloudsMaterial.color.setStyle(settings.cloudsColor);
                world.cloudsMaterial.opacity = settings.cloudsOpacity;
                world.cloudsMaterial.wireframe = settings.cloudsWireframe;

                //move clouds
                for (let cloud of world.clouds) {
     
                    let newX = cloud.position.x + (settings.cloudsBaseVelocity + cloud.velocityAccelerator);
                    if (newX > 60) {
     
                        newX = -60;
                    }
                    cloud.position.setX(newX);
                }
            }

            //render the scene and loop for next frame update
            renderer.render(scene, camera);

            requestAnimationFrame(render);
        })();
    };
})(window, document);

你可能感兴趣的:(#,场景模型)