three.js设置物体轮廓发光和物体发光完整示例代码
更新时间：2025年05月30日 09:51:26 作者：夏暖冬凉
这篇文章主要刚大家介绍了关于three.js设置物体轮廓发光和物体发光的相关资料,文中通过示例代码讲了如何通过调整强度、颜色及范围参数,利用软件工具设置物体轮廓发光和泛光效果,需要的朋友可以参考下
设置物体轮廓发光
<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 导入后期合成
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
// 场景
const scene = new THREE.Scene();
// 模型
// 顶点着色器
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 片元着色器
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(5, 0, 0);
scene.add(cube);
const torusKnotGeometry = new THREE.TorusKnotGeometry(1, 0.35, 100, 16);
const torusKnotMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff });
const torusKnot = new THREE.Mesh(torusKnotGeometry, torusKnotMaterial);
torusKnot.position.set(0, 0, 0);
scene.add(torusKnot);
// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
// 辅助线
const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);
// 初始化渲染器
const renderer = new THREE.WebGLRenderer({
antialias: true // 锯齿模糊
});
// renderer.setClearColor(0x444444, 1); // 设置背景颜色
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
document.body.appendChild(renderer.domElement);
// renderer.render(scene, camera);
// 相机围绕目标进行轨道运动; 注意OrbitControls会影响 camera.lookAt(x,y,z)失效，需设置controls.target.set(x,y,z)才能生效
const controls = new OrbitControls(camera, renderer.domElement);
// 可设置控制器阻尼，让控制器更有真实效果，必须在你的动画循环里调用.update()
controls.enableDamping = true
// 添加后期合成
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
// 导入OutlinePass
const outlinePass = new OutlinePass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
scene,
camera
);
outlinePass.edgeStrength = 10; // 描边的宽度
outlinePass.edgeGlow = 1; // 光晕
outlinePass.edgeThickness = 2; // 光晕粗细度
outlinePass.pulsePeriod = 5; // 闪烁频率（呼吸灯）
outlinePass.visibleEdgeColor = new THREE.Color(0xff3333); // 描边颜色
outlinePass.hiddenEdgeColor = new THREE.Color(0x000000); // 光晕颜色
// new THREE.TextureLoader().load('./26ad6804f422468988c3de6fe003bd6a.jpeg', texture => {
// texture.wrapS = THREE.RepeatWrapping;
// texture.wrapT = THREE.RepeatWrapping;
// outlinePass.patternTexture = texture;
// outlinePass.usePatternTexture = true;
// });
composer.addPass(outlinePass);
// 设置发光的物体
outlinePass.selectedObjects = [torusKnot]
window.addEventListener('click', (e) => {
outlinePass.selectedObjects = [cube];
})
// 浏览器动画
const clock = new THREE.Clock()
function render(time) {
controls.update() // 阻尼控制器更新
// renderer.render(scene, camera);
composer.render(); // 后期合成来渲染
requestAnimationFrame(render); // 请求动画帧
}
render()
// 监听画面变化，更新渲染画面
window.addEventListener('resize', () => {
// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
// 更新摄像机的投影矩阵
camera.updateProjectionMatrix();
// 更新渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置渲染器的像素比
renderer.setPixelRatio(window.devicePixelRatio)
})
</script>
设置物体泛光
<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 导入后期合成
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
// 场景
const scene = new THREE.Scene();
// 模型
// 顶点着色器
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 片元着色器
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(5, 0, 0);
cube.layers.set(1) // 设置物体所在的层级，默认层级为0
scene.add(cube);
const torusKnotGeometry = new THREE.TorusKnotGeometry(1, 0.35, 100, 16);
const torusKnotMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff });
const torusKnot = new THREE.Mesh(torusKnotGeometry, torusKnotMaterial);
torusKnot.position.set(0, 0, 0);
scene.add(torusKnot);
// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
// 辅助线
const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);
// 初始化渲染器
const renderer = new THREE.WebGLRenderer({
antialias: true, // 锯齿模糊
});
// renderer.setClearColor(0x444444, 1); // 设置背景颜色
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
renderer.autoClear = false; // 不自动清除颜色和深度缓冲区
document.body.appendChild(renderer.domElement);
// renderer.render(scene, camera);
// 相机围绕目标进行轨道运动; 注意OrbitControls会影响 camera.lookAt(x,y,z)失效，需设置controls.target.set(x,y,z)才能生效
const controls = new OrbitControls(camera, renderer.domElement);
// 可设置控制器阻尼，让控制器更有真实效果，必须在你的动画循环里调用.update()
controls.enableDamping = true
// 添加后期合成
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
// // 描边，突出物体轮廓
// const outlinePass = new OutlinePass(
// new THREE.Vector2(window.innerWidth, window.innerHeight),
// scene,
// camera
// );
// outlinePass.edgeStrength = 10; // 描边的宽度
// outlinePass.edgeGlow = 1; // 光晕
// outlinePass.edgeThickness = 2; // 光晕粗细度
// outlinePass.pulsePeriod = 5; // 闪烁频率（呼吸灯）
// outlinePass.visibleEdgeColor = new THREE.Color(0xff3333); // 描边颜色
// outlinePass.hiddenEdgeColor = new THREE.Color(0x000000); // 光晕颜色
// // new THREE.TextureLoader().load('./26ad6804f422468988c3de6fe003bd6a.jpeg', texture => {
// // texture.wrapS = THREE.RepeatWrapping;
// // texture.wrapT = THREE.RepeatWrapping;
// // outlinePass.patternTexture = texture;
// // outlinePass.usePatternTexture = true;
// // });
// composer.addPass(outlinePass);
// // 设置发光的物体
// outlinePass.selectedObjects = [torusKnot]
// window.addEventListener('click', (e) => {
// outlinePass.selectedObjects = [cube];
// })
// 泛光（光照氛围）
const unrealBloomPass = new UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
0.5, // 强度
0.5, // 半径
0.5 // > 0.5泛光
)
composer.addPass(unrealBloomPass);
// 点击泛光和不泛光控制
window.addEventListener('click', (e) => {
// console.log(cube.layers.mask); // 2的次方，通过set设置
if (cube.layers.mask === 1) {
cube.layers.set(1);
} else {
cube.layers.set(0);
}
})
// 浏览器动画
const clock = new THREE.Clock()
function render(time) {
controls.update() // 阻尼控制器更新
// 清除颜色和深度缓冲区
renderer.clear();
// 渲染层级 0 并应用后期处理
camera.layers.set(0);
composer.render();
// 清除深度缓冲区，避免深度冲突
renderer.clearDepth();
// 渲染层级 1 不应用后期处理
camera.layers.set(1);
renderer.render(scene, camera);
requestAnimationFrame(render); // 请求动画帧
}
render()
// 监听画面变化，更新渲染画面
window.addEventListener('resize', () => {
// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
// 更新摄像机的投影矩阵
camera.updateProjectionMatrix();
// 更新渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置渲染器的像素比
renderer.setPixelRatio(window.devicePixelRatio)
})
</script>总结
到此这篇关于three.js设置物体轮廓发光和物体发光的文章就介绍到这了,更多相关three.js物体轮廓发光和物体发光内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了JavaScript 实现拖拽效果组件功能(兼容移动端),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
这篇文章主要介绍了php 修改密码实现代码的相关资料,需要的朋友可以参考下2017-05-05
这篇文章主要为大家详细介绍了JavaScript实现伸缩二级菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要给大家介绍了关于如何通过一次报错详细谈谈Point事件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2018-05-05
超强推荐的js编程中的简洁写法收集...2007-08-08
这篇文章主要介绍了JavaScript判断变量是否为空的自定义函数分享,本文直接给出实现代码,需要的朋友可以参考下2015-01-01
这篇文章详细介绍了JavaScript中的DOM节点操作,包括节点类型、获取节点的方法、通过层级关系获取节点以及节点的其他操作,还讲解了如何使用JavaScript操作CSS样式,包括直接使用style属性和操作多个样式的方法,感兴趣的朋友跟随小编一起看看吧2025-10-10
闭包是js的一个难点也是它的一个特色,是我们必须掌握的js高级特性,下面这篇文章主要给大家介绍了关于JavaScript闭包函数的相关资料,需要的朋友可以参考下2023-01-01
最近公司项目需求需要对设备在地图上面进行监控,并在当设备一定距离时进行聚合,这篇文章主要给大家介绍了关于uniapp实现地图点聚合功能的相关资料,需要的朋友可以参考下2022-12-12
本文主要介绍了js+canvas实现动态吃豆人效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
最新评论