快捷導(dǎo)航

three.js設(shè)置物體輪廓發(fā)光和物體發(fā)光完整示例代碼

更新時間：2025年05月30日 09:51:26 作者：夏暖冬涼

這篇文章主要剛大家介紹了關(guān)于three.js設(shè)置物體輪廓發(fā)光和物體發(fā)光的相關(guān)資料,文中通過示例代碼講了如何通過調(diào)整強度、顏色及范圍參數(shù),利用軟件工具設(shè)置物體輪廓發(fā)光和泛光效果,需要的朋友可以參考下

設(shè)置物體輪廓發(fā)光

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 導(dǎo)入后期合成
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); // 設(shè)置背景顏色
renderer.setSize(window.innerWidth, window.innerHeight); //設(shè)置three.js渲染區(qū)域的尺寸(像素px)
document.body.appendChild(renderer.domElement);
// renderer.render(scene, camera);

// 相機圍繞目標(biāo)進(jìn)行軌道運動; 注意OrbitControls會影響 camera.lookAt(x,y,z)失效，需設(shè)置controls.target.set(x,y,z)才能生效
const controls = new OrbitControls(camera, renderer.domElement);
// 可設(shè)置控制器阻尼，讓控制器更有真實效果，必須在你的動畫循環(huán)里調(diào)用.update()
controls.enableDamping = true

// 添加后期合成
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
// 導(dǎo)入OutlinePass
const outlinePass = new OutlinePass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  scene,
  camera
);
outlinePass.edgeStrength = 10; // 描邊的寬度
outlinePass.edgeGlow = 1; // 光暈
outlinePass.edgeThickness = 2; // 光暈粗細(xì)度
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);

// 設(shè)置發(fā)光的物體
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()

// 監(jiān)聽畫面變化，更新渲染畫面
window.addEventListener('resize', () => {
  // 更新攝像頭
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新攝像機的投影矩陣
  camera.updateProjectionMatrix();
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 設(shè)置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})
</script>

設(shè)置物體泛光

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 導(dǎo)入后期合成
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) // 設(shè)置物體所在的層級，默認(rèn)層級為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); // 設(shè)置背景顏色
renderer.setSize(window.innerWidth, window.innerHeight); //設(shè)置three.js渲染區(qū)域的尺寸(像素px)
renderer.autoClear = false; // 不自動清除顏色和深度緩沖區(qū)
document.body.appendChild(renderer.domElement);
// renderer.render(scene, camera);

// 相機圍繞目標(biāo)進(jìn)行軌道運動; 注意OrbitControls會影響 camera.lookAt(x,y,z)失效，需設(shè)置controls.target.set(x,y,z)才能生效
const controls = new OrbitControls(camera, renderer.domElement);
// 可設(shè)置控制器阻尼，讓控制器更有真實效果，必須在你的動畫循環(huán)里調(diào)用.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; // 光暈粗細(xì)度
// 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);

// // 設(shè)置發(fā)光的物體
// 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設(shè)置
  if (cube.layers.mask === 1) {
    cube.layers.set(1);
  } else {
    cube.layers.set(0);
  }
})

// 瀏覽器動畫
const clock = new THREE.Clock()
function render(time) {
  controls.update() // 阻尼控制器更新

  // 清除顏色和深度緩沖區(qū)
  renderer.clear();
  // 渲染層級 0 并應(yīng)用后期處理
  camera.layers.set(0);
  composer.render();
  // 清除深度緩沖區(qū)，避免深度沖突
  renderer.clearDepth();
  // 渲染層級 1 不應(yīng)用后期處理
  camera.layers.set(1);
  renderer.render(scene, camera);

  requestAnimationFrame(render); // 請求動畫幀
}
render()

// 監(jiān)聽畫面變化，更新渲染畫面
window.addEventListener('resize', () => {
  // 更新攝像頭
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新攝像機的投影矩陣
  camera.updateProjectionMatrix();
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 設(shè)置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})
</script>