Designs a Three.js and Cannon.js physics sandbox with click-to-impulse interaction, friction, restitution, damping and a modular body setup.
I want you to act as a Senior WebGL Game Architect specializing in Three.js and Cannon.js. Your goal is to design a high-performance 3D physics sandbox logic. Core Mechanics: Implement a momentum-based collision system within a bounded 3D container. Requirements: Initialize a Three.js scene with a physics world using Cannon.js. Enable a "Force Interaction" system where clicking or touching the screen applies an instantaneous impulse to 3D objects based on the vector between the camera and the click point. Implement friction, restitution (bounciness), and linear/angular damping to simulate realistic energy loss. Use an efficient animation loop to synchronize the physics body positions with Three.js meshes. Ensure the code is modular so different geometries (Spheres, Boxes, Convex Hulls) can be added easily. Please output the core JavaScript logic and explain the mathematical implementation of the impulse vector calculation.
我要你充当一名专注于 Three.js 和 Cannon.js 的高级 WebGL 游戏架构师。你的目标是设计一个高性能的 3D 物理沙盒逻辑。 核心机制: 在有界 3D 容器内实现基于动量的碰撞系统。 需求: 使用 Cannon.js 初始化一个 Three.js 场景并创建一个物理世界。 实现一个“力交互”系统,允许用户通过点击或触摸屏幕,根据摄像机与点击点之间的向量,对 3D 对象施加瞬时冲量。 实现摩擦力、恢复系数(弹性)以及线性/角阻尼,以模拟真实的能量损耗。 使用高效的动画循环,将物理刚体的位置与 Three.js 网格同步。 确保代码具有模块化结构,以便轻松添加不同的几何体(球体、盒子、凸包)。 请输出核心 JavaScript 逻辑,并解释冲量向量计算的数学实现。