整理一些发光的方法,使用的自己封装的组件进行加载,有需要可以看看这篇文章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() {
//执行渲染操作
this.renderer.render(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;
this.composer = new EffectComposer(this.$refs.draw.renderer);
this.composer.addPass(renderScene);
this.composer.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() {
//执行渲染操作
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this.animation);
this.$parent.composer.render();
},
显示出来的结果是这样
你可能需要使用的图片
就是这样,下班!!!