wordpress进入站点,百度权重,国外设计网站及介绍,个人备案后可以做电影网站吗先来个效果图 之前写的那个稍微有点问题#xff0c;帧率只有30#xff0c;参照官方代码修改后#xff0c;帧率可以达到50了#xff0c;在不全屏的状态下#xff0c;帧率60 1.首先需要导入库
// 用于模型边缘高亮
import { EffectComposer } from three/examples/js…先来个效果图 之前写的那个稍微有点问题帧率只有30参照官方代码修改后帧率可以达到50了在不全屏的状态下帧率60 1.首先需要导入库
// 用于模型边缘高亮
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
import { SMAAPass } from three/examples/jsm/postprocessing/SMAAPass.js
import { UnrealBloomPass } from three/examples/jsm/postprocessing/UnrealBloomPass.js然后需要注意我这里使用的是vue的框架但是对于变量的定义我用的是全局的定义。
// 模型边缘高光
let composer;
let outlinePass;
let renderPass;
let effectFXAA;2.添加EffectComposer效果组合器
add_composer() {// 创建一个EffectComposer效果组合器对象然后在该对象上添加后期处理通道。composer new EffectComposer(renderer)// 新建一个场景通道 为了覆盖到原来的场景上renderPass new RenderPass(scene, camera)composer.addPass(renderPass);// 物体边缘发光通道outlinePass new OutlinePass(mouse, scene, camera)outlinePass.visibleEdgeColor.set(parseInt(0x00ff00)) // 呼吸显示的颜色outlinePass.hiddenEdgeColor new THREE.Color(0, 0, 0) // 呼吸消失的颜色composer.addPass(outlinePass)// 解决高亮后环境变暗的问题const outputPass new OutputPass();composer.addPass( outputPass );// 自定义的着色器通道 作为参数effectFXAA new ShaderPass(FXAAShader)effectFXAA.uniforms[ resolution ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );composer.addPass(effectFXAA)},
outlinePass new OutlinePass(mouse, scene, camera)中的mouse就是 new THREE.Vector2( window.innerWidth, window.innerHeight )可以直接用这个
把上面这个函数在mounted的时候调用一下初始化一次后面想让哪个模型高亮就传哪个模型进去
3.点击模型边缘高亮
现在就需要在点击模型的事件中去调用这个函数
// 点击模型事件
pick(event) {const found self.cast(event)[0];if (found) {// [transformer]是给变压器加[transformer,car]是给变压器和房子加子模型要.objectoutlinePass.selectedObjects [found.object]; }
},我的self就是this。
我想要实现的是子模型的高亮所以我要取子模型的object其次需要注意的就是传入的参数是个数组你传入哪些模型点击的时候那些模型就会一起高亮我这里传入的是一个是选中的子模型。
如果你不想让这个模型边缘高亮了那么outlinePass.selectedObjects []; 这个数组里放哪个模型哪个模型边缘高亮通过修改 outlinePass.selectedObjects 实现。
4.移除模型边缘高亮
当不想要高亮的时候把composer赋值为空就可以了。
doubel_pick(event) {outlinePass.selectedObjects [];
},5.监听窗口变化
当窗口大小改变时需要对应着改变渲染的大小
// 随着窗体的变化修改场景
function onResize() {camera.aspect window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);composer.setSize(window.innerWidth, window.innerHeight);effectFXAA.uniforms[ resolution ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
}
// 监听窗体调整大小事件
window.addEventListener(resize, onResize, false);6.循环渲染
const animate () {stats.update();controls.update();//renderer.render(scene, camera); 不在需要renderer.render了composer.render(scene, camera)self.render_animation requestAnimationFrame(animate);
};
animate()这里需要注意的就是不要再添加renderer.render了因为前面new EffectComposer的时候已经把renderer添加进去了后面就是组合效果只需要循环render后面这个composer就可以了这是我的理解。
当然这也是造成之前帧率低的主要原因循环渲染了所以删掉他直接composer.render(scene, camera)帧率50在不全屏的情况下帧率60基本满足需求。 附官方案例
案例https://threejs.org/examples/?qoutlin#webgl_postprocessing_outline
源码https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing_outline.html
前面被其他博客误导了。
