btSoftRigidDynamicsWorld 类是 Ammo.js 物理库中的一个类，表示一个动态世界，用于处理软体和刚体物体的物理模拟。让我们按照输入参数、输出、属性和方法来详细解释其 API：
输入参数：
dispatcher：这是一个btCollisionDispatcher实例，负责分派碰撞检测和处理。broadphase：一个btBroadphaseInterface实例，用于广义相交检测，例如高效地识别潜在的碰撞对。solver：一个btConstraintSolver实例，负责解决刚体和软体之间的约束。collisionConfiguration：一个btCollisionConfiguration实例，配置碰撞检测算法的行为。softBodySolver：一个btSoftBodySolver实例，负责解决软体物理模拟。
输出：
一个 btSoftRigidDynamicsWorld 实例，代表着模拟软体和刚体物理的动态世界。
属性：
- 重力（Gravity）：表示作用于世界中物体的重力。
- 世界信息（World Info）：世界的配置信息，如重力和模拟参数等。
方法：
addSoftBody(softBody, collisionFilterGroup, collisionFilterMask)：将软体添加到世界中进行模拟。collisionFilterGroup和collisionFilterMask参数确定软体属于哪些碰撞组，并且与哪些碰撞组进行交互。removeSoftBody(softBody)：从世界中移除软体。addRigidBody(rigidBody, collisionFilterGroup, collisionFilterMask)：将刚体添加到世界中进行模拟。collisionFilterGroup和collisionFilterMask参数确定刚体属于哪些碰撞组，并且与哪些碰撞组进行交互。removeRigidBody(rigidBody)：从世界中移除刚体。setGravity(gravityVector)：设置作用于世界中物体的重力。stepSimulation(deltaTime, maxSubSteps, fixedTimeStep)：按照指定的时间步长 (deltaTime) 推进模拟。maxSubSteps确定要执行的最大子步数，fixedTimeStep指定模拟的固定时间步长。getGravity()：获取当前作用于世界中物体的重力。getWorldInfo()：获取包含世界配置设置的世界信息对象。getSoftBodyArray()：获取当前世界中所有软体的数组。getRigidBodyArray()：获取当前世界中所有刚体的数组。setInternalTickCallback(callback, worldUserInfo)：设置在每个模拟步骤期间内部调用的回调函数。这可用于自定义处理或调试目的。setWorldUserInfo(worldUserInfo)：设置与世界关联的用户定义信息。getWorldUserInfo()：获取与世界关联的用户定义信息。
这些方法允许您操纵和控制动态世界，添加和移除对象，设置重力，推进模拟，并获取有关世界及其内容的信息。
demo 源码
<html lang="en">
<head>
<title>Ammo.js softbody cloth demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<style>
body {
color: #333;
}
</style>
</head>
<body>
<div id="info">Ammo.js physics soft body cloth demo<br>Press Q or A to move the arm.</div> <!-- 显示提示信息 -->
<div id="container"></div> <!-- 用于渲染 Three.js 场景 -->
<script src="jsm/libs/ammo.wasm.js"></script> <!-- 引入 Ammo.js 的 WASM 文件 -->
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js", <!-- 导入 Three.js -->
"three/addons/": "./jsm/" <!-- 导入 Three.js 的附加模块 -->
}
}
</script>
<script type="module">
import * as THREE from 'three'; <!-- 导入 Three.js 库 -->
import Stats from 'three/addons/libs/stats.module.js'; <!-- 导入性能统计模块 -->
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; <!-- 导入 OrbitControls 控制器 -->
// Graphics variables
let container, stats; <!-- 定义图形相关的变量 -->
let camera, controls, scene, renderer; <!-- 定义相机、控制器、场景、渲染器 -->
let textureLoader; <!-- 定义纹理加载器 -->
const clock = new THREE.Clock(); <!-- 创建时钟对象 -->
// Physics variables
const gravityConstant = - 9.8; <!-- 定义重力常数 -->
let physicsWorld; <!-- 定义物理世界对象 -->
const rigidBodies = []; <!-- 用于存储刚体的数组 -->
const margin = 0.05; <!-- 定义边距 -->
let hinge; <!-- 定义铰链约束对象 -->
let cloth; <!-- 定义布料对象 -->
let transformAux1; <!-- 定义辅助变换对象 -->
let armMovement = 0; <!-- 定义臂的移动量，默认为0 -->
Ammo().then( function ( AmmoLib ) { <!-- 异步加载 Ammo.js 库并初始化 -->
Ammo = AmmoLib;
init(); <!-- 调用初始化函数 -->
animate(); <!-- 调用动画函数 -->
} );
function init() {
initGraphics(); <!-- 初始化图形相关设置 -->
initPhysics(); <!-- 初始化物理相关设置 -->
createObjects(); <!-- 创建物体对象 -->
initInput(); <!-- 初始化输入监听 -->
}
function initGraphics() {
container = document.getElementById( 'container' ); <!-- 获取容器元素 -->
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 ); <!-- 创建透视相机 -->
scene = new THREE.Scene(); <!-- 创建场景 -->
scene.background = new THREE.Color( 0xbfd1e5 ); <!-- 设置场景背景色 -->
camera.position.set( - 12, 7, 4 ); <!-- 设置相机位置 -->
renderer = new THREE.WebGLRenderer( { antialias: true } ); <!-- 创建 WebGL 渲染器 -->
renderer.setPixelRatio( window.devicePixelRatio ); <!-- 设置像素比例 -->
renderer.setSize( window.innerWidth, window.innerHeight ); <!-- 设置渲染器尺寸 -->
renderer.shadowMap.enabled = true; <!-- 启用阴影 -->
container.appendChild( renderer.domElement ); <!-- 将渲染器元素添加到容器中 -->
controls = new OrbitControls( camera, renderer.domElement ); <!-- 创建轨道控制器 -->
controls.target.set( 0, 2, 0 ); <!-- 设置控制器焦点 -->
controls.update(); <!-- 更新控制器 -->
textureLoader = new THREE.TextureLoader(); <!-- 创建纹理加载器 -->
const ambientLight = new THREE.AmbientLight( 0xbbbbbb ); <!-- 创建环境光 -->
scene.add( ambientLight ); <!-- 将环境光添加到场景中 -->
const light = new THREE.DirectionalLight( 0xffffff, 3 ); <!-- 创建平行光 -->
light.position.set( - 7, 10, 15 ); <!-- 设置光源位置 -->
light.castShadow = true; <!-- 启用阴影 -->
const d = 10;
light.shadow.camera.left = - d; <!-- 设置阴影相机左边界 -->
light.shadow.camera.right = d; <!-- 设置阴影相机右边界 -->
light.shadow.camera.top = d; <!-- 设置阴影相机上边界 -->
light.shadow.camera.bottom = - d; <!-- 设置阴影相机下边界 -->
light.shadow.camera.near = 2; <!-- 设置阴影相机近裁剪面 -->
light.shadow.camera.far = 50; <!-- 设置阴影相机远裁剪面 -->
light.shadow.mapSize.x = 1024; <!-- 设置阴影贴图宽度 -->
light.shadow.mapSize.y = 1024; <!-- 设置阴影贴图高度 -->
light.shadow.bias = - 0.003; <!-- 设置阴影偏移 -->
scene.add( light ); <!-- 将平行光添加到场景中 -->
stats = new Stats(); <!-- 创建性能统计器 -->
stats.domElement.style.position = 'absolute'; <!-- 设置性能统计器位置样式 -->
stats.domElement.style.top = '0px'; <!-- 设置性能统计器顶部样式 -->
container.appendChild( stats.domElement ); <!-- 将性能统计器元素添加到容器中 -->
window.addEventListener( 'resize', onWindowResize ); <!-- 监听窗口大小变化事件 -->
}
function initPhysics() {
// Physics configuration
const collisionConfiguration = new Ammo.btSoftBodyRigidBodyCollisionConfiguration(); <!-- 创建碰撞配置对象 -->
const dispatcher = new Ammo.btCollisionDispatcher
( collisionConfiguration ); <!-- 创建碰撞调度器对象 -->
const broadphase = new Ammo.btDbvtBroadphase(); <!-- 创建宽相对象 -->
const solver = new Ammo.btSequentialImpulseConstraintSolver(); <!-- 创建顺序脉冲约束求解器对象 -->
const softBodySolver = new Ammo.btDefaultSoftBodySolver(); <!-- 创建默认软体求解器对象 -->
physicsWorld = new Ammo.btSoftRigidDynamicsWorld( dispatcher, broadphase, solver, collisionConfiguration, softBodySolver ); <!-- 创建软刚体动力学世界对象 -->
physicsWorld.setGravity( new Ammo.btVector3( 0, gravityConstant, 0 ) ); <!-- 设置重力 -->
physicsWorld.getWorldInfo().set_m_gravity( new Ammo.btVector3( 0, gravityConstant, 0 ) ); <!-- 设置世界重力 -->
transformAux1 = new Ammo.btTransform(); <!-- 创建辅助变换对象 -->
}
function createObjects() {
const pos = new THREE.Vector3(); <!-- 创建位置向量 -->
const quat = new THREE.Quaternion(); <!-- 创建四元数对象 -->
// Ground
pos.set( 0, - 0.5, 0 ); <!-- 设置地面位置 -->
quat.set( 0, 0, 0, 1 ); <!-- 设置地面四元数 -->
const ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) ); <!-- 创建地面 -->
ground.castShadow = true; <!-- 启用地面阴影 -->
ground.receiveShadow = true; <!-- 启用地面接收阴影 -->
textureLoader.load( 'textures/grid.png', function ( texture ) { <!-- 加载纹理 -->
texture.colorSpace = THREE.SRGBColorSpace; <!-- 设置纹理颜色空间 -->
texture.wrapS = THREE.RepeatWrapping; <!-- 设置纹理水平重复方式 -->
texture.wrapT = THREE.RepeatWrapping; <!-- 设置纹理垂直重复方式 -->
texture.repeat.set( 40, 40 ); <!-- 设置纹理重复次数 -->
ground.material.map = texture; <!-- 设置地面纹理 -->
ground.material.needsUpdate = true;
} );
// Wall
const brickMass = 0.5; <!-- 设置砖块质量 -->
const brickLength = 1.2; <!-- 设置砖块长度 -->
const brickDepth = 0.6; <!-- 设置砖块深度 -->
const brickHeight = brickLength * 0.5; <!-- 计算砖块高度 -->
const numBricksLength = 6; <!-- 设置砖块长度数量 -->
const numBricksHeight = 8; <!-- 设置砖块高度数量 -->
const z0 = - numBricksLength * brickLength * 0.5; <!-- 计算初始位置 -->
pos.set( 0, brickHeight * 0.5, z0 ); <!-- 设置初始位置 -->
quat.set( 0, 0, 0, 1 ); <!-- 设置初始四元数 -->
for ( let j = 0; j < numBricksHeight; j ++ ) { <!-- 创建砖块墙 -->
const oddRow = ( j % 2 ) == 1;
pos.z = z0;
if ( oddRow ) {
pos.z -= 0.25 * brickLength;
}
const nRow = oddRow ? numBricksLength + 1 : numBricksLength;
for ( let i = 0; i < nRow; i ++ ) {
let brickLengthCurrent = brickLength;
let brickMassCurrent = brickMass;
if ( oddRow && ( i == 0 || i == nRow - 1 ) ) {
brickLengthCurrent *= 0.5;
brickMassCurrent *= 0.5;
}
const brick = createParalellepiped( brickDepth, brickHeight, brickLengthCurrent, brickMassCurrent, pos, quat, createMaterial() );
brick.castShadow = true;
brick.receiveShadow = true;
if ( oddRow && ( i == 0 || i == nRow - 2 ) ) {
pos.z += 0.75 * brickLength;
} else {
pos.z += brickLength;
}
}
pos.y += brickHeight;
}
// The cloth
// Cloth graphic object
const clothWidth = 4; <!-- 设置布料宽度 -->
const clothHeight = 3; <!-- 设置布料高度 -->
const clothNumSegmentsZ = clothWidth * 5; <!-- 设置布料 Z 轴分段数 -->
const clothNumSegmentsY = clothHeight * 5; <!-- 设置布料 Y 轴分段数 -->
const clothPos = new THREE.Vector3( - 3, 3, 2 ); <!-- 设置布料位置 -->
const clothGeometry = new THREE.PlaneGeometry( clothWidth, clothHeight, clothNumSegmentsZ, clothNumSegmentsY ); <!-- 创建布料几何体 -->
clothGeometry.rotateY( Math.PI * 0.5 ); <!-- 旋转布料几何体 -->
clothGeometry.translate( clothPos.x, clothPos.y + clothHeight * 0.5, clothPos.z - clothWidth * 0.5 ); <!-- 平移布料几何体 -->
const clothMaterial = new THREE.MeshLambertMaterial( { color: 0xFFFFFF, side: THREE.DoubleSide } ); <!-- 创建布料材质 -->
cloth = new THREE.Mesh( clothGeometry, clothMaterial ); <!-- 创建布料对象 -->
cloth.castShadow = true; <!-- 启用布料阴影 -->
cloth.receiveShadow = true; <!-- 启用布料接收阴影 -->
scene.add( cloth ); <!-- 将布料添加到场景中 -->
textureLoader.load( 'textures/grid.png', function ( texture ) { <!-- 加载纹理 -->
texture.colorSpace = THREE.SRGBColorSpace; <!-- 设置纹理颜色空间 -->
texture.wrapS = THREE.RepeatWrapping; <!-- 设置纹理水平重复方式 -->
texture.wrapT = THREE.RepeatWrapping; <!-- 设置纹理垂直重复方式 -->
texture.repeat.set( clothNumSegmentsZ, clothNumSegmentsY ); <!-- 设置纹理重复次数 -->
cloth.material.map = texture; <!-- 设置布料纹理 -->
cloth.material.needsUpdate = true;
} );
// Cloth physic object
const softBodyHelpers = new Ammo.btSoftBodyHelpers
(); <!-- 创建软体助手对象 -->
const clothCorner00 = new Ammo.btVector3( clothPos.x, clothPos.y + clothHeight, clothPos.z ); <!-- 设置布料顶点位置 -->
const clothCorner01 = new Ammo.btVector3( clothPos.x, clothPos.y + clothHeight, clothPos.z - clothWidth ); <!-- 设置布料顶点位置 -->
const clothCorner10 = new Ammo.btVector3( clothPos.x, clothPos.y, clothPos.z ); <!-- 设置布料顶点位置 -->
const clothCorner11 = new Ammo.btVector3( clothPos.x, clothPos.y, clothPos.z - clothWidth ); <!-- 设置布料顶点位置 -->
const clothSoftBody = softBodyHelpers.CreatePatch( physicsWorld.getWorldInfo(), clothCorner00, clothCorner01, clothCorner10, clothCorner11, clothNumSegmentsZ + 1, clothNumSegmentsY + 1, 0, true ); <!-- 创建布料软体对象 -->
const sbConfig = clothSoftBody.get_m_cfg(); <!-- 获取软体配置对象 -->
sbConfig.set_viterations( 10 ); <!-- 设置速度迭代次数 -->
sbConfig.set_piterations( 10 ); <!-- 设置位置迭代次数 -->
clothSoftBody.setTotalMass( 0.9, false ); <!-- 设置总质量 -->
Ammo.castObject( clothSoftBody, Ammo.btCollisionObject ).getCollisionShape().setMargin( margin * 3 ); <!-- 设置碰撞形状边距 -->
physicsWorld.addSoftBody( clothSoftBody, 1, - 1 ); <!-- 将布料软体添加到物理世界 -->
cloth.userData.physicsBody = clothSoftBody; <!-- 将物理软体对象存储在布料对象的自定义数据中 -->
// Disable deactivation
clothSoftBody.setActivationState( 4 ); <!-- 禁用物理软体的休眠状态 -->
// The base
const armMass = 2; <!-- 设置臂的质量 -->
const armLength = 3 + clothWidth; <!-- 计算臂的长度 -->
const pylonHeight = clothPos.y + clothHeight; <!-- 计算支柱高度 -->
const baseMaterial = new THREE.MeshPhongMaterial( { color: 0x606060 } ); <!-- 创建基座材质 -->
pos.set( clothPos.x, 0.1, clothPos.z - armLength ); <!-- 设置基座位置 -->
quat.set( 0, 0, 0, 1 ); <!-- 设置基座四元数 -->
const base = createParalellepiped( 1, 0.2, 1, 0, pos, quat, baseMaterial ); <!-- 创建基座 -->
base.castShadow = true; <!-- 启用基座阴影 -->
base.receiveShadow = true; <!-- 启用基座接收阴影 -->
pos.set( clothPos.x, 0.5 * pylonHeight, clothPos.z - armLength ); <!-- 设置支柱位置 -->
const pylon = createParalellepiped( 0.4, pylonHeight, 0.4, 0, pos, quat, baseMaterial ); <!-- 创建支柱 -->
pylon.castShadow = true; <!-- 启用支柱阴影 -->
pylon.receiveShadow = true; <!-- 启用支柱接收阴影 -->
pos.set( clothPos.x, pylonHeight + 0.2, clothPos.z - 0.5 * armLength ); <!-- 设置臂位置 -->
const arm = createParalellepiped( 0.4, 0.4, armLength + 0.4, armMass, pos, quat, baseMaterial ); <!-- 创建臂 -->
arm.castShadow = true; <!-- 启用臂阴影 -->
arm.receiveShadow = true; <!-- 启用臂接收阴影 -->
// Glue the cloth to the arm
const influence = 0.5; <!-- 设置影响因子 -->
clothSoftBody.appendAnchor( 0, arm.userData.physicsBody, false, influence ); <!-- 添加布料到臂的锚点 -->
clothSoftBody.appendAnchor( clothNumSegmentsZ, arm.userData.physicsBody, false, influence ); <!-- 添加布料到臂的锚点 -->
// Hinge constraint to move the arm
const pivotA = new Ammo.btVector3( 0, pylonHeight * 0.5, 0 ); <!-- 设置铰链约束 A 点位置 -->
const pivotB = new Ammo.btVector3( 0, - 0.2, - armLength * 0.5 ); <!-- 设置铰链约束 B 点位置 -->
const axis = new Ammo.btVector3( 0, 1, 0 ); <!-- 设置铰链约束轴向 -->
hinge = new Ammo.btHingeConstraint( pylon.userData.physicsBody, arm.userData.physicsBody, pivotA, pivotB, axis, axis, true ); <!-- 创建铰链约束对象 -->
physicsWorld.addConstraint( hinge, true ); <!-- 将铰链约束添加到物理世界 -->
}
function createParalellepiped( sx, sy, sz, mass, pos, quat, material ) {
const threeObject = new THREE.Mesh( new THREE.BoxGeometry( sx, sy, sz, 1, 1, 1 ), material ); <!-- 创建立方体网格对象 -->
const shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) ); <!-- 创建立方体碰撞形状 -->
shape.setMargin( margin ); <!-- 设置碰撞形状边距 -->
createRigidBody( threeObject, shape, mass, pos, quat ); <!-- 创建刚体对象 */
return threeObject;
}
function createRigidBody( threeObject, physicsShape, mass, pos, quat ) {
threeObject.position.copy( pos ); <!-- 复制位置 */
threeObject.quaternion.copy( quat
); <!-- 复制四元数 */
const transform = new Ammo.btTransform(); <!-- 创建变换对象 */
transform.setIdentity(); <!-- 初始化变换对象 */
transform.setOrigin( new Ammo.btVector3( pos.x, pos.y, pos.z ) ); <!-- 设置变换对象的位置 */
transform.setRotation( new Ammo.btQuaternion( quat.x, quat.y, quat.z, quat.w ) ); <!-- 设置变换对象的旋转 */
const motionState = new Ammo.btDefaultMotionState( transform ); <!-- 创建默认运动状态 */
const localInertia = new Ammo.btVector3( 0, 0, 0 ); <!-- 创建局部惯性矩阵 */
physicsShape.calculateLocalInertia( mass, localInertia ); <!-- 计算局部惯性矩阵 */
const rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, physicsShape, localInertia ); <!-- 创建刚体信息对象 */
const body = new Ammo.btRigidBody( rbInfo ); <!-- 创建刚体对象 */
threeObject.userData.physicsBody = body; <!-- 存储刚体对象到网格对象的自定义数据中 */
scene.add( threeObject ); <!-- 将网格对象添加到场景中 */
if ( mass > 0 ) {
rigidBodies.push( threeObject ); <!-- 如果质量大于0，将网格对象添加到刚体数组中 */
// Disable deactivation
body.setActivationState( 4 ); <!-- 禁用休眠状态 */
}
physicsWorld.addRigidBody( body ); <!-- 将刚体添加到物理世界中 */
return body;
}
function initInput() {
window.addEventListener( 'keydown', function ( event ) { <!-- 监听按键事件 */
switch ( event.keyCode ) { <!-- 根据按键码执行不同操作 */
case 81: // Q <!-- 按 Q 键，左移臂 -->
armMovement = 1;
break;
case 65: // A <!-- 按 A 键，右移臂 */
armMovement = - 1;
break;
}
} );
window.addEventListener( 'keyup', function ( event ) { <!-- 监听松开按键事件 */
switch ( event.keyCode ) { <!-- 根据按键码执行不同操作 */
case 81: // Q <!-- 松开 Q 键，停止臂的移动 */
case 65: // A <!-- 松开 A 键，停止臂的移动 */
armMovement = 0;
break;
}
} );
}
function animate() {
requestAnimationFrame( animate ); <!-- 请求动画帧 */
const deltaTime = clock.getDelta(); <!-- 获取两帧之间的时间差 */
if ( deltaTime > 0 ) {
updatePhysics( deltaTime ); <!-- 更新物理 */
updateArmMovement(); <!-- 更新臂的移动 */
}
render(); <!-- 渲染场景 */
stats.update(); <!-- 更新性能统计器 */
}
function updatePhysics( deltaTime ) {
// Step world
physicsWorld.stepSimulation( deltaTime, 10 ); <!-- 更新物理世界 */
// Update cloth
const softBody = cloth.userData.physicsBody; <!-- 获取布料软体对象 */
const clothPositions = cloth.geometry.attributes.position.array; <!-- 获取布料几何体的位置数组 */
const numVerts = clothPositions.length / 3; <!-- 获取布料顶点数量 */
const nodes = softBody.get_m_nodes(); <!-- 获取布料软体的节点对象 */
for ( let i = 0; i < numVerts; i ++ ) {
const node = nodes.at( i ); <!-- 获取当前节点 */
const nodePos = node.get_m_x(); <!-- 获取当前节点的位置 */
clothPositions[ i * 3 ] = nodePos.x(); <!-- 更新布料顶点位置 */
clothPositions[ i * 3 + 1 ] = nodePos.y(); <!-- 更新布料顶点位置 */
clothPositions[ i * 3 + 2 ] = nodePos.z(); <!-- 更新布料顶点位置 */
}
cloth.geometry.attributes.position.needsUpdate = true; <!-- 标记位置属性需要更新 */
}
function updateArmMovement() {
if ( armMovement !== 0 ) { <!-- 如果臂的移动量不为0 */
const hingeConstraint = hinge; <!-- 获取铰链约束对象 */
const angle = hingeConstraint.getHingeAngle(); <!-- 获取铰链约束角度 */
const targetAngle = angle + armMovement * 0.05; <!-- 计算目标角度 */
hingeConstraint.enableAngularMotor( true, 1.5, 50 ); <!-- 启用角动力器 */
hingeConstraint.setMotorTarget( targetAngle, 0.8 ); <!-- 设置角动力器目标角度 */
hingeConstraint.setMaxMotorImpulse( 0.8 ); <!-- 设置角动力器最大冲量 */
} else { <!-- 如果臂的移动量为0 */
hinge.enableAngularMotor( false, 0, 0 ); <!-- 禁用角动力器 */
}
}
function render() {
renderer.render( scene, camera ); <!-- 渲染场景 */
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight; <!-- 更新相机宽高比 */
camera.updateProjectionMatrix(); <!-- 更新投影矩阵 */
renderer.setSize( window.innerWidth, window.innerHeight ); <!-- 更新渲染器尺寸 */
}
</script>
</body>
</html>
