three实现文字盘旋在三维圆柱体上动画效果代码-html代码-BFW代码库

three实现文字盘旋在三维圆柱体上动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现文字盘旋在三维圆柱体上动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
canvas {
  display: block;
  width: 100%;
  height: 100vh;
  cursor: -webkit-grab;
  cursor: grab;
  background: #ddd;
}
ul {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 1rem;
  font: 1rem monospace;
  color: black;
  text-shadow: 0 0 1px black;
  display: grid;
  place-content: start end;
  place-items: end;
}
ul a {
  color: inherit;
}
ul li:first-of-type {
  font-size: 2rem;
}
</style>



</head>

<body>

<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>



// ----
// tex
// ----

const can = document.createElement('canvas');
const tex0 = new THREE.CanvasTexture(can, THREE.UVMapping, THREE.RepeatWrapping);
const fontSize = 256;
const font = `bold ${fontSize}px "Arial"`;
const text = `  code.bfw.wiki  `.repeat(2); // the msg

makeTex();

function makeTex() {
  const ctx = can.getContext('2d');
  ctx.font = font;

  can.width = ctx.measureText(text).width;
  can.height = fontSize * 4 / 3;

  ctx.font = font;
  ctx.fillStyle = 'lime';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, 0, can.height / 2);

  tex0.needsUpdate = true;
}

// ----
// main
// ----

const renderer = new THREE.WebGLRenderer();
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('#ddd');
camera.position.set(0, 2, 12);
controls.enableDamping = true;
renderer.shadowMap.enabled = true;

const light = new THREE.DirectionalLight('white', .5);
light.castShadow = true;
light.position.set.........完整代码请登录后点击上方下载按钮下载查看