three实现三维骰子旋转效果代码-html代码-BFW代码库

three实现三维骰子旋转效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维骰子旋转效果代码

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

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

<head>
  <meta charset="UTF-8">
  


  
  
<style>
:root {
  --main-bg-color: #face8D;
}

body{
  overflow: hidden;
  margin:0;
  background-color: var(--main-bg-color);
}
canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid var(--main-bg-color);
  border-radius: 20vh;
}
</style>

  
</head>

<body translate="no">
  <script type="importmap">
  {
    "imports": {
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/169/three.module.js",
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/169/jsm/"
    }
  }
</script>
<canvas id="cnv"></canvas>
  
      <script  type="module">
import {
Scene,
PerspectiveCamera,
Object3D,
Vector2,
Vector3,
Color,
Clock,
MathUtils } from
"three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

console.clear();

let u = 0;
let unit = val => u * val;

let resize = () => {
  cnv.width = innerHeight * 0.95;
  cnv.height = innerHeight * 0.95;
  u = innerHeight * 0.01;
};
resize();
window.addEventListener("resize", resize);

let ctx = cnv.getContext("2d");

class Box extends Object3D {
  constructor(width, height, depth) {
    super();
    this.width = width;
    this.height = height;
    this.depth = depth;
    this.size = new Vector3(width, height, depth);
    this.vertices = [
    [1, 1, 1],
    [1, -1, 1],
    [-1, -1, 1],
    [-1, 1, 1],
    [1, 1, -1],
    [1, -1, -1],
    [-1, -1, -1],
    [-1, 1, -1]].
    map(p => {
      return new Vector3(...p).multiply(this.size).multiplyScalar(0.5);
    });
    this.faces = [
    [0, 4, 5, 1],
    [3, 7, 6, 2],
    [7, 4, 0, 3],
    [6, 5, 1, 2],
    [0, 1, 2, 3],
    [4, 5, 6, 7]];

    this.normals = [
    [1, 0, 0],
    [-1, 0, 0],
    [0, 1, 0],
    [0, -1, 0],
    [0, 0, 1],
    [0, 0, -1]].
    map(p => {
      return new Vector3(...p);
    });
    let dotGrid = 0.5;
    this.dots = [
    [[1, 0, 0]],
    [[-1, dotGrid, dotGrid], [-1, 0, dotGrid], [-1, -dotGrid, dotGrid], [-1, dotGrid, -dotGrid], [-1, 0, -dotGrid], [-1, -dotGrid, -dotGrid]],
    [[dotGrid, 1, dotGrid], [-dotGrid, 1, -dotGrid]],
    [[dotGrid, -1, dotGrid], [-dotGrid, -1, dotGrid], [0, -1, 0], [dotGrid, -1, -dotGrid], [-dotGrid, -1, -dotGrid]],
    [[dotGrid, dotGrid, 1], [0, 0, 1], [-dotGrid, -dotGrid, 1]],
    [[dotGrid, dotGrid, -1], [-dotGrid, dotGrid, -1], [dotGrid, -dotGrid, -1], [-dotGrid, -dotGrid, -1]]].
    map(dotsSet => {
      return dotsSet.map(dots => {return new Vector3(...dots).multiply(this.size).multiplyScalar(0.5);});
    });
    console.log(this.dots);

    this.mediators = {
      v: new Vector3(),
      v2: new Vector3(),
      n: new Vector3(),
      face: Array.from({ length: 4 .........完整代码请登录后点击上方下载按钮下载查看