関連する API の使用:
1. EffectComposer (レンダリング後の処理のための一般的なフレームワーク。複数のレンダリング パス (パス) を組み合わせて特定の視覚効果を作成するために使用されます)
2. RenderPass (シーンのレンダリングに使用されるチャネルです。シーンとカメラを入力として受け取り、Three.js のデフォルトのレンダラ (レンダラー) を使用してシーンをレンダリングし、結果を次のレンダリング パスに出力します)
3.OutlinePass（エッジライン（輪郭）効果を作成するためのチャンネルです。奥行き情報と法線情報に基づいて、エッジに接するオブジェクトをストロークしてオブジェクトの輪郭を強調します）
4. ShaderPass (カスタム シェーダのチャネルです。これにより、カスタム シェーダ コードを指定し、それをシーンのレンダリング結果に適用できます。これにより、ガウス ブラー、ポスト シェーダなどのさまざまなグラフィックス効果を作成できます。加工エフェクトなど）
前回のThree.js の外部 glb、fbx、gltf、obj モデル ファイルの読み込みに関する記事をベースに、 createEffectComposer (エフェクト シンセサイザーの作成) と onChangeModelMeaterial (マテリアルの選択) のメソッドを追加します。
まず関連する API を導入します
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 {
ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'
import {
FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js'
エフェクトシンセサイザーメソッドの作成
// 创建效果合成器
createEffectComposer() {
const {
clientHeight, clientWidth } = this.container
this.effectComposer = new EffectComposer(this.renderer)
const renderPass = new RenderPass(this.scene, this.camera)
this.effectComposer.addPass(renderPass)
this.outlinePass = new OutlinePass(new THREE.Vector2(clientWidth, clientHeight), this.scene, this.camera)
this.outlinePass.visibleEdgeColor = new THREE.Color('#4d57fd') // 可见边缘的颜色
this.outlinePass.hiddenEdgeColor = new THREE.Color('#8a90f3') // 不可见边缘的颜色
this.outlinePass.edgeGlow = 2.0 // 发光强度
this.outlinePass.edgeThickness = 1 // 边缘浓度
this.outlinePass.edgeStrength = 4 // 边缘的强度，值越高边框范围越大
this.outlinePass.pulsePeriod = 100 // 闪烁频率，值越大频率越低
this.effectComposer.addPass(this.outlinePass)
// 抗锯齿
let effectFXAA = new ShaderPass(FXAAShader)
effectFXAA.uniforms.resolution.value.set(1 / clientWidth, 1 / clientHeight)
this.effectComposer.addPass(effectFXAA)
}
マテリアル メソッドを選択し、 getObjectByNameを介してマテリアル名を渡して発光効果を設定する必要があるマテリアルを取得し、エフェクト シンセサイザーのselectedObjectsパラメータを設定してマテリアルの発光効果を実現します。
onChangeModelMeaterial(name) {
const mesh = this.model.getObjectByName(name)
this.outlinePass.selectedObjects = [mesh]
}
オリジナルのsceneAnimation (シーンアニメーションフレームの描画方法)のrenderer.render()をcontrols.update()に変更します。
sceneAnimation() {
this.renderAnimation = requestAnimationFrame(() => this.sceneAnimation())
this.effectComposer.render()
this.controls.update()
//this.renderer.render(this.scene, this.camera)
}
完全なコードは、https: //gitee.com/ZHANG_6666/Three.js3D/blob/master/src/views/renderModel.jsを参照してください。
インターフェース効果の比較
