threejs实现三维泡泡球聚集碰撞物理动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：threejs实现三维泡泡球聚集碰撞物理动画效果代码

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

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

<head>

    <meta charset="UTF-8">

 
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/alphardex/aqua.css/dist/aqua.min.css'>

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

:root {
            --white-grad-1: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
        }

        .bg-white-grad-1 {
            background: var(--white-grad-1);
        }
    </style>




</head>

<body>
    <div class="relative w-screen h-screen">
        <div class="bouncy-balloon w-full h-full bg-black bg-white-grad-1"></div>
    </div>


    <script type="module">
        import * as THREE from "https://cdn.skypack.dev/three@0.124.0";
        import ky from "https://cdn.skypack.dev/kyouka@1.2.5";
        import {
            OrbitControls
        } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/controls/OrbitControls";
        import {
            GLTFLoader
        } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/loaders/GLTFLoader";
        import {
            FBXLoader
        } from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/loaders/FBXLoader";
        import Stats from "https://cdn.skypack.dev/three@0.124.0/examples/jsm/libs/stats.module";
        import * as CANNON from "https://cdn.skypack.dev/cannon-es@0.18.0";
        import {
            EffectComposer,
            RenderPass,
            NormalPass,
            SSAOEffect,
            EffectPass
        } from "https://cdn.skypack.dev/postprocessing@6.22.2";
        const calcAspect = (el) => el.clientWidth / el.clientHeight;
        const getNormalizedMousePos = (e) => {
            return {
                x: (e.clientX / window.innerWidth) * 2 - 1,
                y: -(e.clientY / window.innerHeight) * 2 + 1
            };
        };
        // 三维点
        class Point {
            constructor(p) {
                this.x = p.x;
                this.y = p.y;
                this.z = p.z;
            }
        }
        // 数组转化为点
        const array2Point = (arr) => new Point({
            x: arr[0], y: arr[1], z: arr[2]
        });
        // 点转化为数组
        const point2Array = (point) => [point.x, point.y, point.z];
        // 多个数组转化为多个点
        const arrays2Point = (arrs) => arrs.map((item) => array2Point(item));
        // 点转化为Three.js的向量
        const point2ThreeVector = (point) => new THREE.Vector3(point.x, point.y, point.z);
        // 点转化为Cannon.js的向量
        const point2CannonVec = (point) => new CANNON.Vec3(point.x, point.y, point.z);
        class MeshPhysicsObject {
            constructor(mesh, body, copyPosition = true, copyQuaternion = true) {
                this.mesh = mesh;
                this.body = body;
                this.copyPosition = copyPosition;
                this.copyQuaternion = copyQuaternion;
            }
        }
        class Base {
            constructor(sel, debug = false) {
                this.debug = debug;
                this.container = document.querySelector(sel);
                this.perspectiveCameraParams = {
                    fov: 75,
                    near: 0.1,
                    far: 100
                };
                this.orthographicCameraParams = {
                    zoom: 2,
                    near: -100,
                    far: 1000
                };
                this.cameraPosition = new THREE.Vector3(0, 3, 10);
                this.lookAtPosition = new THREE.Vector3(0, 0, 0);
                this.rendererParams = {
                    outputEncoding: THREE.LinearEncoding,
                    config: {
                        alpha: true,
                        antialias: true
                    }
                };
                this.mousePos = new THREE.Vector2(0, 0);
                this.mouseSpeed = 0;
            }
            // 初始化
            init() {
                this.createScene();
                this.createPerspectiveCamera();
                this.createRenderer();
                this.createMesh({});
                this.createLight();
                this.createOrbitControls();
                this.addListeners();
                this.setLoop();
            }
            // 创建场景
            createScene() {
                const scene = new THREE.Scene();
                if (this.debug) {
                    scene.add(new THREE.AxesHelper());
                    const stats = Stats();
                    this.container.appendChild(stats.dom);
                    this.stats = stats;
                }
                this.scene = scene;
            }
            // 创建透视相机
            createPerspectiveCamera() {
                const {
                    perspectiveCameraParams,
                    cameraPosition,
                    lookAtPosition
                } = this;
                const {
                    fov,
                    near,
                    far
                } = perspectiveCameraParams;
                const aspect = calcAspect(this.container);
                const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
                camera.position.copy(cameraPosition);
                camera.lookA.........完整代码请登录后点击上方下载按钮下载查看