系列文章目录

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显示功能，后续文章，我将带大家慢慢深入了解。

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

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