【玩转 Cloud Studio】五分钟搭建个人酷炫3D博客（含源码）

# 1.安装依赖（仅第一次需要）
npm i
# 2.运行
npm run dev

xml复制代码
  
    
    
  
  
    
    
  

java复制代码//引入库
import * as THREE from "three";
import * as Ammo from "./builds/ammo";
import {scene} from "./resources/world";

//初始化 Ammo.js 物理引擎
Ammo().then((Ammo) => {

    // 创建物理世界
    function createPhysicsWorld() {

        //完全碰撞检测算法
        let collisionConfiguration = new Ammo.btDefaultCollisionConfiguration();

        // 重叠对/碰撞的调度计算
        let dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration);

        // 所有可能碰撞对的宽相位碰撞检测列表
        let overlappingPairCache = new Ammo.btDbvtBroadphase();

        // 使物体正确地交互，考虑重力、力、碰撞等
        let constraintSolver = new Ammo.btSequentialImpulseConstraintSolver();

        // 根据这些参数创建物理世界。 参考bullet physics文档
        let physicsWorld = new Ammo.btDiscreteDynamicsWorld(
            dispatcher,
            overlappingPairCache,
            constraintSolver,
            collisionConfiguration
        );

        // 添加重力
        physicsWorld.setGravity(new Ammo.btVector3(0, -9.8, 0));
    }

    //创建球体
    function createBall(){
        //球体参数
        let pos = {x: 0, y: 0, z: 0};
        let radius = 2;
        let quat = {x: 0, y: 0, z: 0, w: 1};
        let mass = 3;

        //three.js相关代码

        //创建球体并添加到场景中
        let ball = new THREE.Mesh(new THREE.SphereBufferGeometry(radius), new THREE.MeshStandardMaterial({color: 0xffffff}));
        ball.position.set(pos.x, pos.y, pos.z);
        scene.add(ball);

        //Ammo.js相关代码

        //设置位置和旋转
        let transform = new Ammo.btTransform();
        transform.setOrigin(new Ammo.btVector3(pos.x, pos.y, pos.z));
        transform.setRotation(
            new Ammo.btQuaternion(quat.x, quat.y, quat.z, quat.w)
        );

        //设置物体运动
        let motionState = new Ammo.btDefaultMotionState(transform);

        //设置碰撞边界框
        let collisionShape = new Ammo.btSphereShape(radius);
        collisionShape.setMargin(0.05);

        //设置惯性
        let localInertia = new Ammo.btVector3(0, 0, 0);
        collisionShape.calculateLocalInertia(mass, localInertia);

        //生成创建刚体（物体）的结构信息
        let rigidBodyStructure = new Ammo.btRigidBodyConstructionInfo(
            mass,
            motionState,
            collisionShape,
            localInertia
        );

        //基于上面的结构信息创建物体
        let body = new Ammo.btRigidBody(rigidBodyStructure);

        //当物体运动时，为其添加摩擦力
        body.setFriction(10);
        body.setRollingFriction(10);

        // 将物体添加到物理世界，这样Ammo.js引擎才能不断更新物体的状态
        physicsWorld.addRigidBody(body);
    }

    createPhysicsWorld();
    createBall()
}

scss复制代码//渲染框架
function renderFrame() {

    //记录上一次渲染的时间
    let deltaTime = clock.getDelta();

    //基于用户输入，计算球会受到的力和产生的速度
    moveBall();

    //根据时间更新物理世界状态
    updatePhysics(deltaTime);

    //进行渲染
    renderer.render(scene, camera);

    // 循环
    requestAnimationFrame(renderFrame);
}

//更新物理世界状态的方法定义
function updatePhysics(deltaTime) {

    physicsWorld.stepSimulation(deltaTime, 10);

    //遍历“刚体”列表，并更新物理世界中的所有刚体状态
    for (let i = 0; i < rigidBodies.length; i++) {

        //变量定义：three.js需要的meshObject，和ammo.js需要的ammoObject
        let meshObject = rigidBodies[i];
        let ammoObject = meshObject.userData.physicsBody;

        //获取物体当前运动状态
        let objectMotion = ammoObject.getMotionState();

        //如果物体正在移动，则获取物体的当前位置和旋转信息
        if (objectMotion) {
            objectMotion.getWorldTransform(transform);
            let mPosition = transform.getOrigin();
            let mQuaternion = transform.getRotation();

            // 更新物体的位置和旋转状态
            meshObject.position.set(mPosition.x(), mPosition.y(), mPosition.z());
            meshObject.quaternion.set(mQuaternion.x(), mQuaternion.y(), mQuaternion.z(), mQuaternion.w());
        }
    }
}

ini复制代码// 在坐标平面上保持对当前球体运动的跟踪
let moveDirection = { left: 0, right: 0, forward: 0, back: 0 };

//控制器div在屏幕上的位置坐标
let coordinates = { x: 0, y: 0 };

//保存触摸事件的起始坐标的变量
let dragStart = null;

//创建控制器div元素
const stick = document.createElement("div");

//监听用户触摸点的移动
function handleMove(event) {
    //没有移动，返回
    if (dragStart === null) return;

    //有移动，获取新的触摸点的x、y坐标
    if (event.changedTouches) {
        event.clientX = event.changedTouches[0].clientX;
        event.clientY = event.changedTouches[0].clientY;
    }

    //根据触摸点的移动，计算出控制器div的实时坐标
    const xDiff = event.clientX - dragStart.x;
    const yDiff = event.clientY - dragStart.y;
    const angle = Math.atan2(yDiff, xDiff);
    const distance = Math.min(maxDiff, Math.hypot(xDiff, yDiff));
    const xNew = distance * Math.cos(angle);
    const yNew = distance * Math.sin(angle);
    coordinates = { x: xNew, y: yNew };

    //根据实时坐标更新样式
    stick.style.transform = `translate3d(${xNew}px, ${yNew}px, 0px)`;

    //根据坐标计算出球的运动方向
    touchEvent(coordinates);
}

//根据用户的触摸点移动坐标计算出球的运动方向
function touchEvent(coordinates) {

    // 向右运动
    if (coordinates.x > 30) {
        moveDirection.right = 1;
        moveDirection.left = 0;
    // 向左运动
    } else if (coordinates.x < -30) {
        moveDirection.left = 1;
        moveDirection.right = 0;
    } else {
        moveDirection.right = 0;
        moveDirection.left = 0;
    }

    //向前运动
    if (coordinates.y > 30) {
        moveDirection.back = 1;
        moveDirection.forward = 0;
    //向后运动
    } else if (coordinates.y < -30) {
        moveDirection.forward = 1;
        moveDirection.back = 0;
    } else {
        moveDirection.forward = 0;
        moveDirection.back = 0;
    }
}