三维线框动画透视效果-html代码-BFW代码库

三维线框动画透视效果

代码语言：html

所属分类：三维

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Wire Typo</title>
<style>
  body {
  height: 100vh;
  background-color: #212121;
  background: radial-gradient(circle, #020024 0%, #2e2e2e 0%, black 100%);
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

</head>
<body translate="no">
<div id="canvas-wrapper" aria-label="wire"></div>

<script src='http://repo.bfw.wiki/bfwrepo/js/three.js'></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js'></script>
<script id="rendered-js">
      /* 
 * WIRE TYPO
 * Made with ThreeJS - Enjoy!
 * https://threejs.org/
 *
 * Experimenting with wireframe typography.
 * Move the cursor to zoom in/out.
 * On mobile touch + drag screen to zoom in/out.
 *
 * #019 - #100DaysOfCode
 * By ilithya | 2019
 */

const colorBg = '#212121'; // Black
const colorWire = '#18FFFF'; // blue

const nearDist = 0.1;
const farDist = 1000;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
nearDist,
farDist);

camera.position.z = farDist;

const renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true });

renderer.setClearColor(colorBg, 0); // Set the bg via CSS instead, for a gradient effect
renderer.setPixelRatio(window.devicePixelRatio); // For HiDPI devices to prevent bluring output canvas
renderer.setSize(window.innerWidth, window.innerHeight);
document.querySelector("#canvas-wrapper").appendChild(renderer.domElement);

// CREATE TYPOGRAPHY
const group = new THREE.Group(); // To add 3d float effect
const typoLoader = new THREE.FontLoader();
const createTypo = font => {
  const word = "wire";
  const typoSize = 120;
  const typoProperties = {
    font: font,
    size: typoSize,
    height: typoSize * 3,
    curveSegments: 1,
    bevelEnabled: true,
    bevelThickness: 0.1,
    bevelSize: 2,
    bevelOffset: 0,
    bevelSegments: 3 };

  const textMesh = new THREE.Mesh();

  textMesh.geometry.........完整代码请登录后点击上方下载按钮下载查看