3D\u6eda\u7403\u6e38\u620f – \u5c45\u4e2d\u5bb9\u5668<\/title>\n <style>\n \/* \u6837\u5f0f\uff1a\u8ba9body\u548chtml\u5143\u7d20\u5360\u6ee1\u6574\u4e2a\u89c6\u53e3\uff0c\u5e76\u8bbe\u7f6e\u4e3aflex\u5bb9\u5668 *\/\n body, html {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n overflow: hidden; \/* \u9632\u6b62\u5bb9\u5668\u9875\u9762\u51fa\u73b0\u6eda\u52a8\u6761 *\/\n background-color: #282c34; \/* \u7ed9\u5bb9\u5668\u9875\u9762\u4e00\u4e2a\u6df1\u8272\u80cc\u666f\uff0c\u7a81\u51fa\u6e38\u620f\u7a97\u53e3 *\/\n display: flex;\n justify-content: center; \/* \u6c34\u5e73\u5c45\u4e2d *\/\n align-items: center; \/* \u5782\u76f4\u5c45\u4e2d *\/\n }\n \n \/* \u6837\u5f0f\uff1a\u8bbe\u7f6eiframe\u7684\u5c3a\u5bf8\u548c\u5916\u89c2 *\/\n iframe {\n width: 95vw; \/* \u5bbd\u5ea6\u4e3a\u89c6\u53e3\u5bbd\u5ea6\u768495% *\/\n height: 95vh; \/* \u9ad8\u5ea6\u4e3a\u89c6\u53e3\u9ad8\u5ea6\u768495% *\/\n border: 3px solid #444;\n border-radius: 12px;\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); \/* \u6dfb\u52a0\u9634\u5f71\u589e\u52a0\u7acb\u4f53\u611f *\/\n }\n <\/style>\n<\/head>\n<body>\n\n \n <iframe\n title=\"3D\u6eda\u7403\u6e38\u620f\"\n srcdoc=\"\n<!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">\n <title>3D\u6eda\u7403\u6e38\u620f<\/title>\n <style>\n body {\n margin: 0;\n overflow: hidden;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n background-color: #111;\n color: white;\n }\n #game-canvas {\n display: block;\n width: 100%;\n height: 100%;\n }\n #info {\n position: absolute;\n top: 10px;\n width: 100%;\n text-align: center;\n z-index: 100;\n display: block;\n font-size: 16px;\n text-shadow: 0 0 5px black;\n }\n #touch-controls {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n gap: 10px;\n width: 180px;\n height: 120px;\n opacity: 0.7;\n }\n .touch-btn {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 50%;\n font-size: 24px;\n user-select: none;\n cursor: pointer;\n border: 2px solid rgba(255, 255, 255, 0.5);\n }\n #btn-up { grid-column: 2; grid-row: 1; }\n #btn-left { grid-column: 1; grid-row: 2; }\n #btn-down { grid-column: 2; grid-row: 2; }\n #btn-right { grid-column: 3; grid-row: 2; }\n .touch-btn:active {\n background-color: rgba(255, 255, 255, 0.5);\n }\n @media (min-width: 1024px) {\n #touch-controls {\n display: none;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <div id="info">\u4f7f\u7528\u65b9\u5411\u952e\u6216\u89e6\u6478\u5c4f\u63a7\u5236\u5c0f\u7403<\/div>\n <canvas id="game-canvas"><\/canvas>\n\n <div id="touch-controls">\n <div id="btn-up" class="touch-btn">\u25b2<\/div>\n <div id="btn-left" class="touch-btn">\u25c0<\/div>\n <div id="btn-down" class="touch-btn">\u25bc<\/div>\n <div id="btn-right" class="touch-btn">\u25b6<\/div>\n <\/div>\n\n <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js"></script>\n <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cannon.js\/0.6.2\/cannon.min.js"></script>\n\n <script>\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x87ceeb);\n const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\n const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('game-canvas'), antialias: true });\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.shadowMap.enabled = true;\n\n const world = new CANNON.World();\n world.gravity.set(0, -9.82, 0);\n world.broadphase = new CANNON.NaiveBroadphase();\n world.solver.iterations = 10;\n\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);\n scene.add(ambientLight);\n\n const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);\n directionalLight.position.set(10, 20, 5);\n directionalLight.castShadow = true;\n directionalLight.shadow.camera.top = 20;\n directionalLight.shadow.camera.bottom = -20;\n directionalLight.shadow.camera.left = -20;\n directionalLight.shadow.camera.right = 20;\n scene.add(directionalLight);\n \n let sphereMesh, sphereBody;\n const sphereRadius = 0.5;\n\n function createSphere() {\n const sphereGeometry = new THREE.SphereGeometry(sphereRadius, 32, 32);\n const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0xff4500, metalness: 0.3, roughness: 0.4 });\n sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);\n sphereMesh.castShadow = true;\n scene.add(sphereMesh);\n\n const sphereShape = new CANNON.Sphere(sphereRadius);\n sphereBody = new CANNON.Body({\n mass: 5,\n position: new CANNON.Vec3(0, 5, 0),\n shape: sphereShape,\n material: new CANNON.Material()\n });\n world.addBody(sphereBody);\n }\n\n function createPlatforms() {\n const platformMaterial = new THREE.MeshStandardMaterial({ color: 0x4CAF50, roughness: 0.8 });\n const platformPhysicsMaterial = new CANNON.Material();\n\n const platforms = [\n { size: [10, 1, 10], position: [0, -0.5, 0] },\n { size: [10, 1, 4], position: [0, -0.5, -10] },\n { size: [4, 1, 10], position: [-10, -0.5, -15] },\n { size: [10, 1, 4], position: [-15, -0.5, -25] },\n { size: [4, 1, 15], position: [-25, -0.5, -17.5] },\n ];\n\n platforms.forEach(p => {\n const { size, position } = p;\n const groundGeometry = new THREE.BoxGeometry(size[0], size[1], size[2]);\n const groundMesh = new THREE.Mesh(groundGeometry, platformMaterial);\n groundMesh.position.set(position[0], position[1], position[2]);\n groundMesh.receiveShadow = true;\n scene.add(groundMesh);\n\n const groundShape = new CANNON.Box(new CANNON.Vec3(size[0] \/ 2, size[1] \/ 2, size[2] \/ 2));\n const groundBody = new CANNON.Body({\n mass: 0,\n shape: groundShape,\n position: new CANNON.Vec3(position[0], position[1], position[2]),\n material: platformPhysicsMaterial\n });\n world.addBody(groundBody);\n });\n }\n\n function createObstacles() {\n const obstacleMaterial = new THREE.MeshStandardMaterial({ color: 0x996633, roughness: 0.9 });\n const obstaclePhysicsMaterial = new CANNON.Material();\n\n const obstacles = [\n { size: [1, 1, 1], position: [2, 0.5, -2] },\n { size: [1, 1, 1], position: [-2, 0.5, -3] },\n { size: [8, 1, 1], position: [0, 0.5, -8] },\n { size: [1, 1, 8], position: [-8, 0.5, -15] },\n ];\n\n obstacles.forEach(o => {\n const { size, position } = o;\n const obstacleGeometry = new THREE.BoxGeometry(size[0], size[1], size[2]);\n const obstacleMesh = new THREE.Mesh(obstacleGeometry, obstacleMaterial);\n obstacleMesh.position.set(position[0], position[1], position[2]);\n obstacleMesh.castShadow = true;\n obstacleMesh.receiveShadow = true;\n scene.add(obstacleMesh);\n\n const obstacleShape = new CANNON.Box(new CANNON.Vec3(size[0] \/ 2, size[1] \/ 2, size[2] \/ 2));\n const obstacleBody = new CANNON.Body({\n mass: 0,\n shape: obstacleShape,\n position: new CANNON.Vec3(position[0], position[1], position[2]),\n material: obstaclePhysicsMaterial\n });\n world.addBody(obstacleBody);\n });\n }\n\n\n createSphere();\n createPlatforms();\n createObstacles();\n\n const keysPressed = {};\n const moveForce = 30;\n\n document.addEventListener('keydown', (event) => {\n keysPressed[event.key.toLowerCase()] = true;\n });\n\n document.addEventListener('keyup', (event) => {\n keysPressed[event.key.toLowerCase()] = false;\n });\n\n const touchControls = {\n up: document.getElementById('btn-up'),\n down: document.getElementById('btn-down'),\n left: document.getElementById('btn-left'),\n right: document.getElementById('btn-right'),\n };\n\n Object.keys(touchControls).forEach(key => {\n const btn = touchControls[key];\n btn.addEventListener('touchstart', (e) => { e.preventDefault(); keysPressed[key] = true; }, { passive: false });\n btn.addEventListener('touchend', (e) => { e.preventDefault(); keysPressed[key] = false; }, { passive: false });\n btn.addEventListener('mousedown', () => keysPressed[key] = true);\n btn.addEventListener('mouseup', () => keysPressed[key] = false);\n btn.addEventListener('mouseleave', () => keysPressed[key] = false);\n });\n\n\n function applyControls() {\n const force = new CANNON.Vec3(0, 0, 0);\n if (keysPressed['arrowup'] || keysPressed['w'] || keysPressed['up']) {\n force.z = -moveForce;\n }\n if (keysPressed['arrowdown'] || keysPressed['s'] || keysPressed['down']) {\n force.z = moveForce;\n }\n if (keysPressed['arrowleft'] || keysPressed['a'] || keysPressed['left']) {\n force.x = -moveForce;\n }\n if (keysPressed['arrowright'] || keysPressed['d'] || keysPressed['right']) {\n force.x = moveForce;\n }\n sphereBody.applyForce(force, sphereBody.position);\n }\n \n function resetGame() {\n sphereBody.position.set(0, 5, 0);\n sphereBody.velocity.set(0, 0, 0);\n sphereBody.angularVelocity.set(0, 0, 0);\n }\n\n const clock = new THREE.Clock();\n let lastTime;\n\n function animate() {\n requestAnimationFrame(animate);\n\n const time = clock.getElapsedTime();\n const deltaTime = lastTime ? time - lastTime : 1 \/ 60;\n lastTime = time;\n \n world.step(1 \/ 60, deltaTime, 3);\n\n applyControls();\n\n sphereMesh.position.copy(sphereBody.position);\n sphereMesh.quaternion.copy(sphereBody.quaternion);\n\n const cameraOffset = new THREE.Vector3(0, 5, 10);\n const cameraPosition = new THREE.Vector3().copy(sphereMesh.position).add(cameraOffset);\n camera.position.lerp(cameraPosition, 0.1);\n camera.lookAt(sphereMesh.position);\n\n if (sphereMesh.position.y < -10) {\n resetGame();\n }\n\n renderer.render(scene, camera);\n }\n\n window.addEventListener('resize', () => {\n camera.aspect = window.innerWidth \/ window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n });\n\n animate();\n\n </script>\n<\/body>\n<\/html>\n \">\n <\/iframe>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6b22\u8fce\u6765\u5230\u201c3D\u6eda\u7403\u5927\u5192\u9669\u201d\uff01\u8fd9\u662f\u4e00\u6b3e\u8003\u9a8c\u4f60\u5e73\u8861\u611f\u548c\u53cd\u5e94\u80fd\u529b\u7684\u4f11\u95f2\u95ef\u5173\u6e38\u620f\u3002\u5728\u8fd9\u4e2a\u5145\u6ee1\u6311\u6218\u76843D\u4e16\u754c\u91cc\uff0c\u4f60\u7684\u4efb\u52a1 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-186","post","type-post","status-publish","format-standard","hentry","category-8"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/posts\/186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/comments?post=186"}],"version-history":[{"count":9,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/posts\/186\/revisions"}],"predecessor-version":[{"id":201,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/posts\/186\/revisions\/201"}],"wp:attachment":[{"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/media?parent=186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/categories?post=186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/tags?post=186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":186,"date":"2025-08-06T20:14:36","date_gmt":"2025-08-06T12:14:36","guid":{"rendered":"http:\/\/152.136.195.60\/?p=186"},"modified":"2025-08-06T20:51:17","modified_gmt":"2025-08-06T12:51:17","slug":"%e4%b8%89%e7%bb%b4%e6%bb%9a%e7%90%83%e6%b8%b8%e6%88%8f","status":"publish","type":"post","link":"https:\/\/liusaide.cn\/index.php\/2025\/08\/06\/%e4%b8%89%e7%bb%b4%e6%bb%9a%e7%90%83%e6%b8%b8%e6%88%8f\/","title":{"rendered":"\u4e09\u7ef4\u6eda\u7403\u5927\u5192\u9669"},"content":{"rendered":"\n

\u6b22\u8fce\u6765\u5230\u201c3D\u6eda\u7403\u5927\u5192\u9669\u201d\uff01\u8fd9\u662f\u4e00\u6b3e\u8003\u9a8c\u4f60\u5e73\u8861\u611f\u548c\u53cd\u5e94\u80fd\u529b\u7684\u4f11\u95f2\u95ef\u5173\u6e38\u620f\u3002\u5728\u8fd9\u4e2a\u5145\u6ee1\u6311\u6218\u76843D\u4e16\u754c\u91cc\uff0c\u4f60\u7684\u4efb\u52a1\u662f\u63a7\u5236\u4e00\u4e2a\u5145\u6ee1\u6d3b\u529b\u7684\u5c0f\u7403\uff0c\u5f15\u5bfc\u5b83\u7a7f\u8d8a\u4e00\u7cfb\u5217\u60ac\u6d6e\u5728\u7a7a\u4e2d\u7684\u5e73\u53f0\u548c\u7cbe\u5fc3\u8bbe\u8ba1\u7684\u969c\u788d\u8d5b\u9053\u3002<\/p>\n\n\n\n

\u6e38\u620f\u76ee\u6807<\/h3>\n\n\n\n
\u6838\u5fc3\u76ee\u6807\u975e\u5e38\u7b80\u5355\uff1a\u8ba9\u5c0f\u7403\u4fdd\u6301\u5728\u8d5b\u9053\u4e0a\uff0c\u4e00\u8def\u5411\u524d\uff0c\u4e0d\u8981\u6389\u5165\u65e0\u5c3d\u7684\u865a\u7a7a\uff01<\/strong> \u968f\u7740\u8d5b\u9053\u7684\u5ef6\u4f38\uff0c\u96be\u5ea6\u4f1a\u9010\u6e10\u589e\u52a0\uff0c\u4f60\u9700\u8981\u66f4\u52a0\u7cbe\u51c6\u5730\u64cd\u63a7\u624d\u80fd\u6210\u529f\u3002\u5982\u679c\u5c0f\u7403\u4e0d\u614e\u6389\u843d\uff0c\u6e38\u620f\u4f1a\u81ea\u52a8\u5c06\u4f60\u9001\u56de\u8d77\u70b9\uff0c\u8ba9\u4f60\u968f\u65f6\u53ef\u4ee5\u91cd\u65b0\u6311\u6218\u3002<\/p>\n\n\n\n

\u5982\u4f55\u64cd\u4f5c<\/h3>\n\n\n\n
\u6211\u4eec\u4e3a\u4f60\u63d0\u4f9b\u4e86\u4e24\u79cd\u4fbf\u6377\u7684\u64cd\u63a7\u65b9\u5f0f\uff1a<\/p>\n\n\n\n
\n
\u7535\u8111\u7aef\uff1a<\/strong> \u4f7f\u7528\u952e\u76d8\u4e0a\u7684 \u65b9\u5411\u952e\uff08\u2191\u2193\u2190\u2192\uff09<\/strong> \u6216 W\/A\/S\/D<\/strong> \u952e\u6765\u63a7\u5236\u5c0f\u7403\u7684\u6eda\u52a8\u65b9\u5411\u3002<\/li>\n\n\n\n
\u79fb\u52a8\u7aef\uff1a<\/strong> \u6e38\u620f\u754c\u9762\u4e0b\u65b9\u4f1a\u663e\u793a\u865a\u62df\u65b9\u5411\u952e\uff0c\u76f4\u63a5\u89e6\u6478\u5c4f\u5e55\u4e0a\u7684\u7bad\u5934\u5373\u53ef\u8f7b\u677e\u6e38\u73a9\u3002<\/li>\n<\/ul>\n\n\n\n
\u6e38\u620f\u7279\u8272<\/h3>\n\n\n\n
\n
\u771f\u5b9e\u7684\u7269\u7406\u5f15\u64ce\uff1a<\/strong> \u57fa\u4e8e `cannon.js<\/code> \u7269\u7406\u5f15\u64ce\uff0c\u5c0f\u7403\u7684\u6eda\u52a8\u3001\u52a0\u901f\u548c\u78b0\u649e\u90fd\u8868\u73b0\u5f97\u975e\u5e38\u771f\u5b9e\uff0c\u7ed9\u4f60\u5e26\u6765\u6c89\u6d78\u5f0f\u7684\u4f53\u9a8c\u3002<\/li>\n\n\n\n`
`\u7b80\u6d01\u76843D\u89c6\u89c9\uff1a<\/strong> \u91c7\u7528 three.js<\/code> \u6e32\u67d3\uff0c\u6e38\u620f\u753b\u9762\u5e72\u51c0\u6e05\u723d\uff0c\u8ba9\u4f60\u80fd\u4e13\u6ce8\u4e8e\u64cd\u63a7\u7684\u4e50\u8da3\u3002<\/li>\n\n\n\n`
`\u7cbe\u5fc3\u8bbe\u8ba1\u7684\u969c\u788d\uff1a<\/strong> \u8d5b\u9053\u4e0a\u4e0d\u4ec5\u6709\u72ed\u7a84\u7684\u901a\u9053\uff0c\u8fd8\u6709\u5404\u79cd\u9759\u6001\u969c\u788d\u7269\uff0c\u6bcf\u4e00\u6b21\u524d\u8fdb\u90fd\u5145\u6ee1\u6311\u6218\u3002<\/li>\n\n\n\n`
\u8de8\u5e73\u53f0\u9002\u914d\uff1a<\/strong> \u6e38\u620f\u5b8c\u7f8e\u9002\u914d\u7535\u8111\u548c\u624b\u673a\uff0c\u65e0\u8bba\u4f60\u8eab\u5728\u4f55\u5904\uff0c\u90fd\u53ef\u4ee5\u968f\u65f6\u5f00\u59cb\u4e00\u573a\u5192\u9669\u3002<\/li>\n<\/ul>\n\n\n\n\u51c6\u5907\u597d\u4e86\u5417\uff1f\u96c6\u4e2d\u6ce8\u610f\u529b\uff0c\u6df1\u547c\u5438\uff0c\u5f00\u59cb\u4f60\u7684\u6eda\u7403\u4e4b\u65c5\u5427\uff01<\/p>\n\n\n\n\n\n\n \n \n 3D\u6eda\u7403\u6e38\u620f – \u5c45\u4e2d\u5bb9\u5668<\/title>\n <style>\n \/* \u6837\u5f0f\uff1a\u8ba9body\u548chtml\u5143\u7d20\u5360\u6ee1\u6574\u4e2a\u89c6\u53e3\uff0c\u5e76\u8bbe\u7f6e\u4e3aflex\u5bb9\u5668 \/\n body, html {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n overflow: hidden; \/ \u9632\u6b62\u5bb9\u5668\u9875\u9762\u51fa\u73b0\u6eda\u52a8\u6761 \/\n background-color: #282c34; \/ \u7ed9\u5bb9\u5668\u9875\u9762\u4e00\u4e2a\u6df1\u8272\u80cc\u666f\uff0c\u7a81\u51fa\u6e38\u620f\u7a97\u53e3 \/\n display: flex;\n justify-content: center; \/ \u6c34\u5e73\u5c45\u4e2d \/\n align-items: center; \/ \u5782\u76f4\u5c45\u4e2d \/\n }\n \n \/ \u6837\u5f0f\uff1a\u8bbe\u7f6eiframe\u7684\u5c3a\u5bf8\u548c\u5916\u89c2 \/\n iframe {\n width: 95vw; \/ \u5bbd\u5ea6\u4e3a\u89c6\u53e3\u5bbd\u5ea6\u768495% \/\n height: 95vh; \/ \u9ad8\u5ea6\u4e3a\u89c6\u53e3\u9ad8\u5ea6\u768495% \/\n border: 3px solid #444;\n border-radius: 12px;\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); \/ \u6dfb\u52a0\u9634\u5f71\u589e\u52a0\u7acb\u4f53\u611f *\/\n }\n <\/style>\n<\/head>\n<body>\n\n \n <iframe\n title=\"3D\u6eda\u7403\u6e38\u620f\"\n srcdoc=\"\n<!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">\n <title>3D\u6eda\u7403\u6e38\u620f<\/title>\n <style>\n body {\n margin: 0;\n overflow: hidden;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n background-color: #111;\n color: white;\n }\n #game-canvas {\n display: block;\n width: 100%;\n height: 100%;\n }\n #info {\n position: absolute;\n top: 10px;\n width: 100%;\n text-align: center;\n z-index: 100;\n display: block;\n font-size: 16px;\n text-shadow: 0 0 5px black;\n }\n #touch-controls {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n gap: 10px;\n width: 180px;\n height: 120px;\n opacity: 0.7;\n }\n .touch-btn {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 50%;\n font-size: 24px;\n user-select: none;\n cursor: pointer;\n border: 2px solid rgba(255, 255, 255, 0.5);\n }\n #btn-up { grid-column: 2; grid-row: 1; }\n #btn-left { grid-column: 1; grid-row: 2; }\n #btn-down { grid-column: 2; grid-row: 2; }\n #btn-right { grid-column: 3; grid-row: 2; }\n .touch-btn:active {\n background-color: rgba(255, 255, 255, 0.5);\n }\n @media (min-width: 1024px) {\n #touch-controls {\n display: none;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <div id="info">\u4f7f\u7528\u65b9\u5411\u952e\u6216\u89e6\u6478\u5c4f\u63a7\u5236\u5c0f\u7403<\/div>\n <canvas id="game-canvas"><\/canvas>\n\n <div id="touch-controls">\n <div id="btn-up" class="touch-btn">\u25b2<\/div>\n <div id="btn-left" class="touch-btn">\u25c0<\/div>\n <div id="btn-down" class="touch-btn">\u25bc<\/div>\n <div id="btn-right" class="touch-btn">\u25b6<\/div>\n <\/div>\n\n <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js"></script>\n <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cannon.js\/0.6.2\/cannon.min.js"></script>\n\n <script>\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x87ceeb);\n const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\n const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('game-canvas'), antialias: true });\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.shadowMap.enabled = true;\n\n const world = new CANNON.World();\n world.gravity.set(0, -9.82, 0);\n world.broadphase = new CANNON.NaiveBroadphase();\n world.solver.iterations = 10;\n\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);\n scene.add(ambientLight);\n\n const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);\n directionalLight.position.set(10, 20, 5);\n directionalLight.castShadow = true;\n directionalLight.shadow.camera.top = 20;\n directionalLight.shadow.camera.bottom = -20;\n directionalLight.shadow.camera.left = -20;\n directionalLight.shadow.camera.right = 20;\n scene.add(directionalLight);\n \n let sphereMesh, sphereBody;\n const sphereRadius = 0.5;\n\n function createSphere() {\n const sphereGeometry = new THREE.SphereGeometry(sphereRadius, 32, 32);\n const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0xff4500, metalness: 0.3, roughness: 0.4 });\n sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);\n sphereMesh.castShadow = true;\n scene.add(sphereMesh);\n\n const sphereShape = new CANNON.Sphere(sphereRadius);\n sphereBody = new CANNON.Body({\n mass: 5,\n position: new CANNON.Vec3(0, 5, 0),\n shape: sphereShape,\n material: new CANNON.Material()\n });\n world.addBody(sphereBody);\n }\n\n function createPlatforms() {\n const platformMaterial = new THREE.MeshStandardMaterial({ color: 0x4CAF50, roughness: 0.8 });\n const platformPhysicsMaterial = new CANNON.Material();\n\n const platforms = [\n { size: [10, 1, 10], position: [0, -0.5, 0] },\n { size: [10, 1, 4], position: [0, -0.5, -10] },\n { size: [4, 1, 10], position: [-10, -0.5, -15] },\n { size: [10, 1, 4], position: [-15, -0.5, -25] },\n { size: [4, 1, 15], position: [-25, -0.5, -17.5] },\n ];\n\n platforms.forEach(p => {\n const { size, position } = p;\n const groundGeometry = new THREE.BoxGeometry(size[0], size[1], size[2]);\n const groundMesh = new THREE.Mesh(groundGeometry, platformMaterial);\n groundMesh.position.set(position[0], position[1], position[2]);\n groundMesh.receiveShadow = true;\n scene.add(groundMesh);\n\n const groundShape = new CANNON.Box(new CANNON.Vec3(size[0] \/ 2, size[1] \/ 2, size[2] \/ 2));\n const groundBody = new CANNON.Body({\n mass: 0,\n shape: groundShape,\n position: new CANNON.Vec3(position[0], position[1], position[2]),\n material: platformPhysicsMaterial\n });\n world.addBody(groundBody);\n });\n }\n\n function createObstacles() {\n const obstacleMaterial = new THREE.MeshStandardMaterial({ color: 0x996633, roughness: 0.9 });\n const obstaclePhysicsMaterial = new CANNON.Material();\n\n const obstacles = [\n { size: [1, 1, 1], position: [2, 0.5, -2] },\n { size: [1, 1, 1], position: [-2, 0.5, -3] },\n { size: [8, 1, 1], position: [0, 0.5, -8] },\n { size: [1, 1, 8], position: [-8, 0.5, -15] },\n ];\n\n obstacles.forEach(o => {\n const { size, position } = o;\n const obstacleGeometry = new THREE.BoxGeometry(size[0], size[1], size[2]);\n const obstacleMesh = new THREE.Mesh(obstacleGeometry, obstacleMaterial);\n obstacleMesh.position.set(position[0], position[1], position[2]);\n obstacleMesh.castShadow = true;\n obstacleMesh.receiveShadow = true;\n scene.add(obstacleMesh);\n\n const obstacleShape = new CANNON.Box(new CANNON.Vec3(size[0] \/ 2, size[1] \/ 2, size[2] \/ 2));\n const obstacleBody = new CANNON.Body({\n mass: 0,\n shape: obstacleShape,\n position: new CANNON.Vec3(position[0], position[1], position[2]),\n material: obstaclePhysicsMaterial\n });\n world.addBody(obstacleBody);\n });\n }\n\n\n createSphere();\n createPlatforms();\n createObstacles();\n\n const keysPressed = {};\n const moveForce = 30;\n\n document.addEventListener('keydown', (event) => {\n keysPressed[event.key.toLowerCase()] = true;\n });\n\n document.addEventListener('keyup', (event) => {\n keysPressed[event.key.toLowerCase()] = false;\n });\n\n const touchControls = {\n up: document.getElementById('btn-up'),\n down: document.getElementById('btn-down'),\n left: document.getElementById('btn-left'),\n right: document.getElementById('btn-right'),\n };\n\n Object.keys(touchControls).forEach(key => {\n const btn = touchControls[key];\n btn.addEventListener('touchstart', (e) => { e.preventDefault(); keysPressed[key] = true; }, { passive: false });\n btn.addEventListener('touchend', (e) => { e.preventDefault(); keysPressed[key] = false; }, { passive: false });\n btn.addEventListener('mousedown', () => keysPressed[key] = true);\n btn.addEventListener('mouseup', () => keysPressed[key] = false);\n btn.addEventListener('mouseleave', () => keysPressed[key] = false);\n });\n\n\n function applyControls() {\n const force = new CANNON.Vec3(0, 0, 0);\n if (keysPressed['arrowup'] || keysPressed['w'] || keysPressed['up']) {\n force.z = -moveForce;\n }\n if (keysPressed['arrowdown'] || keysPressed['s'] || keysPressed['down']) {\n force.z = moveForce;\n }\n if (keysPressed['arrowleft'] || keysPressed['a'] || keysPressed['left']) {\n force.x = -moveForce;\n }\n if (keysPressed['arrowright'] || keysPressed['d'] || keysPressed['right']) {\n force.x = moveForce;\n }\n sphereBody.applyForce(force, sphereBody.position);\n }\n \n function resetGame() {\n sphereBody.position.set(0, 5, 0);\n sphereBody.velocity.set(0, 0, 0);\n sphereBody.angularVelocity.set(0, 0, 0);\n }\n\n const clock = new THREE.Clock();\n let lastTime;\n\n function animate() {\n requestAnimationFrame(animate);\n\n const time = clock.getElapsedTime();\n const deltaTime = lastTime ? time - lastTime : 1 \/ 60;\n lastTime = time;\n \n world.step(1 \/ 60, deltaTime, 3);\n\n applyControls();\n\n sphereMesh.position.copy(sphereBody.position);\n sphereMesh.quaternion.copy(sphereBody.quaternion);\n\n const cameraOffset = new THREE.Vector3(0, 5, 10);\n const cameraPosition = new THREE.Vector3().copy(sphereMesh.position).add(cameraOffset);\n camera.position.lerp(cameraPosition, 0.1);\n camera.lookAt(sphereMesh.position);\n\n if (sphereMesh.position.y < -10) {\n resetGame();\n }\n\n renderer.render(scene, camera);\n }\n\n window.addEventListener('resize', () => {\n camera.aspect = window.innerWidth \/ window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n });\n\n animate();\n\n </script>\n<\/body>\n<\/html>\n \">\n <\/iframe>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6b22\u8fce\u6765\u5230\u201c3D\u6eda\u7403\u5927\u5192\u9669\u201d\uff01\u8fd9\u662f\u4e00\u6b3e\u8003\u9a8c\u4f60\u5e73\u8861\u611f\u548c\u53cd\u5e94\u80fd\u529b\u7684\u4f11\u95f2\u95ef\u5173\u6e38\u620f\u3002\u5728\u8fd9\u4e2a\u5145\u6ee1\u6311\u6218\u76843D\u4e16\u754c\u91cc\uff0c\u4f60\u7684\u4efb\u52a1 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-186","post","type-post","status-publish","format-standard","hentry","category-8"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/posts\/186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/comments?post=186"}],"version-history":[{"count":9,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/posts\/186\/revisions"}],"predecessor-version":[{"id":201,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/posts\/186\/revisions\/201"}],"wp:attachment":[{"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/media?parent=186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/categories?post=186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/tags?post=186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}