关于“如何利用Javascript制作3D悬浮有倒影的文字特效”的知识有一些人不是很理解，对此小编给大家总结了相关内容，具有一定的参考借鉴价值，而且易于学习与理解，希望能对大家有所帮助，有这个方面学习需要的朋友就继续往下看吧。

效果

首先引入必要组件

import './build/three.js';
import './libs/js/controls/OrbitControls.js'
import { FontLoader } from './libs/jsm/loaders/FontLoader.js';
import { TextGeometry } from './libs/jsm/geometries/TextGeometry.js';

然后不可少的初始化场景、渲染器、相机、控制器

		var renderer, scene, camera, controls
		// 初始化场景
        function initScene() {
            scene = new THREE.Scene();
            //给场景添加烟雾效果
            // 参数：烟雾颜色，烟雾范围near，烟雾范围far
            scene.fog = new THREE.Fog(0x000000, 0, 3000)
            // 给场景添加坐标轴
            var axes = new THREE.AxesHelper(100)
            scene.add(axes)
        }
        // 初始化渲染器
        function initRenderer() {
            // antialias是否开启抗锯齿
            renderer = new THREE.WebGLRenderer({ antialias: true })
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.setClearColor(0xeeeeee)
            document.body.appendChild(renderer.domElement);
        }
        // 初始化相机
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
            camera.position.x = 50
            camera.position.y = 50
            camera.position.z = 50
        }
        // 初始化控制器
        function initControls() {
            controls = new THREE.OrbitControls(camera, renderer.domElement)
            controls.enableZoom = false; //是否开启缩放；
            controls.minPolarAngle = Math.PI / 2.5; //限制竖直方向上最小旋转角度 y轴正向为0度
            controls.maxPolarAngle = Math.PI / 2.5; //限制竖直方向上最大旋转角度 y轴正向为0度
        }

初始化光源

		// 初始化光源
        function initLight() {
        // 白光，光强1
            var pointLight = new THREE.PointLight(0xffffff, 1);
            pointLight.position.set(0, 100, 100);
            scene.add(pointLight);
            var pointLight = new THREE.PointLight(0xffffff, 1);
            pointLight.position.set(0, 100, -100);
            scene.add(pointLight);
        }

开始创建文本

首先创建字体加载器

var loader = new FontLoader();

加载字体库

加载字体库资源成功后会将该字体库传给回调函数

loader.load（src, callback）

字体库资源可以通过typeface.json选择自己想要的ttf字体文件将之转换为json文件，然后在回调函数中创建字体几何体

loader.load('./fonts/FZKaTong-M19S_Regular.json', function (response) {
               // 在这里面创建文字
            })

创建文字几何体

				// 创建文本缓冲几何体
                var textGeometry = new TextGeometry('狗托吴嘉豪', {
                	// 字体类型
                    font: response,
                    // 字体大小
                    size: 15,
                    // 字体的厚度
                    height: 1,
                    // 文本曲线上的点的数量，越高字体曲线越平滑
                    curveSegments: 12,
                    // 是否开启斜角(棱角平滑过渡)
                    bevelEnabled: false,
                    // 文本上斜角的深度
                    bevelThickness: 0.1,
                    // 斜角与原始文本轮廓之间的延伸距离(斜角尺寸)
                    bevelSize: 0.1,
                    // 斜角分段数
                    bevelSegments: 3
                })

				// 文字材质
                // 使用材质数组
                var textMaterial = [
                    // 第一项修饰文字正面背面
					new THREE.MeshPhongMaterial( { color: 0x00ff00, flatShading: true } ), // front
                    // 第二项修饰文字侧面(顶部底部)
					new THREE.MeshPhongMaterial( { color: 0x0000ff, flatShading: true } ) // side
                    // Phong网格材质可以模拟具有镜面高光的光泽表面（例如涂漆木材）
				] 
				// 创建文字
                var text = new THREE.Mesh(textGeometry, textMaterial)

计算文字几何体外边界矩形

可以想象几何体存放于一个看不见的矩形立方体容器之中，而这个容器默认位置为原点处，沿x轴z轴正方向向外延伸，如此我们的文字便不会处于视野中心。
此时，我们可以通过计算几何体的外边界矩形，设置几何体的位置向反方向移动其长度的一半使得不论几何体变得有多长，其始终处于视野中心。

				// computeBoundingBox()计算当前几何体的的外边界矩形
				textGeometry.computeBoundingBox();
                // console.log(textGeometry.boundingBox); 查看外边界矩形顶点位置
                // 文字位置向左移动文字长度的一半
                var centerOffset = -0.5*(textGeometry.boundingBox.max.x-textGeometry.boundingBox.min.x)
                text.position.x = centerOffset
                text.position.z = 0  
                scene.add(text);

创建镜像文字

				// 创建文字镜像
                var mirror = new THREE.Mesh(textGeometry, textMaterial)
                // 翻转180度
                mirror.rotation.x = Math.PI
                mirror.position.x = centerOffset
                mirror.position.y = -8
                scene.add(mirror)

创建半透明平面

				// 创建文字镜像
                var mirror = new THREE.Mesh(textGeometry, textMaterial)
                // 翻转180度
                mirror.rotation.x = Math.PI
                mirror.position.x = centerOffset
                mirror.position.y = -8
                scene.add(mirror)

渲染

		function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render)
        }
        function start() {
            initRenderer()
            initScene();
            initCamera();
            initControls()
            initLight()
            initText()
            render()
        }
        start()

关于文本构造器参数

当curveSegments设置越低时，可以看到文字没有那么圆滑

// 文本曲线上的点的数量，越高曲线越平滑
curveSegments: 1,

当开启了斜角时，可以观察到字体的边棱变得圆滑，不再锐利

// 是否开启斜角(棱角平滑过渡)
bevelEnabled: true,

设置斜角参数

// 文本上斜角的深度
bevelThickness: 0.1,
// 斜角与原始文本轮廓之间的延伸距离(斜角尺寸)
bevelSize: .1,
// 斜角分段数
bevelSegments: 3

完整代码

<script type="module">
        import './build/three.js';
        import './libs/js/controls/OrbitControls.js'
        import { FontLoader } from './libs/jsm/loaders/FontLoader.js';
        import { TextGeometry } from './libs/jsm/geometries/TextGeometry.js';
        var renderer, scene, camera, controls
        // 初始化渲染器
        function initRenderer() {
            // antialias是否开启抗锯齿
            renderer = new THREE.WebGLRenderer({ antialias: true })
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.setClearColor(0xeeeeee)
            document.body.appendChild(renderer.domElement);
        }
        // 初始化场景
        function initScene() {
            scene = new THREE.Scene();
            //给场景添加烟雾效果
            // 参数：烟雾颜色，烟雾范围near，烟雾范围far
            scene.fog = new THREE.Fog(0x000000, 0, 3000)
            // 给场景添加坐标轴
            var axes = new THREE.AxesHelper(100)
            scene.add(axes)
        }
        // 初始化相机
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
            camera.position.x = 50
            camera.position.y = 50
            camera.position.z = 50
        }
        // 初始化控制器
        function initControls() {
            controls = new THREE.OrbitControls(camera, renderer.domElement)
        }
        // 初始化光源
        function initLight() {
            var pointLight = new THREE.PointLight(0xffffff, 1);
            pointLight.position.set(0, 100, 100);
            scene.add(pointLight);
            var pointLight = new THREE.PointLight(0xffffff, 1);
            pointLight.position.set(0, 100, -100);
            scene.add(pointLight);
        }
        function initText() {
            var loader = new FontLoader();
            loader.load('./fonts/FZKaTong-M19S_Regular.json', function (response) {
                // 创建文字几何图形
                var textGeometry = new TextGeometry('狗托吴嘉豪', {
                    font: response,
                    // 字体大小
                    size: 15,
                    // 字体的厚度
                    height: 4,
                    // 文本曲线上的点的数量，越高曲线越平滑
                    curveSegments: 12,
                    // 是否开启斜角(棱角平滑过渡)
                    bevelEnabled: true,
                    // 文本上斜角的深度
                    bevelThickness: 0.1,
                    // 斜角与原始文本轮廓之间的延伸距离(斜角尺寸)
                    bevelSize: .1,
                    // 斜角分段数
                    bevelSegments: 3
                })
                // 文字材质
                // 使用材质数组
                var textMaterial = [
                    // 第一项修饰文字正面背面
					new THREE.MeshPhongMaterial( { color: 0x00ff00, flatShading: true } ), // front
                    // 第二项修饰文字侧面(顶部底部)
					new THREE.MeshPhongMaterial( { color: 0x0000ff, flatShading: true } ) // side
                    // Phong网格材质可以模拟具有镜面高光的光泽表面（例如涂漆木材）
				] 
                var text = new THREE.Mesh(textGeometry, textMaterial)
                // computeBoundingBox()计算当前几何体的的边界矩形
				textGeometry.computeBoundingBox();
                // console.log(textGeometry.boundingBox);
                var centerOffset = -0.5*(textGeometry.boundingBox.max.x-textGeometry.boundingBox.min.x)
                text.position.x = centerOffset
                text.position.z = 0  
                scene.add(text);
                // 创建文字镜像
                var mirror = new THREE.Mesh(textGeometry, textMaterial)
                mirror.rotation.x = Math.PI
                mirror.position.x = centerOffset
                mirror.position.y = -8
                scene.add(mirror)
                // 创建半透明平面
                var plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(200,200),new THREE.MeshBasicMaterial({color:0xffffff,opacity:.5,transparent:true}))
                plane.rotation.x = -Math.PI / 2
                plane.position.y = -3
                scene.add(plane)
            })
        }
        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render)
        }
        function start() {
            initRenderer()
            initScene();
            initCamera();
            initControls()
            initLight()
            initText()
            render()
        }
        start()
    </script>

总结

以上就是关于“如何利用Javascript制作3D悬浮有倒影的文字特效”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS中怎么用正则表达式的方法来筛选年月日

  在本篇文章里小编给大家整理的是一篇关于js用正则表达式筛选年月日的实例方法，对此有兴趣的朋友们可以学习下。

• ajax和websocket有哪些不同，这五点你知道多少？

  ajax和websocket有哪些不同?对于ajax和websocket的区别，一些朋友比较好奇，其中两者在本质、生命周期、适用范围、发起人和用法这五方面都有区别，接下来我们详细的了解看看。

• Promise相关的面试题有哪些，如何解答

  这篇文章主要介绍了JS 9个Promise面试题，对异步Promise感兴趣的同学，可以参考下

• uni-app的自定义组件怎么实现，步骤是什么

  这篇文章主要介绍了uni-app 的自定义组件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

• Cocos项目中有哪些使用的开发技巧

  这篇文章主要介绍“Cocos项目中有哪些使用的开发技巧”，有一些人在Cocos项目中有哪些使用的开发技巧的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。