0

В CODEPEN простые коды работают без проблем. Автор: Flowers Здесь требуется уточнение

 <style>
    html, body {
        overflow: hidden;
        padding: 0;
        margin: 0;
    }
    .container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column-reverse;
        align-items: start;
    }
    .clean-btn {
        z-index: 1;
        font-family: sans-serif;
        font-size: 15px;
        color: white;
        text-shadow: 0 0 10px #000000;
        user-select: none;
        padding: 0 0 15px 25px;
        cursor: pointer;
        text-decoration: underline;
        opacity: .5;
    }
    canvas {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
    }
    
    .name {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100%;
        transform: translate(-50%, -50%);
        color: white;
        text-align: center;
        font-size: 4vw;
        text-shadow: 0 0 5px #000000;
        user-select: none;
        pointer-events: none;
    }
    
    @media all and (min-width: 640px) {
        .name {
            font-size: 45px
        }
    }
    </style>
        <div class="container">
            <canvas id="canvas"></canvas>
            <div class="clean-btn">
                clean the screen
            </div>
        </div>
        
        <div class="name">
            Click To Add Flowers
        </div>
        
<script type="x-shader/x-fragment" id="fragmentShader">
            #define PI 3.14159265359
        
            uniform float u_ratio;
            uniform vec2 u_cursor;
            uniform float u_stop_time;
            uniform float u_clean;
            uniform vec2 u_stop_randomizer;
        
            uniform sampler2D u_texture;
            varying vec2 vUv;
        
            // --------------------------------
            // 2D noise
        
            vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
            vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
            vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }
            float snoise(vec2 v) {
                const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
                vec2 i = floor(v + dot(v, C.yy));
                vec2 x0 = v - i + dot(i, C.xx);
                vec2 i1;
                i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
                vec4 x12 = x0.xyxy + C.xxzz;
                x12.xy -= i1;
                i = mod289(i);
                vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
                vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
                m = m*m;
                m = m*m;
                vec3 x = 2.0 * fract(p * C.www) - 1.0;
                vec3 h = abs(x) - 0.5;
                vec3 ox = floor(x + 0.5);
                vec3 a0 = x - ox;
                m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
                vec3 g;
                g.x = a0.x * x0.x + h.x * x0.y;
                g.yz = a0.yz * x12.xz + h.yz * x12.yw;
                return 130.0 * dot(m, g);
            }
        
        
            float get_flower_shape(vec2 _p, float _pet_n, float _angle, float _outline) {
                _angle *= 3.;
        
                _p = vec2(_p.x * cos(_angle) - _p.y * sin(_angle),
                _p.x * sin(_angle) + _p.y * cos(_angle));
        
                float a = atan(_p.y, _p.x);
        
                float flower_sectoral_shape = pow(abs(sin(a * _pet_n)), .4) + .25;
        
                vec2 flower_size_range = vec2(.03, .1);
                float size = flower_size_range[0] + u_stop_randomizer[0] * flower_size_range[1];
        
                float flower_radial_shape = pow(length(_p) / size, 2.);
                flower_radial_shape -= .1 * sin(8. * a); // add noise
                flower_radial_shape = max(.1, flower_radial_shape);
                flower_radial_shape += smoothstep(0., 0.03, -_p.y + .2 * abs(_p.x));
        
                float grow_time = step(.25, u_stop_time) * pow(u_stop_time, .3);
                float flower_shape = 1. - smoothstep(0., flower_sectoral_shape, _outline * flower_radial_shape / grow_time);
        
                flower_shape *= (1. - step(1., grow_time));
        
                return flower_shape;
            }
        
            float get_stem_shape(vec2 _p, vec2 _uv, float _w, float _angle) {
        
                float x_offset = _p.y * sin(_angle);
                x_offset *= pow(3. * _uv.y, 2.);
                _p.x -= x_offset;
        
                // add horizontal noise to the cursor coordinale
                float noise_power = .5;
                float cursor_horizontal_noise = noise_power * snoise(2. * _uv * u_stop_randomizer[0]);
                cursor_horizontal_noise *= pow(dot(_p.y, _p.y), .6);// moise to be zero at cursor
                cursor_horizontal_noise *= pow(dot(_uv.y, _uv.y), .3);// moise to be zero at bottom
                _p.x += cursor_horizontal_noise;
        
                // vertical line through the cursor point (_p.x)
                float left = smoothstep(-_w, 0., _p.x);
                float right = 1. - smoothstep(0., _w, _p.x);
                float stem_shape = left * right;
        
                // make it grow + don't go up to the cursor point
                float grow_time = 1. - smoothstep(0., .2, u_stop_time);
                float stem_top_mask = smoothstep(0., pow(grow_time, .5), .03 -_p.y);
                stem_shape *= stem_top_mask;
        
                // stop drawing once done
                stem_shape *= (1. - step(.17, u_stop_time));
        
                return stem_shape;
            }
        
            void main() {
        
                vec3 base = texture2D(u_texture, vUv).xyz;
        
                vec2 uv = vUv;
                uv.x *= u_ratio;
                vec2 cursor = vUv - u_cursor.xy;
                cursor.x *= u_ratio;
                
                vec3 stem_color = vec3(.1 + u_stop_randomizer[0] * .6, .6, .2);
                vec3 flower_color = vec3(.6 + .5 * u_stop_randomizer[1], .1, .9 - .5 * u_stop_randomizer[1]);
        
                float angle = .5 * (u_stop_randomizer[0] - .5);
        
                float stem_shape = get_stem_shape(cursor, uv, .003, angle);
                stem_shape += get_stem_shape(cursor + vec2(0., .2 + .5 * u_stop_randomizer[0]), uv, .003, angle);
                float stem_mask = 1. - get_stem_shape(cursor, uv, .004, angle);
                stem_mask -= get_stem_shape(cursor + vec2(0., .2 + .5 * u_stop_randomizer[0]), uv, .004, angle);
        
                float petals_back_number = 1. + floor(u_stop_randomizer[0] * 2.);
                float angle_offset = -(2. * step(0., angle) - 1.) * .1 * u_stop_time;
                float flower_back_shape = get_flower_shape(cursor, petals_back_number, angle + angle_offset, 1.5);
                float flower_back_mask = 1. - get_flower_shape(cursor, petals_back_number, angle + angle_offset, 1.6);
        
                float petals_front_number = 2. + floor(u_stop_randomizer[1] * 2.);
                float flower_front_shape = get_flower_shape(cursor, petals_front_number, angle, 1.);
                float flower_front_mask = 1. - get_flower_shape(cursor, petals_front_number, angle, .95);
        
                vec3 color = base;
                color *= stem_mask;
                color *= flower_back_mask;
                color *= flower_front_mask;
        
                color += (stem_shape * stem_color);
        
                color += (flower_back_shape * (flower_color + vec3(0., .8 * u_stop_time, 0.)));
                color += (flower_front_shape * flower_color);
        
                color.r *= 1. - (.5 * flower_back_shape * flower_front_shape);
                color.b *= 1. - (flower_back_shape * flower_front_shape);
        
        
                color *= u_clean;
        
                gl_FragColor = vec4(color, 1.);
            }
        
</script>
        
<script type="x-shader/x-vertex" id="vertexShader">
            varying vec2 vUv;
            void main() {
                vUv = uv;
                gl_Position = vec4(position, 1.);
            }
</script>

<script type="module">
    import * as THREE from "https://cdn.skypack.dev/[email protected]/build/three.module";
    
    const canvasEl = document.querySelector("#canvas");
    const cleanBtn = document.querySelector(".clean-btn");
    
    const pointer = {
        x: .66,
        y: .3,
        clicked: true,
    };
    
    // for codepen preview
    window.setTimeout(() => {
        pointer.x = .75;
        pointer.y = .5;
        pointer.clicked = true;
    }, 700);
    
    
    let basicMaterial, shaderMaterial;
    let renderer = new THREE.WebGLRenderer({
        canvas: canvasEl,
        alpha: true,
    });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    let sceneShader = new THREE.Scene();
    let sceneBasic = new THREE.Scene();
    let camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 10);
    let clock = new THREE.Clock();
    
    let renderTargets = [
        new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight),
        new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight)
    ];
    
    createPlane();
    updateSize();
    
    window.addEventListener("resize", () => {
        updateSize();
        cleanCanvas();
    });
    
    render();
    
    let isTouchScreen = false;
    
    window.addEventListener("click", e => {
        if (!isTouchScreen) {
        pointer.x = e.pageX / window.innerWidth;
        pointer.y = e.pageY / window.innerHeight;
        pointer.clicked = true;     
        }
    });
    window.addEventListener("touchstart", e => {
        isTouchScreen = true;
       pointer.x = e.targetTouches[0].pageX / window.innerWidth;
        pointer.y = e.targetTouches[0].pageY / window.innerHeight;
        pointer.clicked = true;
    });
    
    cleanBtn.addEventListener("click", cleanCanvas);
    
    function cleanCanvas() {
        pointer.vanishCanvas = true;
        setTimeout(() => {
            pointer.vanishCanvas = false;
        }, 50);
    }
    
    function createPlane() {
        shaderMaterial = new THREE.ShaderMaterial({
            uniforms: {
                u_stop_time: {type: "f", value: 0.},
                u_stop_randomizer: {type: "v2", value: new THREE.Vector2(Math.random(), Math.random())},
                u_cursor: {type: "v2", value: new THREE.Vector2(pointer.x, pointer.y)},
                u_ratio: {type: "f", value: window.innerWidth / window.innerHeight},
                u_texture: {type: "t", value: null},
                u_clean: {type: "f", value: 1.},
            },
            vertexShader: document.getElementById("vertexShader").textContent,
            fragmentShader: document.getElementById("fragmentShader").textContent
        });
        basicMaterial = new THREE.MeshBasicMaterial();
        const planeGeometry = new THREE.PlaneGeometry(2, 2);
        const planeBasic = new THREE.Mesh(planeGeometry, basicMaterial);
        const planeShader = new THREE.Mesh(planeGeometry, shaderMaterial);
        sceneBasic.add(planeBasic);
        sceneShader.add(planeShader);
    }
    
    function render() {
    
        shaderMaterial.uniforms.u_clean.value = pointer.vanishCanvas ? 0 : 1;
        shaderMaterial.uniforms.u_texture.value = renderTargets[0].texture;
    
        if (pointer.clicked) {
            shaderMaterial.uniforms.u_cursor.value = new THREE.Vector2(pointer.x, 1 - pointer.y);
            shaderMaterial.uniforms.u_stop_randomizer.value = new THREE.Vector2(Math.random(), Math.random());
            shaderMaterial.uniforms.u_stop_time.value = 0.;
            pointer.clicked = false;
        }
        shaderMaterial.uniforms.u_stop_time.value += clock.getDelta();
    
    
        renderer.setRenderTarget(renderTargets[1]);
        renderer.render(sceneShader, camera);
        basicMaterial.map = renderTargets[1].texture;
        renderer.setRenderTarget(null);
        renderer.render(sceneBasic, camera);
    
        let tmp = renderTargets[0];
        renderTargets[0] = renderTargets[1];
        renderTargets[1] = tmp;
    
        requestAnimationFrame(render);
    }
    
    function updateSize() {
        shaderMaterial.uniforms.u_ratio.value = window.innerWidth / window.innerHeight;
        renderer.setSize(window.innerWidth, window.innerHeight);
    }
    </script>

9
  • 1
    Ну так как Вы его добавляете сюда, он работать точно не будет. Оберните import * as THREE from ... и все что ниже в <script type="module"> // Здесь import и все остальное </script> И CSS перенесите или в CSS файл или оберните в тег style.
    – Simon
    Commented 21 июл. 2023 в 19:05
  • 1
    @seregada я их запускал на этом же сайте, в смысле, на Stack Overflow в сниппете.
    – Simon
    Commented 21 июл. 2023 в 20:18
  • 1
    @seregada в HTML файле тоже нормально запускается. С форматированием на сайте все в порядке, отформатировано в соответствии с тем, как Вы сюда код добавили.
    – Simon
    Commented 21 июл. 2023 в 20:22
  • 1
    В инете много обсуждают последовательность запуска скриптов -- было бы что обсуждать. Два скрипта которые с type="x-shader/x-fragment" и type="x-shader/x-vertex" можете оставить перед закрывающим body, а то что с импортом, можете вынести в отдельный файл и подключить ниже или в head, все равно будет работать, только не забудьте указать ему type="module". В codepen по-факту все так и есть, кроме подключения скрипта с type="module".
    – Simon
    Commented 21 июл. 2023 в 20:47
  • 1
    Давайте продолжим обсуждение в чате.
    – Simon
    Commented 21 июл. 2023 в 21:03

1 ответ 1

2

При подключении скрипта, где Вы используете import, нужно указать тип скрипта type="module", в противном случае это не будет работать, и в консоли Вы увидите ошибку "Uncaught SyntaxError: Cannot use import statement outside a module".

type="module" используется для указания, что содержимое скрипта должно быть обработано как ECMAScript 6 модуль, где Вы можете использовать import и export. Есть еще ряд отличий: они асинхронны по-умолчанию, имеют CORS same-origin, глобальный контекст выполнения скрипта — это не глобальный объект window, а новый объект module.

1
  • 1
    Simon , спасибо . Я только сейчас нашел кнопку Сниппет :)
    – serega da
    Commented 15 сент. 2023 в 13:46

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.