关于three.js中物体发光的方法整理

关于three.js中物体发光的方法整理

​
整理一些发光的方法,使用的自己封装的组件进行加载，有需要可以看看这篇文章vue中使用three.js加载各种模型文件（obj,mtl,fbx…）(封装

1.点精灵材质加贴图进行发光（图片在最后，大家可以试试）

<script>
export default {methods: {// 初始化模型initLoader() {var geometry = new THREE.SphereGeometry(30, 32, 16);var material = new THREE.MeshLambertMaterial({ color: 0xffff00 });var mesh = new THREE.Mesh(geometry, material);this.$refs.draw.scene.add(mesh);var textureLoader = new THREE.TextureLoader();// 加载贴图var texture = textureLoader.load("/static/round.png");// 点精灵材质var spriteMaterial = new THREE.SpriteMaterial({map: texture,//贴图color: 0xffff00,blending: THREE.AdditiveBlending,//在使用此材质显示对象时要使用何种混合。加法});var sprite = new THREE.Sprite(spriteMaterial);// 发光范围sprite.scale.set(100, 100, 1.0);mesh.add(sprite);},},
};
</script>

显示出来的结果是这样

​​

2.着色器材质进行发光（GLSL着色器）

<script>
export default {methods: {// 初始化模型initLoader() {// 生成球体var sphereGeom = new THREE.SphereGeometry(100, 32, 16);// 基础网格材质var textureLoader = new THREE.TextureLoader();// 加载贴图var texture = textureLoader.load("/static/round.png");var moonMaterial = new THREE.MeshBasicMaterial({map: texture,color: 0xffffff,});//把球体添加到场景var moon = new THREE.Mesh(sphereGeom, moonMaterial);this.$refs.draw.scene.add(moon);// 着色器材质(Uniforms 是 GLSL 着色器中的全局变量。var customMaterial = new THREE.ShaderMaterial({uniforms: {c: { type: "f", value: 1.0 },p: { type: "f", value: 1.4 },glowColor: { type: "c", value: new THREE.Color(0xffff00) },viewVector: { type: "v3", value: { x: 0, y: 100, z: 400 } },},// 顶点着色器vertexShader: `uniform vec3 viewVector;uniform float c;uniform float p;varying float intensity;void main() {vec3 vNormal = normalize( normalMatrix * normal);vec3 vNormel = normalize( normalMatrix * viewVector);intensity = pow( c - dot(vNormal, vNormel), p );gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0);}`,// 片段着色器fragmentShader: `uniform vec3 glowColor;varying float intensity;void main() {vec3 glow = glowColor * intensity;gl_FragColor = vec4( glow, 1.0 );}`,side: THREE.FrontSide,transparent: true,blending: THREE.AdditiveBlending, //在使用此材质显示对象时要使用何种混合。加法});var moonGlow = new THREE.Mesh(sphereGeom.clone(), customMaterial.clone());moonGlow.name = "moonGlow";// 放大1.2倍moonGlow.scale.multiplyScalar(1.2);// 加入中this.$refs.draw.scene.add(moonGlow);},},
};
</script>

我们还需要在渲染中添加这个（这是为了让相机动的时候发光层总是固定视角）

// 执行渲染操作
animation() {//执行渲染操作der(this.scene, this.camera);requestAnimationFrame(this.animation);this.scene.children.forEach((item) => {if (item.name === "moonGlow") {item.material.uniforms.viewVector.value =new THREE.Vector3().subVectors(this.camera.position, item.position);}});
},

显示出来的结果是这样（这个贴图没啥用处，就是为了好看）

​

3.使用UnrealBloomPass（后期）高亮

<script>
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";
export default {methods: {// 初始化模型initLoader() {var renderScene = new RenderPass(this.$refs.draw.scene,this.$refs.draw.camera);var bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight),1.5,0.4,0.85);bloomPass.threshold = 0;bloomPass.strength = 1.5;bloomPass.radius = 0;thisposer = new EffectComposer(this.$derer);thisposer.addPass(renderScene);thisposer.addPass(bloomPass);let box = new THREE.CylinderGeometry(5, 5, 5);let mail = new THREE.MeshBasicMaterial({color:0x00ff00});let mesh = new THREE.Mesh(box, mail);// 加入中this.$refs.draw.scene.add(mesh);},},
};
</script>

还需要在渲染的时候执行这一步

// 执行渲染操作animation() {//执行渲染操作der(this.scene, this.camera);requestAnimationFrame(this.animation);this.$der();},

显示出来的结果是这样

你可能需要使用的图片

就是这样，下班！！！