For some reason, if I take the SSAO code from the official Threejs examples page, I place it in a Vite project, it doesn’t work. It seems to make the screen darker, that’s about it.
Even if I use importmaps and place the example code in a script tag, so long as vite is being used to host, the code will render but there will be no SSAO effect applied.
If it helps, I get these warnings in the console when running in vite environment:
Original example:
My code from example (it’s the same code, but in case it’s needed):
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/"
}
}
</script>
<script type="module">
import { EffectComposer, OutputPass, RenderPass, SSAOPass } from 'three/examples/jsm/Addons.js';
import * as THREE from 'three';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
console.log('loading:',)
let container, stats;
let camera, scene, renderer;
let composer;
let group;
function init() {
container = document.createElement('div');
document.body.appendChild(container);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animate);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 100, 700);
camera.position.z = 500;
scene = new THREE.Scene();
scene.background = new THREE.Color(0xaaaaaa);
scene.add(new THREE.DirectionalLight(0xffffff, 4));
scene.add(new THREE.AmbientLight(0xffffff));
group = new THREE.Group();
scene.add(group);
const geometry = new THREE.BoxGeometry(10, 10, 10);
const material = new THREE.MeshLambertMaterial();
const mesh = new THREE.InstancedMesh(geometry, material, 100);
const dummy = new THREE.Object3D();
const color = new THREE.Color();
for (let i = 0; i < 100; i++) {
dummy.position.x = Math.random() * 400 - 200;
dummy.position.y = Math.random() * 400 - 200;
dummy.position.z = Math.random() * 400 - 200;
dummy.rotation.x = Math.random();
dummy.rotation.y = Math.random();
dummy.rotation.z = Math.random();
dummy.scale.setScalar(Math.random() * 10 + 2);
dummy.updateMatrix();
mesh.setMatrixAt(i, dummy.matrix);
color.setHex(Math.random() * 0xffffff);
mesh.setColorAt(i, color);
}
group.add(mesh);
// stats = new Stats();
// container.appendChild(stats.dom);
const width = window.innerWidth;
const height = window.innerHeight;
composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
const ssaoPass = new SSAOPass(scene, camera, width, height);
composer.addPass(ssaoPass);
console.log('ssao:', ssaoPass);
const outputPass = new OutputPass();
composer.addPass(outputPass);
// Init gui
const gui = new GUI();
gui.add(ssaoPass, 'output', {
'Default': SSAOPass.OUTPUT.Default,
'SSAO Only': SSAOPass.OUTPUT.SSAO,
'SSAO Only + Blur': SSAOPass.OUTPUT.Blur,
'Depth': SSAOPass.OUTPUT.Depth,
'Normal': SSAOPass.OUTPUT.Normal
}).onChange(function (value) {
ssaoPass.output = value;
});
gui.add(ssaoPass, 'kernelRadius').min(0).max(32);
gui.add(ssaoPass, 'minDistance').min(0.001).max(0.02);
gui.add(ssaoPass, 'maxDistance').min(0.01).max(0.3);
gui.add(ssaoPass, 'enabled');
onWindowResize();
window.addEventListener('resize', onWindowResize);
}
init();
function onWindowResize() {
const width = window.innerWidth;
const height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
composer.setSize(width, height);
}
function animate() {
// stats.begin();
render();
// stats.end();
}
function render() {
const timer = performance.now();
group.rotation.x = timer * 0.0002;
group.rotation.y = timer * 0.0001;
composer.render();
}
</script>
Vite version: 5.1.4
threejs version: 0.184.0
Any help would be much appreciated.
… from my understanding (I could be wrong) )