Logo with GodRays Effect | 射线光晕特效 | Three.js后期特效处理教程
在本教程中，我们将在几分钟内演示如何使用JavaScript和Three.js 创建一个带有god ray背景的蝙蝠侠徽标。让我们看看！
在上一个教程中，我们已经向您展示了如何使用Three.js将三维汽车模型导入到网页中。本教程将重用Code来导入蝙蝠侠徽标模型。
接下来我要找一个适合蝙蝠标志的模型。我在Sketchfab上找到了一个免费版本，所以让我们下载它。
下面是上一个教程中的Code。让我们用蝙蝠侠的标志替换汽车模型，并将模型缩放大小从0.5改为100。
let loader = new THREE.GLTFLoader();
loader.load(‘scene.gltf’, function(gltf){
let bat = gltf.scene.children[0];
bat.scale.set(100,100,100);
scene.add(gltf.scene);
animate();
});
让我们将场景背景更改为黑色，并更改相机位置和角度。我也会增加视场角和视距。
scene.background = new THREE.Color(0x020202);
camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,50000);
camera.position.y = 310;
camera.position.z = 500;
接下来我们要调整灯光Source。我们已经有多个灯光Source从上一个教程。现在我们只需要一个背景光。我将灯光颜色设置为暖黄色并降低亮度。也可以改变方向使背景发光。
let directionalLight = new THREE.DirectionalLight(0xffccaa,3);
directionalLight.position.set(0,0,-1);
scene.add(directionalLight)
现在要创建一个体积光或上帝光线，我们需要创建一个光Source的形状。让我们创建一个圆形。上帝光线效果的颜色由光线Source材质的颜色决定。我要调成黄色。我会把它放在蝙蝠标志后面。还可以添加一个小的水平比例来创建椭圆形状。
let circleGeo = new THREE.CircleGeometry(220,50);
let circleMat = new THREE.MeshBasicMaterial({color: 0xffccaa});
let circle = new THREE.Mesh(circleGeo, circleMat);
circle.position.set(0 ,100 ,-500);
circle.scale.setX(1.2);
scene.add(circle);
场景准备好了。下一步是在我们刚刚创建的形状上添加上帝射线后处理效果。有一个很棒的Three.js后处理库，可以帮您完成繁重的工作。只需从github下载最新版本或使用npm install命令，就可以了！
下载后，复制postprocessing.js并将其包含到带有脚本标记的页面中。
<script src=“postprocessing.min.js”></script>
下一步使用上帝射线效果构造器创建一个效果对象。我们将通过摄像机和我们的圆形。最后一个是可选对象，我们可以自定义上帝光线的特性。
这些数字没有实际的公式。这取决于你希望你的光是怎样的。尝试图书馆的官方演示，以了解更多关于每个属性的信息。
好的，效果对象已经准备好了。下一步是创建通行证。Pass是我们如何在后期处理中使用着色器的。我们需要的第一个关卡是一个renderPass。通常，我们将使用webgl渲染来渲染场景。但由于要应用后处理，我们将不得不使用renderPass。
let godraysEffect = new POSTPROCESSING.GodRaysEffect(camera, circle, {
resolutionScale: 1,
density: 0.8,
decay: 0.95,
weight: 0.9,
samples: 100
});
接下来是effectPass。在这里，你将通过我们创建的上帝光线效果对象。可以向过程添加多个效果。我们还需要将render to screen属性设置为true才能启用它。
最后一步是创建一个效果生成器，在这里您将添加所有的过程。您需要将普通呈现程序传递给构造函数。然后使用addPass添加所有的通行证。
然后用composer渲染场景。
看起来不错，但如果你仔细看，你会看到锯齿状的边缘。
我们可以通过添加抗锯齿效果来解决这个问题。使用此库中提供的smapass。
这就是本Three.js教程的全部内容。希望有帮助！
CSS
喜欢我们的订阅我们的WebGLStudy.COM保持联系，如果你喜欢看更多。下次见！
WEBGL学习网 » Logo with GodRays Effect | 射线光晕特效 | Three.js后期特效处理教程
