three打造一个三维污染动画效果代码-html代码-BFW代码库

three打造一个三维污染动画效果代码

代码语言：html

所属分类：三维

代码描述：three打造一个三维污染动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">
<head>

    <meta charset="UTF-8">





    <style>
        canvas {
            display: block;
            width: 100%;
            height: 100vh;
            cursor: -webkit-grab;
            cursor: grab;
        }
    </style>



</head>

<body>
    <canvas width="917" height="668" style="display: block;"></canvas>




    <script type="module">
        import * as $ from '//cdn.skypack.dev/three@0.125.0/build/three.module.js?min';
        import {
            OrbitControls
        } from '//cdn.skypack.dev/three@0.125.0/examples/jsm/controls/OrbitControls.js?min';
        import {
            EffectComposer
        } from '//cdn.skypack.dev/three@0.125.0/examples/jsm/postprocessing/EffectComposer.js?min';
        import {
            RenderPass
        } from '//cdn.skypack.dev/three@0.125.0/examples/jsm/postprocessing/RenderPass.js?min';
        import {
            UnrealBloomPass
        } from '//cdn.skypack.dev/three@0.125.0/examples/jsm/postprocessing/UnrealBloomPass.js?min';

        //// Boot

        const renderer = new $.WebGLRenderer({});
        const scene = new $.Scene();
        const camera = new $.PerspectiveCamera(75, 2, 20, 12000);
        const controls = new OrbitControls(camera, renderer.domElement);
        window.addEventListener('resize', () => {
            const {
                clientWidth, clientHeight
            } = renderer.domElement;
            renderer.setSize(clientWidth, clientHeight, false);
            renderer.setPixelRatio(window.devicePixelRatio);
            camera.aspect = clientWidth / clientHeight;
            camera.updateProjectionMatrix();
        });
        document.body.prepend(renderer.domElement);
        window.dispatchEvent(new Event('resize'));

        //// Inputs

        const size = 5000;
        const segs = 500;
        const disp = 500;

        //// Setup

        camera.position.set(1000, 1200, 1200);
        controls.autoRotate = true;
        controls.enableDamping = true;
        controls.maxPolarAngle = Math.PI / 2.9;

        const light0 = new $.DirectionalLight('white', 1);
        light0.position.set(0, 1, 0);
        scene.add(light0);

        const tex0 = new $.TextureLoader().load('//repo.bfw.wiki/bfwrepo/image/6032e33d4f494.png');

        const mesh0 = new $.Mesh(
            new $.PlaneBufferGeometry(size, size, segs, segs).rotateX(-0.5 * Math.PI),
            f());

        scene.add(mesh0);
        const mesh1 = new $.Mesh(
            new $.PlaneBufferGeometry(size, size, segs >> 1, segs >> 1).rotateX(-0.5 * Math.PI),
            f({
                wireframe: true, color: new $.Color('#333')
            }));

        scene.add(mesh1);

        //// Make Material

        function f( {
            wireframe, color
        } = {}) {
            const mat = new $.ShaderMaterial({
                extensions: {
                    derivatives: true // wgl 1
                },
                lights: true,
                wireframe: Boolean(wireframe),
                uniforms: $.UniformsUtils.merge([
                    $.ShaderLib.standard.uniforms, {
                        time: {
                            value: 0
                        },
                        displaceme.........完整代码请登录后点击上方下载按钮下载查看