three实现可自定义数量三维掷骰子点数代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现可自定义数量三维掷骰子点数代码

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

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

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

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap" rel="stylesheet">


  
  
<style>
body,
button {
  font-family: "Cherry Bomb One", system-ui;
  font-weight: 400;
  font-style: normal;
}
body canvas,
button canvas {
  position: absolute;
  top: 0;
  left: 0;
}
body nav,
button nav {
  display: flex;
  position: absolute;
  justify-content: space-between;
  z-index: 10;
  width: 100%;
  pointer-events: none;
}
body nav h1,
button nav h1 {
  padding: 0.75rem;
  line-height: 0.85;
  font-size: 2.25rem;
  color: #3c390f;
}
body nav h5,
button nav h5 {
  padding: 0.75rem;
  color: #3c390f;
  opacity: 0.75;
  pointer-events: auto;
}
body nav h5 a img,
button nav h5 a img {
  width: 1.5rem;
}
body section,
button section {
  display: flex;
  position: absolute;
  justify-content: center;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  pointer-events: none;
}
body section .panel,
button section .panel {
  display: flex;
  gap: 1.5rem;
}
body section p,
button section p {
  margin-bottom: -0.5rem;
  text-align: center;
  color: #3c390f;
  opacity: 0.5;
}
body section button,
button section button {
  padding: 0.5rem;
  margin-bottom: 2rem;
  background: none;
  border: none;
  line-height: 1;
  font-size: 4rem;
  color: #3c390f;
  cursor: pointer;
  opacity: 0.75;
  transition: 250ms;
  pointer-events: auto;
}
body section button:hover,
button section button:hover {
  opacity: 1;
}
body section button:active,
button section button:active {
  transform: scale(0.75);
}
</style>

  
</head>

<body translate="no">
  <nav>
  <h1>DICE<br>3D</h1>
 
</nav>
<section>
  <div class="panel">
    <button id="decrease">-</button>
    <div>
      <p>AMOUNT: <span id="amount">6</span></p>
      <button id="roll">ROLL</button>
    </div>
    <button id="increase">+</button>
  </div>
</section>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.12.2.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/oimo.1.0.9.js"></script>
  
    <script type="importmap">
  {
    "imports": {
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js",
    
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/"
    }
  }
</script>
 <script type="module">
import * as THREE from "three"
import WebGL from "//repo.bfw.wiki/bfwrepo/js/module/three/addons/capabilities/WebGL.js"

import { OrbitControls } from "three/addons/controls/OrbitControls.js"
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js"
import { RenderPass } from "three/addons/postprocessing/RenderPass.js"
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js"

let width = window.innerWidth
let height = Math.max(window.innerHeight, 480)
let composer, body
let isRotating = false
let dices = []
let diceAmount = 6
let accumulator = 0
let lastTime = 0

const fixedTimeStep = 1 / 120 // 120 Hz
const defaultCameraPosition = new THREE.Vector3(-12, 22, 12)
const resizeObserver = new ResizeObserver(resizeUpdate)
resizeObserver.observe(document.body)
window.addEventListener('resize', () => resizeUpdate())
document.getElementById('roll').addEventListener('click', addDices)
document.getElementById('decrease').addEventListener('click', () => {
  diceAmount = Math.max(--diceAmount, 1)
  document.querySelector('#amount').innerHTML = diceAmount
})
document.getElementById('increase').addEventListener('click', () => {
  diceAmount = Math.min(++diceAmount, 12)
  document.querySelector('#amount').innerHTML = diceAmount
})

// Physics
const world = new OIMO.World({ 
  timestep: 1 / 60, 
  iterations: 8, 
  broadphase: 2, 
  worldscale: 1, 
  random: true, 
  info: false,
  gravity: [0, -9.8 * 3, 0]
})

// Renderer
const renderer = new THREE.WebGLRenderer()
renderer.shadowMap.enabled = true
renderer.setSize(width, height)
renderer.setClearColor(0xffffff)
renderer.setPixelRatio(2)
document.body.appendChild(renderer.domElement)

// Environment
const scene = new THREE.Scene()
con.........完整代码请登录后点击上方下载按钮下载查看