three实现鲜花文字效果代码
代码语言: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, ca.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0