Three.js 3D低多边形云演示动画

Low Poly Cloud WebGL Demo 可以改变天空背景色和云彩的颜色、飘移速度和透明度。

Three.js, cloud

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3747
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'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);

编译

CSS

HTML

Low Poly Cloud WebGL Demo 可以改变天空背景色和云彩的颜色、飘移速度和透明度。

Three.js, cloud

编辑器支持Emmet

快捷键

Low Poly Cloud WebGL Demo 可以改变天空背景色和云彩的颜色、飘移速度和透明度。

Three.js, cloud

Three.js GSAP使用鼠标滚轮和滑动来操控3D双绞线螺旋动画

WebGL Three.js 3D云彩生成示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：