three实现三维骰子转动显示点数效果代码-html代码-BFW代码库

three实现三维骰子转动显示点数效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维骰子转动显示点数效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
	position: relative;
}
em {
	position: absolute;
	font-family: sans-serif;
	font-size: 8px;
	text-transform: uppercase;
	top: 4em;
	left: 50%;
	transform: translateX(-50%);
}
</style>


</head>

<body >
  <em>你可以拖动鼠标旋转我</em>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.110.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/anime.3.2.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.108.js"></script>
      <script >


/** Excellent rounded box factory by Paul West:
 * https://discourse.threejs.org/t/round-edged-box/1402
 */
function createBoxWithRoundedEdges(width, height, depth, radius0, smoothness) {
  let shape = new THREE.Shape();
  let eps = 0.00001;
  let radius = radius0 - eps;
  shape.absarc(eps, eps, eps, -Math.PI / 2, -Math.PI, true);
  shape.absarc(eps, height - radius * 2, eps, Math.PI, Math.PI / 2, true);
  shape.absarc(
  width - radius * 2,
  height - radius * 2,
  eps,
  Math.PI / 2,
  0,
  true);

  shape.absarc(width - radius * 2, eps, eps, 0, -Math.PI / 2, true);
  let geometry = new THREE.ExtrudeBufferGeometry(shape, {
    amount: depth - radius0 * 2,
    bevelEnabled: true,
    bevelSegments: smoothness * 2,
    steps: 1,
    bevelSize: radius,
    bevelThickness: radius0,
    curveSegments: smoothness });


  geometry.center();

  return geometry;
}

/**
 * This method could be way more efficient :-/
 */
function createDiceMat(num) {
  const texSize = 256;
  const circSize = 20;

  const canvas = document.createElement("canvas");
  canvas.width = texSize;
  canvas.height = texSize;
  document.body.appendChild(canvas);
  const ctx = canvas.getContext("2d");

  ctx.beginPath();
  ctx.fillStyle = `#f8f8f6`;
  ctx.rect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
  ctx.fill();

  if (num == 1) {
    ctx.fillStyle = `rgb(0, 0, 0)`;
    ctx.beginPath();
    ctx.arc(0.5 * texSize, 0.5 * texSize, circSize, 0, 2 * Math.PI);
    ctx.fill();
  } else if (num == 2) {
    ctx.fillStyle = `rgb(0, 0, 0)`;
    ctx.beginPath();
    ctx.arc(0.5 * texSize + 40, 0.5 * texSize - 40, circSize, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(0.5 * texSize - 40, 0.5 * texSize + 40, circSize, 0, 2 * Math.PI);
    ctx.fill();
  } else if (num == 3) {
    ctx.fillStyle = `rgb(0, 0, 0)`;
    ctx.beginPath();
    ctx.arc(0.5 * texSize + 40, 0.5 * texSize - 40, circSize, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(0.5 * texSize - 40, 0.5 * texSize + 40, circSize, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(0.5 * texSize, 0.5 * texSize, circSize, 0, 2 * Math.PI);
    ctx.fill();
  } else if (num == 4) {
    for (let c = 1; c <= 2; c++) {
      for (let r = 1; r <= 2; r++) {
        ctx.fillStyle = `rgb(0, 0, 0)`;
        ctx.beginPath();
        ctx.arc(c * texSize / 3, r * texSize / 3, circSize, 0, 2 * Math.PI);
        ctx.fill();
      }
    }

    ctx.fillStyle = `rgb(0, 0, 0)`;
    ctx.beginPath();
    ctx.arc(0.5 * texSize, 0.5 * texSize, circSize, 0, 2 * Math.PI);
    ctx.fill();
  } else if (num == 5) {
    for (let c = 1; c <= 2; c++) {
      for (let r = 1; r <= 2; r++) {
  .........完整代码请登录后点击上方下载按钮下载查看