![图片[1]-HTML+CSS 掷骰子源码](https://pic.turnfish.top/images/2024/12/07/HTMLCSS-.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>自己用自己的骰子</title>
<style>
html,body{padding:0;margin:0;}body{height:100vh;display:flex;align-items:end;justify-content:center;}.container{width:100%;height:100%;background-image:linear-gradient(#6dd5fa,#2980b9);}.lil-gui{--width:450px;max-width:90%;--widget-height:20px;font-size:15px;--input-font-size:15px;--padding:10px;--spacing:10px;--slider-knob-width:5px;--background-color:rgba(5,0,15,0.8);--widget-color:rgba(255,255,255,0.3);--focus-color:rgba(255,255,255,0.4);--hover-color:rgba(255,255,255,0.5);--font-family:monospace;}</style>
</head>
<body>
<div class="container">
<canvas id="canvas"></canvas>
</div>
<script type="importmap">{"imports":{"three":"https://unpkg.com/three@0.164.0/build/three.module.js","three/addons/":"https://unpkg.com/three@0.164.0/examples/jsm/"}}</script><script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></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';import GUI from'https://cdn.jsdelivr.net/npm/lil-gui@0.18.2/+esm';const containerEl=document.querySelector('.container');const canvasEl=document.querySelector('#canvas');let renderer,scene,camera,diceMesh,physicsRender,simulation;let simulationOn=true;let currentResult=[0,0];const params={segments:40,edgeRadius:0.08,notchRadius:0.15,notchDepth:0.17,restitution:0.3,friction:0.1,desiredResult:7,throw:throwMe,};function throwMe(){simulationOn=true;throwDice();}const diceArray=[];const floorPlanesArray=[];let throwBtn;initPhysics();initScene();createFloor();diceMesh=createDiceMesh();for(let i=0;i<2;i++){diceArray.push(createDice());addDiceEvents(diceArray[i],i)}createControls();throwMe();render();window.addEventListener('resize',updateSceneSize);window.addEventListener('click',()=>{});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,containerEl.clientWidth/containerEl.clientHeight,0.1,100);camera.position.set(0,9,12);camera.lookAt(0,4,0);updateSceneSize();const ambientLight=new THREE.AmbientLight(0xffffff,1);scene.add(ambientLight);const light=new THREE.PointLight(0xffffff,1000);light.position.set(10,20,5);light.castShadow=true;light.shadow.mapSize.width=2048;light.shadow.mapSize.height=2048;scene.add(light)}function initPhysics(){const gravity=new CANNON.Vec3(0,-50,0);const allowSleep=true;physicsRender=new CANNON.World({allowSleep,gravity,});simulation=new CANNON.World({allowSleep,gravity,});physicsRender.defaultContactMaterial.restitution=params.restitution;simulation.defaultContactMaterial.restitution=params.restitution;physicsRender.defaultContactMaterial.friction=params.friction;simulation.defaultContactMaterial.friction=params.friction}function createFloor(){for(let i=0;i<4;i++){const body=new CANNON.Body({type:CANNON.Body.STATIC,shape:new CANNON.Plane(),});physicsRender.addBody(body);simulation.addBody(body);let mesh;if(i===0){mesh=new THREE.Mesh(new THREE.PlaneGeometry(100,100,100,100),new THREE.ShadowMaterial({opacity:0.1,}));scene.add(mesh);mesh.receiveShadow=true}floorPlanesArray.push({body,mesh,})}floorPositionUpdate()}function floorPositionUpdate(){floorPlanesArray.forEach((f,fIdx)=>{if(fIdx===0){f.body.position.y=0;f.body.quaternion.setFromEuler(-0.5*Math.PI,0,0)}else if(fIdx===1){f.body.quaternion.setFromEuler(0,0.5*Math.PI,0);f.body.position.x=(-6*containerEl.clientWidth)/containerEl.clientHeight}else if(fIdx===2){f.body.quaternion.setFromEuler(0,-0.5*Math.PI,0);f.body.position.x=(6*containerEl.clientWidth)/containerEl.clientHeight}else if(fIdx===3){f.body.quaternion.setFromEuler(0,Math.PI,0);f.body.position.z=3}if(f.mesh){f.mesh.position.copy(f.body.position);f.mesh.quaternion.copy(f.body.quaternion)}})}function createDiceMesh(){const boxMaterialOuter=new THREE.MeshStandardMaterial({color:0xffffff,});const boxMaterialInner=new THREE.MeshStandardMaterial({color:0x000000,roughness:0,metalness:1,});const g=new THREE.Group();const innerSide=1-params.edgeRadius;const innerMesh=new THREE.Mesh(new THREE.BoxGeometry(innerSide,innerSide,innerSide),boxMaterialInner);const outerMesh=new THREE.Mesh(createBoxGeometry(),boxMaterialOuter);outerMesh.castShadow=true;g.add(innerMesh,outerMesh);return g}function createDice(){const mesh=diceMesh.clone();scene.add(mesh);const shape=new CANNON.Box(new CANNON.Vec3(0.5,0.5,0.5));const mass=1;const sleepTimeLimit=0.02;const body=new CANNON.Body({mass,shape,sleepTimeLimit,});physicsRender.addBody(body);const simulationBody=new CANNON.Body({mass,shape,sleepTimeLimit,});simulation.addBody(simulationBody);return{mesh,body:[body,simulationBody],startPos:[null,null,null],}}function createBoxGeometry(){let boxGeometry=new THREE.BoxGeometry(1,1,1,params.segments,params.segments,params.segments);const positionAttr=boxGeometry.attributes.position;const subCubeHalfSize=0.5-params.edgeRadius;const notchWave=(v)=>{v=(1/params.notchRadius)*v;v=Math.PI*Math.max(-1,Math.min(1,v));return params.notchDepth*(Math.cos(v)+1)};const notch=(pos)=>notchWave(pos[0])*notchWave(pos[1]);for(let i=0;i<positionAttr.count;i++){let position=new THREE.Vector3().fromBufferAttribute(positionAttr,i);const subCube=new THREE.Vector3(Math.sign(position.x),Math.sign(position.y),Math.sign(position.z)).multiplyScalar(subCubeHalfSize);const addition=new THREE.Vector3().subVectors(position,subCube);if(Math.abs(position.x)>subCubeHalfSize&&Math.abs(position.y)>subCubeHalfSize&&Math.abs(position.z)>subCubeHalfSize){addition.normalize().multiplyScalar(params.edgeRadius);position=subCube.add(addition)}else if(Math.abs(position.x)>subCubeHalfSize&&Math.abs(position.y)>subCubeHalfSize){addition.z=0;addition.normalize().multiplyScalar(params.edgeRadius);position.x=subCube.x+addition.x;position.y=subCube.y+addition.y}else if(Math.abs(position.x)>subCubeHalfSize&&Math.abs(position.z)>subCubeHalfSize){addition.y=0;addition.normalize().multiplyScalar(params.edgeRadius);position.x=subCube.x+addition.x;position.z=subCube.z+addition.z}else if(Math.abs(position.y)>subCubeHalfSize&&Math.abs(position.z)>subCubeHalfSize){addition.x=0;addition.normalize().multiplyScalar(params.edgeRadius);position.y=subCube.y+addition.y;position.z=subCube.z+addition.z}const offset=0.23;if(position.y===0.5){position.y-=notch([position.x,position.z])}else if(position.x===0.5){position.x-=notch([position.y+offset,position.z+offset]);position.x-=notch([position.y-offset,position.z-offset])}else if(position.z===0.5){position.z-=notch([position.x-offset,position.y+offset]);position.z-=notch([position.x,position.y]);position.z-=notch([position.x+offset,position.y-offset])}else if(position.z===-0.5){position.z+=notch([position.x+offset,position.y+offset]);position.z+=notch([position.x+offset,position.y-offset]);position.z+=notch([position.x-offset,position.y+offset]);position.z+=notch([position.x-offset,position.y-offset])}else if(position.x===-0.5){position.x+=notch([position.y+offset,position.z+offset]);position.x+=notch([position.y+offset,position.z-offset]);position.x+=notch([position.y,position.z]);position.x+=notch([position.y-offset,position.z+offset]);position.x+=notch([position.y-offset,position.z-offset])}else if(position.y===-0.5){position.y+=notch([position.x+offset,position.z+offset]);position.y+=notch([position.x+offset,position.z]);position.y+=notch([position.x+offset,position.z-offset]);position.y+=notch([position.x-offset,position.z+offset]);position.y+=notch([position.x-offset,position.z]);position.y+=notch([position.x-offset,position.z-offset])}positionAttr.setXYZ(i,position.x,position.y,position.z)}boxGeometry.deleteAttribute('normal');boxGeometry.deleteAttribute('uv');boxGeometry=BufferGeometryUtils.mergeVertices(boxGeometry);boxGeometry.computeVertexNormals();return boxGeometry}function addDiceEvents(dice,diceIdx){dice.body.forEach((b)=>{b.addEventListener('sleep',(e)=>{b.allowSleep=false;if(simulationOn){const euler=new CANNON.Vec3();e.target.quaternion.toEuler(euler);const eps=0.1;let isZero=(angle)=>Math.abs(angle)<eps;let isHalfPi=(angle)=>Math.abs(angle-0.5*Math.PI)<eps;let isMinusHalfPi=(angle)=>Math.abs(0.5*Math.PI+angle)<eps;let isPiOrMinusPi=(angle)=>Math.abs(Math.PI-angle)<eps||Math.abs(Math.PI+angle)<eps;if(isZero(euler.z)){if(isZero(euler.x)){currentResult[diceIdx]=1}else if(isHalfPi(euler.x)){currentResult[diceIdx]=4}else if(isMinusHalfPi(euler.x)){currentResult[diceIdx]=3}else if(isPiOrMinusPi(euler.x)){currentResult[diceIdx]=6}else{b.allowSleep=true;throwDice();}}else if(isHalfPi(euler.z)){currentResult[diceIdx]=2}else if(isMinusHalfPi(euler.z)){currentResult[diceIdx]=5}else{b.allowSleep=true;throwDice();}const thisDiceRes=currentResult[diceIdx];const anotherDiceRes=currentResult[diceIdx?0:1];const currentSum=currentResult.reduce((a,v)=>a+v,0);if(anotherDiceRes===0&&thisDiceRes>=params.desiredResult){throwDice();}else if(anotherDiceRes!==0){if(params.desiredResult!==currentSum){throwDice();}else{simulationOn=false;throwBtn.innerHTML='throw!';throwDice();}}}})})}function render(){if(simulationOn){simulation.step(1/60,5000,60)}else{physicsRender.fixedStep();for(const dice of diceArray){dice.mesh.position.copy(dice.body[0].position);dice.mesh.quaternion.copy(dice.body[0].quaternion)}renderer.render(scene,camera)}requestAnimationFrame(render)}function updateSceneSize(){camera.aspect=containerEl.clientWidth/containerEl.clientHeight;camera.updateProjectionMatrix();renderer.setSize(containerEl.clientWidth,containerEl.clientHeight);floorPositionUpdate()}function throwDice(){const quaternion=new THREE.Quaternion();if(simulationOn){throwBtn.innerHTML='calculating a throw...';currentResult=[0,0];diceArray.forEach((d)=>{d.startPos=[Math.random(),Math.random(),Math.random()]})}diceArray.forEach((d,dIdx)=>{quaternion.setFromEuler(new THREE.Euler(2*Math.PI*d.startPos[0],0,2*Math.PI*d.startPos[1]));const force=6+3*d.startPos[2];const b=simulationOn?d.body[1]:d.body[0];b.position=new CANNON.Vec3(3,5+dIdx,2);b.velocity.setZero();b.angularVelocity.setZero();b.applyImpulse(new CANNON.Vec3(-force,force,0),new CANNON.Vec3(0,0,-0.5));b.quaternion.copy(quaternion);b.allowSleep=true})}function createControls(){const gui=new GUI();gui.add(params,'desiredResult',2,12,1).name('result');const btnControl=gui.add(params,'throw').name('throw!');throwBtn=btnControl.domElement.querySelector('button > .name');}</script>
</body>
</html>© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![百度网盘直链解析彻底解除百度云限速限制[利用IDM工具在线解析网页版]-MOHE素材库-设计行业的乐园，各类素材的矿山！](http://mohe-sc.com/wp-content/uploads/2021/07/baiduwangpan-400x273.png)
请登录后查看评论内容