Three.js一学就会系列：04 炫酷3D文字

news2024/11/17 5:52:47

系列文章目录

Three.js一学就会系列：01 第一个3D网站
Three.js一学就会系列：02 画线
Three.js一学就会系列：03 炫酷3D划线

文章目录

  • 系列文章目录
  • 前言
  • 一、创建一个vue项目
  • 二、安装及使用
    • 安装
    • 创建一个dom元素
  • 三、核心代码讲解
    • 场景处理“雾”
    • 光源
    • 材质
    • 组
    • 字体
    • 创建文字
  • 完整代码
  • 效果
  • 总结

前言

最近开始入坑前端3D建站，跟大家一起慢慢深入three.js做网站3D

这篇文章给大家讲下 在加载three.js其他内置插件时，我们怎么使用，这里我给大家介绍一下在vue项目中使用

一、创建一个vue项目

这里有童鞋没有node环境的，去node.js官网下载安装即可
https://nodejs.org/zh-cn/download/

vue项目：按照vue-cli官网操作创建即可
https://cli.vuejs.org/zh/guide/installation.html

二、安装及使用

安装

npm install three

创建一个dom元素

<div id="container"></div>

三、核心代码讲解

场景处理“雾”

// 场景
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
scene.fog = new THREE.Fog( 0x000000, 250, 1400 );

Fog 用于产生雾，参数：颜色，开始应用雾的最小距离，结束应用雾的最大距离

光源

// 光源
const dirLight = new THREE.DirectionalLight( 0xffffff, 0.125 );
dirLight.position.set( 0, 0, 1 ).normalize();
scene.add( dirLight );

const pointLight = new THREE.PointLight( 0xffffff, 1.5 );
pointLight.position.set( 0, 100, 90 );
pointLight.color.setHSL( Math.random(), 1, 0.5 );
scene.add( pointLight );

DirectionalLight：平行光：参数：颜色，光源强度
PointLight：点光源：参数：颜色，光源强度
上述光源
还可以设置：
position：设置光源位置，
color：设置颜色

材质

// 材质
materials = [
	new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } ), // 文字
	new THREE.MeshPhongMaterial( { color: 0xffffff } ) // 边缘
];

MeshPhongMaterial：一种用于具有镜面高光的光泽表面的材质

组

group = new THREE.Group();
group.position.y = 100;
scene.add( group );

group 创建一个组，为了后续多个元素同时控制
这里面，用于文字和文字倒影，实现同时控制

字体

const loader = new FontLoader();
loader.load( '/helvetiker_regular.typeface.json', function ( font ) {
	
} );

FontLoader 加载字体，加载完成，即可使用font字体

创建文字

new TextGeometry( text, {  // 显示的文字
	font: font,   // 加载的字体
	size: size,  // 大小
	height: height,  // 高度
	curveSegments: curveSegments,
	bevelThickness: bevelThickness,
	bevelSize: bevelSize,
	bevelEnabled: bevelEnabled
} );

size — Float。字体大小，默认值为100。
height — Float。挤出文本的厚度。默认值为50。
curveSegments — Integer。（表示文本的）曲线上点的数量。默认值为12。
bevelEnabled — Boolean。是否开启斜角，默认为false。
bevelThickness — Float。文本上斜角的深度，默认值为20。
bevelSize — Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。
bevelSegments — Integer。斜角的分段数。默认值为3。

完整代码

<template>
  <div id="container"></div>
</template>

<script>
import * as THREE from 'three'
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';

export default {
  name: 'App',
  mounted(){

    this.init()
  },
  methods: {
    init(){
			THREE.Cache.enabled = true;
			let container;
			let camera, scene, renderer;
			let group, textMesh1, textMesh2, textGeo, materials;
			let text = 'Menphis'
			const mirror = true;
			let targetRotation = 0;
			let targetRotationOnPointerDown = 0;
			let pointerXOnPointerDown = 0;
			let windowHalfX = window.innerWidth / 2;

			init();
			animate();

			function init() {

				container = document.getElementById( 'container' );
				// 摄像机
				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
				camera.position.set( 0, 400, 700 );
				camera.lookAt( 0, 150, 0 );

				// 场景
				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x000000 );
				scene.fog = new THREE.Fog( 0x000000, 250, 1400 );

				// 光源
				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.125 );
				dirLight.position.set( 0, 0, 1 ).normalize();
				scene.add( dirLight );

				const pointLight = new THREE.PointLight( 0xffffff, 1.5 );
				pointLight.position.set( 0, 100, 90 );
				pointLight.color.setHSL( Math.random(), 1, 0.5 );
				scene.add( pointLight );

				// 材质
				materials = [
					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } ), // 文字
					new THREE.MeshPhongMaterial( { color: 0xffffff } ) // 边缘
				];

				// 创建组
				group = new THREE.Group();
				group.position.y = 100;
				scene.add( group );

				// 加载字体
				loadFont();
				
				// 雾气平面
				const plane = new THREE.Mesh(
					new THREE.PlaneGeometry( 10000, 10000 ),
					new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 0.8, transparent: true } )
				);
				plane.position.y = 100;
				plane.rotation.x = - Math.PI / 2;
				scene.add( plane );

				// 渲染
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );

				// 事件
				container.style.touchAction = 'none';
				container.addEventListener( 'pointerdown', onPointerDown );
				window.addEventListener( 'resize', onWindowResize );

			}
			// 尺寸变化更新透视摄像机和渲染区域
			function onWindowResize() {
				windowHalfX = window.innerWidth / 2;
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
			}
			// 加载字体
			function loadFont() {
				const loader = new FontLoader();
				loader.load( 'https://threejs.org/examples/fonts/helvetiker_bold.typeface.json', function ( font ) {
					createText(font);
				} );

			}
			// 创建字体
			function createText(font) {
				const height = 20,
				size = 70,
				hover = 30,
				curveSegments = 4,
				bevelThickness = 2,
				bevelEnabled = true,
				bevelSize = 1.5;

				textGeo = new TextGeometry( text, {
					font: font,
					size: size,
					height: height,
					curveSegments: curveSegments,
					bevelThickness: bevelThickness,
					bevelSize: bevelSize,
					bevelEnabled: bevelEnabled

				} );

				textGeo.computeBoundingBox();

				const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );

				textMesh1 = new THREE.Mesh( textGeo, materials );

				textMesh1.position.x = centerOffset;
				textMesh1.position.y = hover;
				textMesh1.position.z = 0;

				textMesh1.rotation.x = 0;
				textMesh1.rotation.y = Math.PI * 2;

				group.add( textMesh1 );

				if ( mirror ) {

					textMesh2 = new THREE.Mesh( textGeo, materials );

					textMesh2.position.x = centerOffset;
					textMesh2.position.y = - hover;
					textMesh2.position.z = height;

					textMesh2.rotation.x = Math.PI;
					textMesh2.rotation.y = Math.PI * 2;

					group.add( textMesh2 );

				}

			}
			// 鼠标按下
			function onPointerDown( event ) {
				if ( event.isPrimary === false ) return;

				pointerXOnPointerDown = event.clientX - windowHalfX;
				targetRotationOnPointerDown = targetRotation;
				// 添加鼠标移动和鼠标松开事件
				document.addEventListener( 'pointermove', onPointerMove );
				document.addEventListener( 'pointerup', onPointerUp );

			}
			// 鼠标移动
			function onPointerMove( event ) {
				if ( event.isPrimary === false ) return;
				let pointerX = event.clientX - windowHalfX;
				// 计算移动鼠标距离转化为旋转值
				targetRotation = targetRotationOnPointerDown + ( pointerX - pointerXOnPointerDown ) * 0.02;
			}
			// 鼠标松开
			function onPointerUp() {
				if ( event.isPrimary === false ) return;
				document.removeEventListener( 'pointermove', onPointerMove );
				document.removeEventListener( 'pointerup', onPointerUp );
			}

			function animate() {
				requestAnimationFrame( animate );
				render();
			}
			// 循环渲染
			function render() {
				// 处理旋转
				group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
				renderer.render( scene, camera );
			}
    }
  }
}
</script>

<style>
body,html {
  margin: 0;
  padding: 0;
}
</style>

效果

请添加图片描述

总结

以上就是今天要讲的内容，本文仅仅简单介绍了three.js的使用，而three.js提供了非常多的3D显示功能，后续文章，我将带大家慢慢深入了解。

如果觉得有用欢迎点赞关注
有问题私信我！！~~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/133994.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

83.【JQuery.Ajax】

83.【JQuery.Ajax】

Ajax(一)、Ajax简介1.什么是Ajax2.jQuery.ajax介绍(二)、环境搭建1.创建Model并添加web框架2.配置Artifacts的lib文件3.配置web框架下的web.xml4.配置spring-mvc.xml配置文件5.配置汇总文件applicationContexe.xml6.进行测试(三)、伪造Ajax1.iframe内敛框架伪造Ajax(四)、使用真…
阅读更多...
【阶段二】Python数据分析NumPy工具使用01篇：NumPy工具介绍、NumPy工具安装与数组的创建

【阶段二】Python数据分析NumPy工具使用01篇：NumPy工具介绍、NumPy工具安装与数组的创建

本篇的思维导图： NumPy工具介绍 NumPy(Numerical Python) 是 Python 语言的一个扩展程序库，支持大量的维度数组与矩阵运算，这个包封装了多个可以用于数组间计算的函数供你直接调用，是一个运行速度非常快的数学库。 NumPy工具安装 代码 结果
阅读更多...
从输入URL到渲染的过程中到底发生了什么？

从输入URL到渲染的过程中到底发生了什么？

CDN缓存DNSTCP三次握手、四次挥手浏览器渲染过程输入URL到页面渲染过程的一些优化 下面我将“从输入URL到渲染的全过程”大概的描述出来&#xff0c;再对其过程加以解释&#xff0c;了解过程中可以做哪些优化。文章内容有点长&#xff0c;需要有足够的耐心看完哟&#xff01;&…
阅读更多...
MySQL数据库高级面试题（2）

MySQL数据库高级面试题（2）

✅作者简介&#xff1a;热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏&#xff1a;Java面试题…
阅读更多...
【自学Java】Java if else-if else语句

【自学Java】Java if else-if else语句

Java else if Java else if教程 在 Java 语言 中&#xff0c;关键字 if 是用于测试某个条件&#xff08;布尔型 或逻辑型&#xff09;的语句是否满足一定的条件&#xff0c;如果满足特定的条件&#xff0c;则会执行 if 后由大括号 {} 括起来的代码块&#xff0c;否则就忽略该…
阅读更多...
利用Dlib 实现人脸68个特征点的标定

利用Dlib 实现人脸68个特征点的标定

系列文章目录 文章目录系列文章目录前言1. 开发环境依赖2. 设计流程68个特征点提取&#xff1a;OpenCv 绘图&#xff1a;3. 源码OpenCv 的画图函数1. 画圆2. 写字符3.关于 颜色数组&#xff1a;前言 利用 Dlib 官方训练好的模型 “shape_predictor_68_face_landmarks.dat” 进…
阅读更多...
【C语言 数据结构】树

【C语言 数据结构】树

文章目录树一、树的概念二、树的应用1&#xff09;树可表示具有分枝结构关系的对象2&#xff09;树是常用的数据组织形式三、树的表示四、树的基本术语五、树的四种表示方法5.1 双亲表示法5.2 孩子表示法5.3 双亲孩子表示法5.4 孩子兄弟表示法树 一、树的概念 树形结构是一种…
阅读更多...
Git基础知识学习

Git基础知识学习

1. Git工作机制 Workspace&#xff1a; 工作区&#xff0c;就是你平时存放项目代码的地方Index / Stage&#xff1a; 暂存区&#xff0c;用于临时存放你的改动&#xff0c;事实上它只是一个文件&#xff0c;保存即将提交到文件列表信息Repository&#xff1a; 仓库区&#xff0…
阅读更多...
CleanMyMac4.12.3全新版本Mac清理优化工具

CleanMyMac4.12.3全新版本Mac清理优化工具

CleanMyMac X是一款超好用的Mac清理优化工具&#xff0c;可以帮助用户删除系统垃圾、不需要的应用程序和恶意软件&#xff0c;并调整您的 Mac 以获得最大速度&#xff01; CleanMyMac X作为一款知名的系统清理软件&#xff0c;深受广大用户们的喜爱。它操作简洁&#xff0c;能够…
阅读更多...
Mycat2（三）mycat2搭建读写分离

Mycat2（三）mycat2搭建读写分离

文章目录一、mycat一主一从读写分离原理二、搭建MySQL主从复制三、配置mycat2一主一从读写分离四、配置Mycat2双主双从读写分离4.1 Mysql 双主双从搭建步骤1、创建MySQL数据库与MySQL 机器信息2、双柱双从配置2.1 master1配置2.2 master2配置2.3 Slave1、Slave2 配置3、在两台主…
阅读更多...
程序员如何在职场上走得更远一些?

程序员如何在职场上走得更远一些?

一. 工作心态 首先第一个要聊的啊就是这个心态的问题&#xff0c;我觉得有时候可以改变一下自己的心态&#xff0c;可以尝试把工作当成一种投资&#xff0c;或者说呢把工作当成一种自己的产品来经营&#xff0c;把目光多多的聚焦在这个收获和成长上面啊这样一个心态来应对&…
阅读更多...
KV数据分片和分布

KV数据分片和分布

KV数据分片和分布 KV存储数据组织方式 Hash&#xff1a;对于Hash方式&#xff0c;键值对数据的存储位置由预定义的Hash函数确定&#xff0c;因此所有键值对数据不是有序排列。Hash方式的优点是通过Hash函数计算存储位置的效率高&#xff0c;因此处理插入、删除、更新、单点查…
阅读更多...
MySQL之事务

MySQL之事务

引入事务&#xff1a; 一个事务其实就是一个完整的业务逻辑&#xff0c;它是一个最小的工作单元&#xff0c;是不可再分的。 那么什么是一个完整的业务逻辑呢&#xff1f; 拿现实生活中的银行业务举例&#xff0c;假设转账&#xff0c;从A账户向B账户中转账10000&#xff0c…
阅读更多...
Redis：一、简介

Redis：一、简介

Redis 1. redis的简介 1.1 NoSQL的介绍 在介绍redis之前&#xff0c;我们先来了解一下NoSQL(Not only SQL)&#xff0c;不仅仅是SQL。 NoSQL&#xff0c;泛指非关系型的数据库。随着互联网web2.0网站的兴起&#xff0c;传统的关系型数据库在应付web2.0网站&#xff0c;特别…
阅读更多...
Cache（缓存）基本概念

Cache（缓存）基本概念

cache的概念在计算机中被广泛应用&#xff0c;包括TLB等都使用了它的理念&#xff0c;因此对其进行总结。Cache——位于CPU上&#xff0c;处于寄存器和内存之间的存储单元。 Cache Hit & Miss在写入cache的时候&#xff0c;有hit&#xff08;命中&#xff09;和miss&#x…
阅读更多...
基于ros1的 apollo 7.0.0规划控制算法

基于ros1的 apollo 7.0.0规划控制算法

apollo.ros-7.0.0 上次给大家带来了之前学习apollo时开发的内容apollo.ros-1.0.0和apollo.ros-3.0.0&#xff0c;主要是针对apollo 1.0.0和3.0.0版本进行了ros1下的移植和规划控制算法的学习。本次在之前工作的基础上&#xff0c;针对apollo 7.0.0版本&#xff0c;进行了ros1下…
阅读更多...
植物大战僵尸：分析植物的攻击速度

植物大战僵尸：分析植物的攻击速度

植物大战僵尸中&#xff0c;植物是有攻击速度的&#xff0c;比如每隔一段时间会吐出一些子弹&#xff0c;那么由此可判断吐出子弹应该是由一个计数器控制的&#xff0c;也就是说只要我们能够找到控制植物攻击的时钟并改写它&#xff0c;也就可以实现植物的无限吐子弹。 吐出子…
阅读更多...
数据结构---二叉树

数据结构---二叉树

坚持看完&#xff0c;结尾有思维导图总结 这里写目录标题什么是二叉树&#xff1f;二叉树的定义二叉树的性质二叉树的基石在哪里?总结什么是二叉树&#xff1f; 二叉树的定义 二叉树&#xff0c;就是从一个根开始&#xff0c;按照两边分支的方式向下生长的树&#xff0c;就能…
阅读更多...
python虚拟环境的概念，用法（pycharm）

python虚拟环境的概念，用法（pycharm）

1.在PyCharm中创建python项目时&#xff0c;需要配置python的运行环境&#xff0c;除了使用系统现有环境以外&#xff0c;还可以创建虚拟环境。 2.虚拟环境的创建是因为在实际开发中需要同期用到不同版本的python解释器&#xff0c;不同的第三方库以及同一个第三方库的不同版本…
阅读更多...
Qt音视频开发08-ffmpeg内核优化（极速打开/超时回调/实时响应）

Qt音视频开发08-ffmpeg内核优化（极速打开/超时回调/实时响应）

一、前言 最初编写这套视频解析组件的时候&#xff0c;面对的场景是视频监控行业&#xff0c;对应设备都是网络监控摄像机&#xff0c;传过来的都是rtsp这种视频流&#xff0c;做过这一块的人都知道&#xff0c;打开某个视频流默认耗时比较大&#xff0c;基本上在2s左右&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023