three实现鲜花文字效果代码-html代码-BFW代码库

代码语言：html

代码描述：three实现鲜花文字效果代码

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

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
html, body {
	padding: 0;
	margin: 0;
}
.container {
	position: fixed;
	top: 0;
	left: 0;
	background-color: #FFF6F7;
}
#text-input {
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
}
</style>


</head>

<body >
  <div id="text-input" contenteditable="true" onblur="this.focus()" autofocus>
</div>
<div class="container"></div>
   
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.133.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.133.js"></script>
  
      <script>

// DOM selectors
const containerEl = document.querySelector('.container');
const textInputEl = document.querySelector('#text-input');

// Settings
const fontName = 'Verdana';
const textureFontSize = 70;
const fontScaleFactor = .075;

// We need to keep the style of editable <div> (hidden inout field) and canvas
textInputEl.style.fontSize = textureFontSize + 'px';
textInputEl.style.font = '100 ' + textureFontSize + 'px ' + fontName;
textInputEl.style.lineHeight = 1.1 * textureFontSize + 'px';

// 3D scene related globals
let scene, camera, renderer, textCanvas, textCtx, particleGeometry, dummy, clock, cursorMesh;
let flowerInstancedMesh, leafInstancedMesh, flowerMaterial, leafMaterial;

// String to show
let string = 'Flower<div>typer</div>';

// Coordinates data per 2D canvas and 3D scene
let textureCoordinates = [];

// 1d-array of data objects to store and change params of each instance
let particles = [];

// Parameters of whole string per 2D canvas and 3D scene
let stringBox = {
  wTexture: 0,
  wScene: 0,
  hTexture: 0,
  hScene: 0,
  caretPosScene: [] };


// ---------------------------------------------------------------

textInputEl.innerHTML = string;
textInputEl.focus();

init();
createEvents();
setCaretToEndOfInput();
handleInput();
refreshText();
render();

// ---------------------------------------------------------------

function init() {
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, .1, 1000);
  camera.position.z = 18;

  scene = new THREE.Scene();

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

  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  containerEl.appendChild(renderer.domElement);

  const orbit = new THREE.OrbitControls(camera, renderer.domElement);
  orbit.enablePan = false;

  textCanvas = document.createElement('canvas');
  textCanvas.width = textCanvas.height = 0;
  textCtx = textCanvas.getContext('2d');
  particleGeometry = new THREE.PlaneGeometry(1.2, 1.2);
  const flowerTexture = new THREE.TextureLoader().load('//repo.bfw.wiki/bfwrepo/images/flower/flower.png');
  flowerMaterial = new THREE.MeshBasicMaterial({
    alphaMap: flowerTexture,
    opacity: .3,
    depthTest: false,
    transparent: true });

  const leafTexture = new THREE.TextureLoader().load('//repo.bfw.wiki/bfwrepo/images/flower/leaf.png');
  leafMaterial = new THREE.MeshBasicMaterial({
    alphaMap: leafTexture,
    opacity: .35,
    depthTest: false,
    transparent: true });


  dummy = new THREE.Object3D();
  clock = new THREE.Clock();

  const cursorGeometry = new THREE.BoxGeometry(.1, 4.5, .03);
  cursorGeometry.translate(.2, -2.9, 0);
  const cursorMaterial = new THREE.MeshBasicMaterial({
    color: 0x000000,
    transparent: true });

  cursorMesh = new THREE.Mesh(cursorGeometry, cursorMaterial);
  scene.add(cursorMesh);
}


// ---------------------------------------------------------------

function createEvents() {
  document.addEventListener('keyup', () => {
    handleInput();
    refreshText();
  });

  textInputEl.addEventListener('focus', () => {
    clock.elapsedTime = 0;
  });

  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  });
}

function setCaretToEndOfInput() {
  document.execCommand('selectAll', false, null);
  document.getSelection().collapseToEnd();
}

function handleInput() {
  if (isNewLine(textInputEl.firstChild)) {
    textInputEl.firstChild.remove();
  }
  if (isNewLine(textInputEl.lastChild)) {
    if (isNewLine(textInputEl.lastChild.previousSibling)) {
      textInputEl.lastChild.remove();
    }
  }

  string = textInputEl.innerHTML.
  replaceAll("<p>", "\n").
  replaceAll("</p>", "").
  replaceAll("<div>", "\n").
  replaceAll("</div>", "").
  replaceAll("<br>", "").
  replaceAll("<br/>", "").
  replaceAll("&nbsp;", " ");

  stringBox.wTexture = textInputEl.clientWidth;
  stringBox.wScene = stringBox.wTexture * fontScaleFactor;
  stringBox.hTexture = textInputEl.clientHeight;
  stringBox.hScene = stringBox.hTexture * fontScaleFactor;
  stringBox.caretPosScene = getCaretCoordinates().map(c => c * fontScaleFactor);

  function isNewLine(el) {
    if (el) {
      if (el.tagName) {
        if (el.tagName.toUpperCase() === 'DIV' || el.tagName.toUpperCase() === 'P') {
          if (el.innerHTML === '<br>' || el.innerHTML === '</br>') {
            return true;
          }
        }
      }
    }
    return false;
  }

  function getCaretCoordinates() {
    const range = window.getSelection().getRangeAt(0);
    const needsToWorkAroundNewlineBug = range.startContainer.nodeName.toLowerCase() === 'div' && range.startOffset === 0;
    if (needsToWorkAroundNewlineBug) {
      return [
      range.startContainer.offsetLeft,
      range.startContainer.offsetTop];

    } else {
      const rects = range.getClientRects();
      if (rects[0]) {
        return [rects[0].left, rects[0].top];
      } else {
        document.execCommand('selectAll', false, null);
        return [
        0, 0];

      }
    }
  }
}

// ---------------------------------------------------------------

function render() {
  requestAnimationFrame(render);
  updateParticlesMatrices();
  updateCursorOpacity();
  renderer.render(scene, camera);
}

// ---------------------------------------------------------------

function refreshText() {
  sampleCoordinates();

  particles = textureCoordinates.map((c, cIdx) => {
    const x = c.x * fontScaleFactor;
    const y = c.y * fontScaleFactor;
    let p = c.old && particles[cIdx] ? particles[cIdx] : Math.random() > .2 ? new Flower([x, y]) : new Leaf([x, y]);
    if (c.toDelete) {
      p.toDelete = true;
      p.scale = p.maxScale;
    }
    return p;
  });

  recreateInstancedMesh();
  makeTextFitScreen();
  updateCursorPosition();
}

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