three.js 后期处理，物体高亮

最新推荐文章于 2024-08-28 09:25:49 发布

很不简单

最新推荐文章于 2024-08-28 09:25:49 发布

阅读量3k

点赞数 1

分类专栏： three.js 文章标签： three.js webgl

本文链接：https://blog.csdn.net/qq_41960265/article/details/109766707

版权

通过EffectComposer、RenderPass和UnrealBloomPass，本文深入探讨如何在three.js中实现物体高亮效果。关键在于理解UnrealBloomPass的作用，同时注意避免将场景背景设置为白色导致的显示问题。

摘要由CSDN通过智能技术生成

在这里插入图片描述

已经最简化的代码了，看 EffectComposer，RenderPass，UnrealBloomPass这三个东西就行了。主要是UnrealBloomPass实现高亮

sence.background不能设置为白色。不然会把整个页面都是白色

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>bloom</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
		<style>
		#info > * {
   
			max-width: 650px;
			margin-left: auto;
			margin-right: auto;
		}
		</style>
	</head>
	<body>

		<div id="container"