webgl_effects_ascii

ThreeJS 官方案例学习（webgl_effects_ascii）

1.效果图

2.源码

<template>
	<div>
		<div id="container"></div>
	</div>
</template>
<script>
import * as THREE from 'three';
// 导入控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 引入房间环境，创建一个室内环境
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
// 导入性能监视器，内存使用率
import Stats from 'three/examples/jsm/libs/stats.module.js';
// 导入gltf载入库、模型加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
// 引入模型解压器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
//GUI界面
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
import gsap from 'gsap';
// ASCII码字化效果（文本画）(使用字符代替物质的组成部分,)
import { AsciiEffect } from 'three/examples/jsm/effects/AsciiEffect.js';
// 轨迹球控制器
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
export default {
	data() {
		return {
			container: null, //界面需要渲染的容器
			scene: null,	// 场景对象
			camera: null, //相机对象
			renderer: null, //渲染器对象
			controller: null,	// 相机控件对象
			stats: null,// 性能监听器
			mixer: null,//动画混合器
			start: Date.now(),// Date.now()得到的是当前时间戳，单位毫秒，用于跟踪时间
			effect: null,//ASCII码文本画渲染器对象
			sphere: null,//球对象
		};
	},
	mounted() {
		this.init()
		this.animate()  //如果引入了模型并存在动画，可在模型引入成功后加载动画
		window.addEventListener("resize", this.onWindowSize)
	},
	beforeUnmount() {
		console.log('beforeUnmount===============');
		// 组件销毁时置空
		this.container = null
		this.scene = null
		this.camera = null
		this.renderer = null
		this.controller = null
		this.stats = null
		this.mixer = null
		this.sphere = null
	},
	methods: {
		/**
		* @description 初始化
		 */
		init() {
			this.container = document.getElementById('container')
			this.setScene()
			this.setCamera()
			this.setRenderer()
			this.setEffect()
			this.setController()
			this.addHelper()
			// this.setPMREMGenerator()
			this.setLight()
			this.setMeah()
			this.addStatus()
		},
		/**
		 * @description 创建场景
		 */
		setScene() {
			// 创建场景对象Scene
			this.scene = new THREE.Scene()
			// 设置场景背景
			this.scene.background = new THREE.Color(0, 0, 0);
		},
		/**
		 * @description 创建相机
		*/
		setCamera() {
			// 第二参数就是 长度和宽度比 默认采用浏览器  返回以像素为单位的窗口的内部宽度和高度
			this.camera = new THREE.PerspectiveCamera(70, this.container.clientWidth / this.container.clientHeight, 1, 1000)
			// 设置相机位置
			this.camera.position.set(0, 150, 500)
			// 设置摄像头宽高比例
			this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
			// 设置摄像头投影矩阵
			this.camera.updateProjectionMatrix();
			// 设置相机视线方向
			this.camera.lookAt(new THREE.Vector3(0, 0, 0))// 0, 0, 0 this.scene.position
			// 将相机加入场景
			this.scene.add(this.camera)
		},
		/**
		 * @description 创建渲染器
		 */
		setRenderer() {
			// 初始化渲染器
			this.renderer = new THREE.WebGLRenderer()
			// 设置渲染器宽高
			this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
		},

		/**
		* @description 创建AsciiEffect渲染器,AsciiEffect实现物体ASCII码字化渲染效果
		*/
		setEffect() {
			// 使用renderer初始化Ascii效果
			this.effect = new AsciiEffect(this.renderer, ' .:-+*=%@#', { invert: true })
			// 设置渲染器宽高
			this.effect.setSize(this.container.clientWidth, this.container.clientHeight);
			this.effect.domElement.style.color = 'white';
			this.effect.domElement.style.backgroundColor = 'black';

			// Special case: append effect.domElement, instead of renderer.domElement.
			// AsciiEffect creates a custom domElement (a div container) where the ASCII elements are placed.
			this.container.appendChild(this.effect.domElement);
		},
		/**
		 * @description 添加创建控制器
		 */
		setController() {
			this.controller = new TrackballControls(this.camera, this.effect.domElement);
			// this.controller = new OrbitControls(this.camera, this.renderer.domElement);
			// 控制缩放范围
			// this.controller.minDistance = 1;
			// this.controller.maxDistance = 5;
			//是否开启右键拖拽
			// this.controller.enablePan = false;
			// 阻尼（惯性）
			this.controller.enableDamping = true; //启用阻尼（惯性）
			this.controller.dampingFactor = 0.04; //阻尼惯性有多大
		},
		/**
		 * @description 创建辅助坐标轴
		 */
		addHelper() {
			// 模拟相机视锥体的辅助对象
			let helper = new THREE.CameraHelper(this.camera);
			// this.scene.add(helper);
			//创建辅助坐标轴、轴辅助 （每一个轴的长度）
			let axisHelper = new THREE.AxesHelper(150);  // 红线是X轴，绿线是Y轴，蓝线是Z轴
			// this.scene.add(axisHelper)
			// 坐标格辅助对象
			let gridHelper = new THREE.GridHelper(100, 30, 0x2C2C2C, 0x888888);
			// this.scene.add(gridHelper);
		},
		/**
		 * @description 给场景添加环境光效果
		 */
		setPMREMGenerator() {
			// 预过滤的Mipmapped辐射环境贴图
			const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
			this.scene.environment = pmremGenerator.fromScene(new RoomEnvironment(this.renderer), 0.04).texture;
		},
		/**
		 * @description 设置光源
		 */
		setLight() {
			// 平行光
			const pointLight1 = new THREE.DirectionalLight(0xffffff, 3, 0, 0);
			pointLight1.position.set(500, 500, 500);
			this.scene.add(pointLight1);
			const pointLight2 = new THREE.DirectionalLight(0xffffff, 1, 0, 0);
			pointLight2.position.set(- 500, - 500, - 500);
			this.scene.add(pointLight2);
		},
		/**
		 * @description 创建性能监听器
		*/
		addStatus() {
			// 创建一个性能监听器
			this.stats = new Stats();
			// 将性能监听器添加到容器中
			this.container.appendChild(this.stats.dom);
		},
		/**
		* @description 添加创建模型
		*/
		setMeah() {
			// 添加球模型
			this.sphere = new THREE.Mesh(new THREE.SphereGeometry(200, 20, 10), new THREE.MeshPhongMaterial({ flatShading: true }))//材质是否使用平面着色进行渲染
			this.scene.add(this.sphere)
			// 地板
			const plane = new THREE.Mesh(new THREE.PlaneGeometry(400, 400), new THREE.MeshBasicMaterial({ color: 0xe0e0e0 }));
			plane.position.y = - 200;
			plane.rotation.x = - Math.PI / 2;
			this.scene.add(plane)
		},
		/**
		 * @description 监听屏幕的大小改变，修改渲染器的宽高，相机的比例
		*/
		// 窗口变化
		onWindowSize() {
			// 更新摄像头
			this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
			// 更新摄像机的投影矩阵
			this.camera.updateProjectionMatrix();
			//更新渲染器
			this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
			// 设置渲染器的像素比
			// this.renderer.setPixelRatio(window.devicePixelRatio)
			this.effect.setSize(this.container.clientWidth, this.container.clientHeight);
		},
		/**
		* @description 动画执行函数
		*/
		animate() {
			//计算从开始到现在一共经过了多少毫秒
			const timer = Date.now() - this.start;
			this.sphere.position.y = Math.abs(Math.sin(timer * 0.002)) * 150;
			this.sphere.rotation.x = timer * 0.0003;
			this.sphere.rotation.z = timer * 0.0002;
			// 引擎自动更新渲染器
			requestAnimationFrame(this.animate);
			//update()函数内会执行camera.lookAt(x, y, z)
			this.controller.update();
			// 更新性能监听器
			this.stats.update();
			// 重新渲染场景
			// this.renderer.render(this.scene, this.camera);
			this.effect.render(this.scene, this.camera);
		},
	},
};
</script>
<style>
#container {
	position: absolute;
	width: 100%;
	height: 100%;
}
</style>

tats.update();
			// 重新渲染场景
			// this.renderer.render(this.scene, this.camera);
			this.effect.render(this.scene, this.camera);
		},
	},
};
</script>
<style>
#container {
	position: absolute;
	width: 100%;
	height: 100%;
}
</style>