three制作一个三维字母旋转验证器代码-html代码-BFW代码库

three制作一个三维字母旋转验证器代码

代码语言：html

所属分类：三维

代码描述：three制作一个三维字母旋转验证器代码，拖动下面的图形，使其更像字母F就能通过验证

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


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

<head>

  <meta charset="UTF-8">
  


  
  
<style>
body {
  display: grid;
  place-content: start center;
  height: 100vh;
}
.captcha {
  margin: 5vmin;
  display: grid;
  grid-template-rows: 4rem 60vmin 2rem;
  width: 60vmin;
  height: calc(60vmin + 4rem + 2rem);
  min-width: 40ch;
  min-height: 50vh;
  border: 2px solid black;
  border-radius: 8px;
  box-shadow: 5px 5px 0 2px #222;
  overflow: hidden;
}
.captcha .head {
  background: #578fe1;
  color: white;
  display: grid;
  place-content: center start;
  padding-inline: 2ch;
}
.captcha .head b {
  font-weight: bold;
  font-size: 1.5em;
}
.captcha .scene {
  cursor: -webkit-grab;
  cursor: grab;
}
.captcha .confirm {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr;
}
.captcha .confirm button {
  background: #578fe1;
  color: white;
  border: 0 none;
  box-sizing: border-box;
  padding-inline: 2ch;
  cursor: pointer;
}
.captcha .confirm .result {
  display: grid;
  place-content: center end;
  padding-inline: 2ch;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
}
</style>



</head>

<body >
  <div class="captcha">
  <div class="head">
   旋转下面的图形使其变成<br/><b>字母 F</b></div>
  <div class="scene"></div>
  <div class="confirm">
    <div class="result"></div>
    <button>验证</button>
  </div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
  
      <script >

// main
// ----

const renderer = new THREE.WebGLRenderer({ antialias: true });
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 2, .1, 100);
const controls = new  THREE.OrbitControls(camera, renderer.domElement);

scene.background = new THREE.Color('white');
camera.position.set(Math.random() * 10 - 5, Math.random() * 20 - 10, Math.random() < .5 ? -5 : 5);
contr.........完整代码请登录后点击上方下载按钮下载查看