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);
       .........完整代码请登录后点击上方下载按钮下载查看

网友评论0