首页 > 网络编程 > JavaScript > javascript技巧 > three.js物体轮廓发光和物体发光

three.js设置物体轮廓发光和物体发光完整示例代码

2025-05-30 09:51:16 作者：夏暖冬凉

这篇文章主要刚大家介绍了关于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物体轮廓发光和物体发光内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Three.js后期处理效果(发光描边OutlinePass)