three实现三维扔骰子得点数游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：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.........完整代码请登录后点击上方下载按钮下载查看