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>