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;
}
body {
  background: yellow;
}
ol {
  position: fixed;
  top: 2rem;
  left: 2rem;
  display: grid;
  list-style: inside decimal;
  font: 1em monospace;
  gap: 0.1rem;
}
ol li {
  background: #222;
  color: yellow;
  padding: 0.5rem;
}
ol a {
  color: inherit;
  padding: 1ch;
}
</style>




</head>

<body>


  
      <script  type="module">
import * as THREE from "//cdn.skypack.dev/three@0.133?min";
import { OrbitControls } from "//cdn.skypack.dev/three@0.133/examples/jsm/controls/OrbitControls?min";
import { FontOutliner } from "//cdn.jsdelivr.net/gh/ycw/three-font-outliner@2.0.0/dist/lib.esm.js";

// ----
// 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 OrbitControls(camera, renderer.domElement);

scene.background = new THREE.Color("yellow");
camera.position.set(1, -2, 8);
controls.target.set(-1, 0, 0);
controls.enableDamping = true;
controls.autoRotate = true;
controls.maxPolarAngle = Math.PI / 1.8;
renderer.shadowMap.enabled = true;

const light = new THREE.DirectionalLight();
light.position.set(0, 1, 2);
light.castShadow = true;
light.shadow.bias = -0.001;
scene.add(light);

// ----
// photo by Vandan Patel https://unsplash.com/photos/tEKHzpDX54Y 
// ----

const imgUrl = "https://images.unsplash.com/photo-1532765897177-316d23b3922c?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjV8fGFycm93fGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60";
const map = new THREE.TextureLoader().load(imgUrl);
map.repeat.set(2, 2);
map.wrapS = THREE.MirroredRepeatWrapping;
map.wrapT = THREE.MirroredRepeatWrapping;
const mat = new THREE.MeshPhysicalMaterial({ roughness: 1, clearcoat: 1, alphaMap: map, side: THREE.DoubleSide, color: "magenta" });
const lineMat = new THREE.LineBasicMaterial({ color: 0 });

(async function () {
  const fontUrl = "https://cdn.jsdelivr.net/gh/ycw/three-font-outliner@2.0.0/examp.........完整代码请登录后点击上方下载按钮下载查看