。

首先创建EffectComposer实例#xff0c;并添加RenderPass和OutlinePass#xff0c;最后在渲染循环中调用…three.js

react

使用EffectComposer和其附加的渲染效果Passes如RenderPass和OutlinePass来实现高级渲染效果。

首先创建EffectComposer实例并添加RenderPass和OutlinePass最后在渲染循环中调用EffectComposer的渲染方法。

这样可以在保持场景内容不变的情况下应用光晕效果增强场景的视觉效果。

EffectComposer效果合成器

renderer用于渲染场景的渲染器。

renderTarget可选一个预先配置的渲染目标内部由

EffectComposer

passes一个用于表示后期处理过程链包含顺序的数组。

readBuffer内部读缓冲区的引用。

过程一般从该缓冲区读取先前的渲染结果。

renderer内部渲染器的引用。

renderToScreen最终过程是否被渲染到屏幕默认帧缓冲区。

常用方法

addPass将传入的过程添加到过程链。

insertPass将传入的过程插入到过程链中所给定的索引处。

render执行所有启用的后期处理过程来产生最终的帧。

reset:重置所有EffectComposer的内部状态。

setPixelRatio:设置设备的像素比。

setSize:考虑设备像素比重新设置内部渲染缓冲和过程的大小为(width,

资源文件说明

EffectComposer所有后期处理效果的容器。

RenderPass用于渲染基础场景到一张纹理上但不会添加至屏幕上。

OutlinePass添加闪烁效果。

FXAA/SMAA

Pass可选地加入抗锯齿Pass如FXAAShader或SMAAPass提高边缘平滑度。

UnrealBloomPass如果需要还可以添加UnrealBloomPass以增强光照和视觉效果。

引入资源文件

three/examples/jsm/postprocessing/EffectComposer;

import

three/examples/jsm/postprocessing/RenderPass;

import

three/examples/jsm/postprocessing/OutlinePass;

import

three/examples/jsm/postprocessing/ShaderPass;

import

three/examples/jsm/shaders/GammaCorrectionShader;创建THREE.EffectComposer

创建一个

THREE.WebGLRenderer({//增加下面两个属性可以抗锯齿antialias:

true,alpha:

染器通道RenderPass的作用是指定后处理对应的相机camera和场景scene。

const

composer.addPass(renderPass);创建OutlinePass高亮通道

给three.js场景中模型添加闪烁效果如果有多个模型的话可以通过OutlinePass的选择对象属性.selectedObjects设置。

const

OutlinePass第一个参数的尺寸和canvas画布保持一致

const

camera);outlinePass.visibleEdgeColor.set(#00FF00);

呼吸显示颜色

outlinePass.hiddenEdgeColor.set(#00FF00);//

呼吸消失颜色

composer.addPass(outlinePass);循环渲染

function

{composer.render(T);requestAnimationFrame(renderFn);

}高亮方法封装

创建一个EffectComposer效果组合器对象在该对象上添加后期处理通道用于模型高亮const

composer

composer.addPass(renderPass);//

new

OutlinePass第一个参数的尺寸和canvas画布保持一致const

outlinePass

camera);outlinePass.visibleEdgeColor.set(#00FF00);

呼吸显示颜色outlinePass.hiddenEdgeColor.set(#00FF00);//

0.5;

光晕[0,1]outlinePass.edgeThickness

3;//

呼吸闪烁速度outlinePass.renderToScreen

true;

将OutlinePass通道添加到后处理composer中composer.addPass(outlinePass);//

保持outputEncoding

ShaderPass(GammaCorrectionShader);effectCopy.renderToScreen

true;composer.addPass(effectCopy);composer.selectedObjectEffect

function

[];selectedObjects.push(objs);outlinePass.selectedObjects

composer;

datahubBox.current.addEventListener(mousemove,

(event)

true;composer.selectedObjectEffect(selectObj[0].object);}

else

});我想要实现的是子模型高亮所以我这里取子模型的object。

完整代码

THREE.HemisphereLight(0xffffff,

0xffffff,

THREE.HemisphereLight(0xffffff,

0.5);let

THREE.DirectionalLight(0xffffff,

0.1);let

THREE.DirectionalLight(0xffffff,

0.5);hemiLightTop.position.set(0,

2000,

0);hemiLightBottom.position.set(0,

2000);scene.add(hemiLightTop);scene.add(hemiLightBottom);scene.add(lightTop);scene.add(lightAfter);lightTop.castShadow

true;//

{requestAnimationFrame(renderFn);if

(isComposer

用相机渲染一个场景renderer.render(scene,

{//

composerData需要高亮数据datahubBox.current.addEventListener(mousemove,

(event)

true;composer.selectedObjectEffect(selectObj[0].object);}

else

datahubBox.current.offsetWidth;let

height

datahubBox.current.offsetHeight;let

width

100000);camera.position.set(-547,

15224,

2195);camera.lookAt(scene.position);//

创建一个webGL对象renderer

THREE.WebGLRenderer({//增加下面两个属性可以抗锯齿antialias:

true,alpha:

解决模型闪烁问题});renderer.setSize(width,

height);

设置渲染区域尺寸renderer.setClearColor(0x23284D,

0.0);

首先渲染器开启阴影renderer.shadowMap.enabled

true;//

修改渲染模式renderer.setPixelRatio(window.devicePixelRatio);renderer.outputEncoding

THREE.sRGBEncoding;renderer.textureEncoding

挂载到DOM节点datahubBox.current.appendChild(renderer.domElement);//

监听鼠标事件controls