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.Mesh(
  new THREE.PlaneGeometry(1000, 1000),
  new THREE.ShadowMaterial({
    opacity: .15 }));


  floor.receiveShadow = true;
  floor.position.y = -7;
  floor.quaternion.setFromAxisAngle(new THREE.Vector3(-1, 0, 0), Math.PI * .5);
  scene.add(floor);

  const floorBody = new CANNON.Body({
    type: CANNON.Body.STATIC,
    shape: new CANNON.Plane() });

  floorBody.position.copy(floor.position);
  floorBody.quaternion.copy(floor.quaternion);
  physicsWorld.addBody(floorBody);
}

function createDiceMesh() {
  const boxMaterialOuter = new THREE.MeshStandardMaterial({
    color: 0xeeeeee });

  const boxMaterialInner = new THREE.MeshStandardMaterial({
    color: 0x000000,
    roughness: 0,
    metalness: 1,
    side: THREE.DoubleSide });


  const diceMesh = new THREE.Group();
  const innerMesh = new THREE.Mesh(createInnerGeometry(), boxMaterialInner);
  const outerMesh = new THREE.Mesh(createBoxGeometry(), boxMaterialOuter);
  outerMesh.castShadow = true;
  diceMesh.add(innerMesh, outerMesh);

  return diceMesh;
}

function createDice() {
  const mesh = diceMesh.clone();
  scene.add(mesh);

  const body = new CANNON.Body({
    mass: .3,
    shape: new CANNON.Box(new CANNON.Vec3(.5, .5, .5)),
    sleepTimeLimit: .02 });

  physicsWorld.addBody(body);

  return { mesh, body };
}

function createBoxGeometry() {

  let boxGeometry = new THREE.BoxGeometry(1, 1, 1, params.segments, params.segments, params.segments);

  const positionAttr = boxGeometry.attributes.position;
  const subCubeHalfSize = .5 - params.edgeRadius;

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