three打造一个多彩鼠标跟随三维冰珠灯光照射动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three打造一个多彩鼠标跟随三维冰珠灯光照射动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>
        body {
            margin: 0;
            width: 100%;
            height: 100%;
        }

        canvas {
            display: block;
        }
    </style>



</head>

<body translate="no">
    <canvas id="canvas"></canvas>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chroma.min.js"></script>
    <script type="module">
    
        import {
            Color,
            DodecahedronBufferGeometry,
            IcosahedronBufferGeometry,
            InstancedBufferAttribute,
            InstancedMesh,
            MathUtils,
            Object3D,
            PointLight,
            Scene,
            ShaderChunk,
            ShaderLib,
            ShaderMaterial,
            TetrahedronBufferGeometry,
            UniformsUtils,
            Vector2,
            Vector3
        } from
        'https://unpkg.com/three@0.120.0/build/three.module.js';

        import {
            EffectComposer
        } from 'https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/EffectComposer.js';
        import {
            RenderPass
        } from 'https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/RenderPass.js';
        import {
            UnrealBloomPass
        } from 'https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/UnrealBloomPass.js';
        import {
            ShaderPass
        } from 'https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/ShaderPass.js';
        import {
            FXAAShader
        } from 'https://unpkg.com/three@0.120.0/examples/jsm/shaders/FXAAShader.js';

        import useThree from '//repo.bfw.wiki/bfwrepo/js/useThree.js';

        App();

        function App() {
            let three,
            scene,
            composer,
            iMesh;
            let pointLight;
            let cscale = chroma.scale(['#dd3e1b', '#0b509c']);

            const NUM_INSTANCES = 5000;
            const instances = [];

            const target = new Vector3();
            const dummy = new Object3D();
            const dummyV = new Vector3();

            const {
                randFloat: rnd,
                randFloatSpread: rndFS
            } = MathUtils;

            init();

            function init() {
                three = useThree().init({
                    canvas: document.getElementById('canvas'),
                    antialias: false,
                    mouse_move: true,
                    mouse_raycast: true,
                    camera_ctrl: {
                        enableDamping: true,
                        dampingFactor: 0.05
                    },

                    camera_fov: 50,
                    camera_pos: new Vector3(0, 0, 250)
                });


                initScene();
                initPostprocessing();
                animate();
            }

            function initScene() {
                scene = new Scene();
                pointLight = new PointLight(0xFFC0C0);
                scene.add(pointLight);

                // const pointLight1 = new PointLight(0x6060FF);
                // pointLight1.position.x = -100;
                // scene.add(pointLight1);
                // const pointLight2 = new PointLight(0xFF6060);
                // pointLight2.position.x = 100;
                // scene.add(pointLight2);

                const geometry = new DodecahedronBufferGeometry(5);
                // const geometry = new IcosahedronBufferGeometry(5);
                // const geometry = new TetrahedronBufferGeometry(5);
                const material = SubSurfaceMaterial();
                iMesh = new InstancedMesh(geometry, material, NUM_INSTANCES);
                scene.add(iMesh);

                for (let i = 0; i < NUM_INSTANCES; i++) {
                    instances.push({
                        position: new Vector3(rndFS(200), rndFS(200), rndFS(200)),
                        scale: rnd(0.2, 1),
                        velocity: new Vector3(rndFS(2), rndFS(2), rndFS(2)),
                        attraction: 0.0025 + rnd(0, 0.01),
                        vlimit: 0.3 + rnd(0, 0.2)
                    });

                }

                for (let i = 0; i < NUM_INSTANCES; i++) {
                    const {
                        position,
                        scale
                    } = instances[i];
                    dummy.position.copy(position);
                    dummy.scale.set(scale, scale, scale);
                    dummy.updateMatrix();
                    iMesh.setMatrixAt(i, dummy.matrix);
                }
                iMesh.instanceMatrix.needsUpdate = true;

                updateColors();
                document.body.addEventListener('click', randomColors);
            }

            function randomColors() {
                const c1 = chroma.random(),
                c2 = chroma.random();
                console.log(c1.hex(), c2.hex());
                cscale = chroma.scale([c1, c2]);
                updateColors();
            }

            function updateColors() {
                const colors = [];
                for (let i = 0; i < NUM_INSTANCES; i++) {
                    const color = new Color(cscale(rnd(0, 1)).hex());
                    colors.push(color.r, color.g, color.b);
                }
                iMesh.geometry.setAttribute('color', new InstancedBufferAttribute(new Float32Array(colors), 3));
            }

            function initPostprocessing() {
                composer = new EffectComposer(three.renderer);

                const renderPass = new RenderPass(scene, three.camera);
                composer.addPass(renderPass);

                const bloomPass = new UnrealBloomPass(new Vector2.........完整代码请登录后点击上方下载按钮下载查看