# Performance of 3D Configurator

**URL:** <https://discourse.threejs.org/t/performance-of-3d-configurator/16038>\
**Category:** Questions\
**Tags:** performance\
**Created:** [June 9, 2020, 1:26pm UTC](https://discourse.threejs.org/t/performance-of-3d-configurator/16038 "2020-06-09T13:26:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![erikherbert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/erikherbert/32/8274_2.png) [@erikherbert](https://discourse.threejs.org/u/erikherbert)\
**Post date:** [June 9, 2020, 1:26pm UTC](https://discourse.threejs.org/t/performance-of-3d-configurator/16038/1 "2020-06-09T13:26:32Z")

</div>

Working on a 3D Shop.

My PC ventilation runs like a hamster at speed. You might think a Harrier is starting.  
But thats not only if i am interacting with the scene also when its still a freezed image.

Is there something i missed? Is there any great bug in the renderer settings or the render() function that can optimize performance?

```
// ****************************
// 3D Renderer
// ****************************    

const renderer = new THREE.WebGLRenderer( { alpha: true } );
document.body.appendChild(renderer.domElement);
renderer.setSize(window.innerWidth, window.innerHeight);

renderer.physicallyCorrectLights = true;
renderer.outputEncoding = THREE.sRGBEncoding;

if (window.devicePixelRatio > 2){
	renderer.setPixelRatio(2);
} else {
	renderer.setPixelRatio(window.devicePixelRatio);
}

renderer.setClearColor( 0x000000, 0 );
renderer.antialias = true;
renderer.preserveDrawingBuffer = false;
renderer.powerPreference = "high-performance";
renderer.precision = "highp";
renderer.shadowMap.enabled = true;
renderer.shadowMap.autoUpdate = true;
renderer.shadowMap.needsUpdate = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.shadowMapSoft = true;

// ****************************
// Szene rendern/erstellen
// ****************************

function animate() {
	requestAnimationFrame(animate);
	TWEEN.update();
}

function render() {
	raycaster.setFromCamera( mouse, camera );
	renderer.render(scene, camera);
	requestAnimationFrame(render);
	camera.lookAt( cameraTarget.position );
	composer.render();
	renderer.shadowMap.autoUpdate = false;
	renderer.shadowMap.needsUpdate = true;
}

render();
controls.update();
```

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [June 9, 2020, 1:33pm UTC](https://discourse.threejs.org/t/performance-of-3d-configurator/16038/2 "2020-06-09T13:33:40Z")

</div>

> [@Fans blowing up, high CPU usage?](https://discourse.threejs.org/t/fans-blowing-up-high-cpu-usage/15949):
>
> Hi everyone, I’m having a lot of trouble trying to finalise my website but for some reason it always causes the fans of my laptop to turn up after running it for a bit (fans don’t turn up straight away but happens after a minute or two). I’m new to three.js and I’m not sure my code is great… It would be great to know if it’s something I’ve done in my three.js code that’s causing the problem or if it’s my other code… In my scene I have imported a glb scene(hand model with skeleton) and I’ve als…

These may help?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 9, 2020, 1:39pm UTC](https://discourse.threejs.org/t/performance-of-3d-configurator/16038/3 "2020-06-09T13:39:54Z")

</div>

It seems to me you perform the beauty pass twice. You call:

```auto
renderer.render(scene, camera);

```

and then call

```auto
composer.render();

```

a few lines later. That does not look right to me since your composer is configured with an instance of `RenderPass`. Try to use only `composer.render();`.