three实现三维龙卷风飘带转动动画效果代码-html代码-BFW代码库

three实现三维龙卷风飘带转动动画效果代码

代码语言：html

所属分类：动画

代码描述：three实现三维龙卷风飘带转动动画效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>

    <style>
        body{height:100vh;width:100vw;padding:0;margin:0;overflow:hidden}
    </style>

</head>

<body>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
    <div></div>

    <script type="text/javascript">
        const vertexShader = `
        varying vec2 vUv;
        
        void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
        `;
        
        const fragmentShader = `
        varying vec2 vUv;
        
        uniform float uTime;
        
        void main() {
        float len = 0.15;
        float falloff = 0.1;
        float p = mod(uTime * 0.25, 1.0);
        float alpha = smoothstep(len, len - falloff, abs(vUv.x - p));
        float width = smoothstep(len * 2.0, 0.0, abs(vUv.x - p)) * 0.5;
        alpha *= smoothstep(width, width - 0.3, abs(vUv.y - 0.5));
        
        alpha *= smoothstep(0.5, 0.3, abs(p - 0.5) * (1.0 + len));
        
        gl_FragColor.rgb = vec3(1.0);
        gl_FragColor.a = alpha;
        //        gl_FragColor.a += 0.1;
        }
        `;
        
        {
            let _renderer, _scene, _camera, _controls;
            let _geometry;
            let _shaders = [];
        
            window.onload = init;
        
            function init() {
                initWorld();
                initScene();
            }
        
            //=====// World //========================================//
        
            function initWorld() {
                _renderer = new THREE.WebGLRenderer();
                _renderer.setPixelRatio(2);
                _renderer.setSize(window.innerWidth, window.innerHeight);
                _renderer.setClearColor(0x2e2f27);
                document.body.appendChild(_renderer.domElement);
        
                _scene = new THREE.Scene();
        
                _camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
                _camera.position.set(0, 4, 15);
                _camera.target = new THREE.Vector3(0, 1, 0);
        
                _controls = new THREE.OrbitControls(_camera);
                _controls.target = _camera.target;
                _controls.enableDamping = true;
                _controls.dampingFactor = 0.1;
                _controls.rotateSpeed = 0.1;
        
                window.addEventListener('resize', resize, false);
                resize();
                requestAnimationFrame(render);
            }
        
            function resize() {
                _renderer.setSize(window.innerWidth, window.innerHeight);
                _camera.aspect = window.innerWidth / window.innerHeight;
                _camera.updateProjectionMatrix();
            }
        
            function render() {
                requestAnimationFrame(render);
                if (_controls) _controls.update();
                _renderer.render(_scene, _camera);
            }
        
            //=====// Scene //========================================//
        
            function initScene() {
                initGeometry();
                for (let i = 0; i < 6; i++) initMesh();
                requestAnimationFrame(loop);
            }
        
            function createSpiral() {
                let p.........完整代码请登录后点击上方下载按钮下载查看