Three.js vers 133 Пытаюсь добавить SSAO и изменить рендеринг в композитор ⇐ Javascript

[Anonymous]

I'm trying to add SSAO to my three.js model, but when I change renderer.render() into composer.render() orbit control stops working and zoom of model switch to max.enter image description here
one image is before adding composer and another is after
enter image description here
here is my init function
func.init = (set) => {

func.floorTexture = new THREE.TextureLoader().load('/images/grass.jpeg');
scissorTexture = new THREE.TextureLoader().load('/images/scissor3.png');

func.data.selector = set.div_id;
func.data.resizable = set.resizable;
func.data.boundingSphere = set.initBoundingSphere;

if (set.is_damping != undefined) func.data.is_damping = set.is_damping;

func.data.persp_cam_angle_xy = set.cam_angle[0];
func.data.persp_cam_angle_xz = set.cam_angle[1];

func.data.win_width = jQuery(`#${func.data.selector}`).width();
func.data.win_height = jQuery(`#${func.data.selector}`).height();

func.data.renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
logarithmicDepthBuffer: false,//true
powerPreference: 'high-performance',
precision: 'highp',
});

func.data.autoClear = true;//true
func.data.renderer.setPixelRatio(window.devicePixelRatio);
func.data.renderer.physicallyCorrectLights = true;
func.data.renderer.outputEncoding = THREE.sRGBEncoding;
func.data.renderer.sortObjects = true;
func.data.renderer.shadowMap.enabled = true;
func.data.renderer.shadowMap.type = THREE.PCFSoftShadowMap; //
func.data.renderer.shadowMap.autoUpdate = false;
func.data.renderer.setSize(func.data.win_width, func.data.win_height);
func.data.renderer.domElement.classList.add(`${func.data.selector}-visualizer`);

//
let canvasContainer = document.getElementById(func.data.selector);
if (canvasContainer.querySelector(`.${func.data.selector}-visualizer`)) {

canvasContainer.querySelector(`.${func.data.selector}-visualizer`).remove();

}

document.getElementById(func.data.selector).appendChild(func.data.renderer.domElement);

func.data.scene = new THREE.Scene();
func.ambientLight = new THREE.AmbientLight(0xffffff, 1.5);//3
func.data.scene.add(func.ambientLight);
func.data.renderer.setClearColor(set.background_color[0], set.background_color[1]);

if (set.light_type[0] == "HemisphereLight") {
let hemiSphere = new THREE.HemisphereLight(set.light_type[1], set.light_type[2], set.light_type[3]);
}
else if (set.light_type[0] == "AmbientLight") {
let ambientLight = new THREE.AmbientLight(set.light_type[1], set.light_type[2]);
}

if (func.data.renderer.domElement.classList.contains(`${func.data.selector}-visualizer`) && !func.data.renderer.domElement.classList.contains('three-win-axis-visualizer') && !func.data.renderer.domElement.classList.contains('three-win-side-axis-visualizer') && typeof ThreePerf == 'function') {
func.perf = new ThreePerf({
showGraph: true,
anchorX: 'right',
anchorY: 'top',
domElement: $(`#${func.data.selector}`).get(0), // or other canvas rendering wrapper
renderer: func.data.renderer, // three js renderer instance you use for rendering
scale: 1,
guiVisible: false,
actionToCallUI: "gui"
});
var isPerfVisiblity = localStorage.getItem(`${func.data.selector}-PerfomanceTableVisible`);
if (isPerfVisiblity != 'false' && isPerfVisiblity != null)
$(`#${func.data.selector}`).find('#three-perf-ui').removeClass('d-none');
else
$(`#${func.data.selector}`).find('#three-perf-ui').addClass('d-none');
}
func.data.camera = createPerspectiveCamera()
func.data.controls = new THREE.OrbitControls(func.data.camera, func.data.renderer.domElement);
// 1. Creating EffectComposer іand save it in func.data
func.data.composer = new THREE.EffectComposer(func.data.renderer);
func.data.composer.setSize(func.data.win_width, func.data.win_height);
// 2. Add RenderPass (main scene render)
const renderPass = new THREE.RenderPass(func.data.scene, func.data.camera);
//renderPass.clear = true;
func.data.composer.addPass(renderPass);
// 3. Create and setup SSAOPass
const ssaoPass = new THREE.SSAOPass(
func.data.scene,
func.data.camera,
func.data.win_width,
func.data.win_height
);
ssaoPass.kernelRadius = 10; // Effect raduis. Try values from 8 to 32
ssaoPass.minDistance = 0.005; // Min distance for effect
ssaoPass.maxDistance = 0.1; // Max distance
func.data.composer.addPass(ssaoPass);

//// 4. Add GammaCorrection for right visibility of colors
const gammaPass = new THREE.ShaderPass(THREE.GammaCorrectionShader);
//gammaPass.clear = false;
gammaPass.renderToScreen = true;
func.data.composer.addPass(gammaPass);

//var copyPass = new THREE.ShaderPass(THREE.CopyShader);
//copyPass.renderToScreen = true;
//func.data.composer.addPass(copyPass);

// --- End implement SSAO ---

func.addOrbitEvents(func.data.controls);
if (func.data.is_damping) func.controlDamping();
func.data.controls.addEventListener('change', requestRenderIfNotRequested);

if (!set.is_isometric) func.initPerspectiveCamera('ortho');
else func.initIsometricCamera('ortho');

if (func.data.resizable) {

window.addEventListener('resize', func.onWindowResize);
window.addEventListener('resize', func.controlFunc);
}

boundingBoxConst = func.data.boundingSphere.radius;
};
and here is my render function
function requestRenderIfNotRequested() {
if (!func.data.renderRequested) {
func.data.renderRequested = true;
requestAnimationFrame(render);
}
};

function render() {
//requestAnimationFrame(render);

func.data.renderRequested = false;

if (func.data.timeout !== null) clearTimeout(func.data.timeout);
func.data.timeout = setTimeout(function () {
func.controlFuncEnd();
}, 100);
//func.data.controls.update();

// Check if controls zoomIn/Out
let controls = func.data.controls;
let camera = func.data.camera;
let lastZoom = camera.zoom;
let newDistance = camera.position.distanceTo(controls.target);
let epsilon = 0.0001;

func.isZoomingIn = false;
func.isZoomingOut = false;

if (camera.isPerspectiveCamera) {
if (Math.abs(newDistance - lastDistance) > epsilon && visualizer) {
func.isZoomingIn = newDistance < lastDistance;
func.isZoomingOut = newDistance > lastDistance;
}
lastDistance = newDistance;
}

if (camera.isOrthographicCamera) {
if (Math.abs(camera.zoom - lastZoom) > epsilon && visualizer) {
func.isZoomingIn = camera.zoom > lastZoom;
func.isZoomingOut = camera.zoom < lastZoom;
}
lastZoom = camera.zoom;
}

func.isZoomingInOut = func.isZoomingIn || func.isZoomingOut;

func.data.controls.update();

if (clippingMovePlaneState && clippingMovePlaneState()) {
func.updateClippingPlane();
updateLableSizes();
}

if (func.data.renderer.domElement.classList.contains(`${func.data.selector}-visualizer`) && !func.data.renderer.domElement.classList.contains('three-win-axis-visualizer') && !func.data.renderer.domElement.classList.contains('three-win-side-axis-visualizer') && typeof ThreePerf == 'function')
func.perf.begin();

//func.data.renderer.render(func.data.scene, func.data.camera);
//if (func.data.composer) {
func.data.composer.render();
//} else {
// //if composer is not initted
// func.data.renderer.render(func.data.scene, func.data.camera);
//}

if (func.data.renderer.domElement.classList.contains(`${func.data.selector}-visualizer`) && !func.data.renderer.domElement.classList.contains('three-win-axis-visualizer') && !func.data.renderer.domElement.classList.contains('three-win-side-axis-visualizer') && typeof ThreePerf == 'function')
func.perf.end();

func.controlFunc();
func.controlFuncStart();
if (visualizer && (visualizer.toolIsActive('pick') || visualizer.toolIsActive('measure') || (visualizer.positionAssemblyManager && visualizer.positionAssemblyManager.mode == 'order')) && !func.data.isRotating) {
if (func.isZoomingInOut) return;
func.controlFuncEnd();
}
};
< /code>
Я также Cube Gismo, который использует эту функцию, чтобы инициировать и удалить ее, он хочет помочь.
также попытался добавить rendertoscreen к последнему проходу композитора. Мне ничего не помогло!

Подробнее здесь: https://stackoverflow.com/questions/797 ... o-composer