three实现三维扔骰子得点数游戏代码
代码语言:html
所属分类:游戏
代码描述:three实现三维扔骰子得点数游戏代码
代码标签: three 三维 扔 骰子 得 点数 游戏 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="canonical" href="https://codepen.io/ksenia-k/pen/QWZVvxm" /> <style> .container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; flex: 1; color: #444444; display: flex; justify-content: center; align-items: center; font-family: sans-serif; } canvas { position: absolute; top: 0; left: 0; } .ui-controls { position: relative; width: 100%; max-width: 500px; user-select: none; line-height: 1.5; padding: 10px; margin-top: -5%; } .ui-controls .score { margin-left: .25em; } .ui-controls #score-result { display: inline-block; min-width: 1.8em; } .ui-controls #roll-btn { background-color: #4BC0C8; font-weight: bold; border: none; padding: .5em 1em; text-decoration: none; display: inline-block; cursor: pointer; margin: 1em 0 0 0; transition: background-color 0.2s, transform 0.1s; } .ui-controls #roll-btn:active { transform: translateY(4px); } </style> </head> <body > <div class="container"> <canvas id="canvas"></canvas> <div class="ui-controls"> <div class="score">Score: <span id="score-result"></span></div> <button id="roll-btn">throw the dice</button> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.2.js"></script> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/151/three.module.js", "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/151/jsm/" } } </script> <script type="module"> import * as CANNON from 'https://cdn.skypack.dev/cannon-es'; import * as THREE from "three"; import * as BufferGeometryUtils from "three/addons/utils/BufferGeometryUtils.js"; const canvasEl = document.querySelector('#canvas'); const scoreResult = document.querySelector('#score-result'); const rollBtn = document.querySelector('#roll-btn'); let renderer, scene, camera, diceMesh, physicsWorld; const params = { numberOfDice: 2, segments: 40, edgeRadius: .1, notchRadius: .15, notchDepth: .09 }; const diceArray = []; initPhysics(); initScene(); window.addEventListener('resize', updateSceneSize); window.addEventListener('dblclick', throwDice); rollBtn.addEventListener('click', throwDice); function initScene() { renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, canvas: canvasEl }); renderer.shadowMap.enabled = true; renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, .1, 100); camera.position.set(0, .4, 3.5).multiplyScalar(6); camera.lookAt(0, 0, 0); updateSceneSize(); const ambientLight = new THREE.AmbientLight(0xffffff, .3); scene.add(ambientLight); const topLight = new THREE.PointLight(0xffffff, .5); topLight.position.set(10, 15, 3); topLight.castShadow = true; topLight.shadow.mapSize.width = 2048; topLight.shadow.mapSize.height = 2048; topLight.shadow.camera.near = 5; topLight.shadow.camera.far = 400; scene.add(topLight); createFloor(); diceMesh = createDiceMesh(); for (let i = 0; i < params.numberOfDice; i++) { diceArray.push(createDice()); addDiceEvents(diceArray[i]); } throwDice(); render(); } function initPhysics() { physicsWorld = new CANNON.World({ allowSleep: true, gravity: new CANNON.Vec3(0, -60, 0) }); physicsWorld.defaultContactMaterial.restitution = .3; } function createFloor() { const floor = new THREE.Mes.........完整代码请登录后点击上方下载按钮下载查看
网友评论0