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&quo.........完整代码请登录后点击上方下载按钮下载查看