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

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

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