I installed the latest version of three.js (r173) and now encounter an error when importing modules from the examples. When I connect using the following import:

JAVASCRIPTCopied
import { EffectComposer } from ‘./three/examples/jsm/postprocessing/EffectComposer.js’;

I get the error:

ShaderPass.js:3 Uncaught SyntaxError: The requested module ‘three’ does not provide an export named ‘UniformsUtils’ (at ShaderPass.js:3:2)

Below is the relevant code that reproduces the issue:

JAVASCRIPTCopied
import * as THREE from ‘three’;  
import { float, vec3, color, viewportSharedTexture, hue, blendOverlay, posterize, grayscale, saturation, viewportSafeUV, screenUV, checker, uv, time, oscSine, output } from ‘three/tsl’;  
import { OrbitControls } from ‘./three/examples/jsm/controls/OrbitControls.js’;  
import { GLTFLoader } from ‘./three/examples/jsm/loaders/GLTFLoader.js’;  
import { FontLoader } from ‘./three/examples/jsm/loaders/FontLoader.js’;  
import { TextGeometry } from ‘./three/examples/jsm/geometries/TextGeometry.js’;  
// import { EffectComposer } from ‘./three/addons/postprocessing/EffectComposer.js’;  
import { EffectComposer } from ‘./three/examples/jsm/postprocessing/EffectComposer.js’;  
// import { ShaderPass } from ‘./three/examples/jsm/postprocessing/ShaderPass.js’;  
// import { EffectComposer } from ‘<https://cdn.jsdelivr.net/npm/three@0.130.0/examples/jsm/postprocessing/EffectComposer.js>’;

And later in the code:

JAVASCRIPTCopied
const pixelRatio = window.devicePixelRatio || 1;

let camera, scene, renderer;  
let portals, rotate = true;  
let mixer, clock;

// Parameters for camera rotation
let isRecording = false; 
let rotationAngle = 0; 
const rotationSpeed = 0.01; 
const totalRotations = 2 * Math.PI; 
const radius = 45; 
const initialCameraPosition = new THREE.Vector3(27, 0.3, radius);

init();

function init() {  
var container3d = document.querySelector(‘.container3d’);

```javascript
while (container3d.firstChild) {
    container3d.removeChild(container3d.firstChild);
}

var w = container3d.offsetWidth;
var h = container3d.offsetHeight;

renderer = new THREE.WebGPURenderer({ antialias: true });
rend3er.domElement.id = "canvasfirst";
rend3er.domElement.classList.add("canvasfirst");
const canvas = renderer.domElement;
container3d.appendChild(renderer.domElement);
renderer.setSize(w * pixelRatio, h * pixelRatio, false);
renderer.shadowMap.enabled = true;
renderer.setClearColor(0x000000, 1);
renderer.setAnimationLoop(animate);
renderer.toneMapping = THREE.NeutralToneMapping;
renderer.toneMappingExposure = 0.3;

scene = new THREE.Scene();
clock = new THREE.Clock();
scene.backgroundNode = screenUV.y.mix(color(0x66bbff), color(0x4466ff));

// Create an orthographic camera
const aspect = w / h;
const frustumSize = 20; 
const left = -frustumSize * aspect / 2;
const right = frustumSize * aspect / 2;
const top = frustumSize / 2;
const bottom = -frustumSize / 2;
const near = 0.1;
const far = 1400;

camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
camera.position.copy(initialCameraPosition);
camera.lookAt(scene.position);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 1, 0);
controls.addEventListener('start', () => rotate = false);
controls.addEventListener('end', () => rotate = true);
controls.update();

// Lighting
const light = new THREE.SpotLight(0xffffff, 1);
light.power = 2000;
camera.add(light);
scene.add(camera);

// Portals
const geometry = new THREE.SphereGeometry(.3, 32, 16);

portals = new THREE.Group();
scene.add(portals);

function addBackdropSphere(backdropNode, backdropAlphaNode = null) {
    const distance = 1;
    const id = portals.children.length;
    const rotation = THREE.MathUtils.degToRad(id * 45);

    const material = new THREE.MeshStandardNodeMaterial({ color: 0x0066ff });
    material.roughnessNode = float(.2);
    material.metalnessNode = float(0);
    material.backdropNode = backdropNode;
    material.backdropAlphaNode = backdropAlphaNode;
    material.transparent = true;

    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(
        Math.cos(rotation) * distance,
        1,
        Math.sin(rotation) * distance
    );

    portals.add(mesh);
}

addBackdropSphere(hue(viewportSharedTexture().bgr, oscSine().mul(Math.PI)));
addBackdropSphere(viewportSharedTexture().rgb.oneMinus());
addBackdropSphere(grayscale(viewportSharedTexture().rgb));
addBackdropSphere(saturation(viewportSharedTexture().rgb, 10), oscSine());
addBackdropSphere(blendOverlay(viewportSharedTexture().rgb, checker(uv().mul(10))));
addBackdropSphere(viewportSharedTexture(viewportSafeUV(screenUV.mul(40).floor().div(40))));
addBackdropSphere(viewportSharedTexture(viewportSafeUV(screenUV.mul(80).floor().div(80))).add(color(0x0033ff)));
addBackdropSphere(vec3(0, 0, viewportSharedTexture().b));

}

JAVASCRIPTCopied
import { REVISION } from ‘three’;  
console.log(`Three.js version: r${REVISION}`);

const fontLoader = new FontLoader();  
const textContainer = document.getElementById(‘textContainer’);  
textContainer.addEventListener(‘input’, updateScene);

const webGroup = new THREE.Group();  
webGroup.position.set(0, -6, 0);  
scene.add(webGroup);

const wordConfigs = [  
{ font: ‘fonts/Sissi Display_Regular (1).json’, size: 10, position: { x: -5, y: 0 }, direction: ‘horizontal’, letterSpacing: 0.3, rotationZ: 14, rotationX: 15, rotationY: 0, materialType: ‘envMap’ },  
{ font: ‘fonts/Sissi Display_Regular (1).json’, size: 3, position: { x: -5, y: 0 }, direction: ‘horizontal’, letterSpacing: 0.3, rotationZ: 145, rotationX: 0, rotationY: 0, materialType: ‘envMap’ },  
{ font: ‘fonts/PT Astra Sans_Bold.json’, size: 5, position: { x: -2, y: 14 }, direction: ‘horizontal’, letterSpacing: 0.3, rotationZ: -90, rotationX: 0, rotationY: 0, materialType: ‘envMap’ },  
{ font: ‘fonts/Nothing You Could Do_Regular.json’, size: 7, position: { x: 9, y: 7 }, direction: ‘horizontal’, letterSpacing: 0.3, rotationZ: 90, rotationX: 0, rotationY: 0, materialType: ‘envMap’ },  
{ font: ‘fonts/Niconne_Regular.json’, size: 7, position: { x: 5, y: 9 }, direction: ‘horizontal’, letterSpacing: 0.3, rotationZ: 90, rotationX: 0, rotationY: 0, materialType: ‘envMap’ }  
];

function updateScene() {  
const newText = textContainer.textContent;

```javascript
// Remove old text
removeText(webGroup);

// Add new text
const words = newText.split('*').filter(word => word.trim() !== '');

words.forEach((word, index) => {
    fontLoader.load(wordConfigs[index]?.font || 'fonts/IBMPlexSans-Regular.json', font => {
        const charsWeb = word.split('');
        let xOffset = 0;
        let yOffset = 0;

        const wordGroup = new THREE.Group();
        wordGroup.position.set(
            wordConfigs[index]?.position?.x || 0,
            wordConfigs[index]?.position?.y || 0,
            0
        );

        // Convert degrees to radians for rotation
        wordGroup.rotation.z = (wordConfigs[index]?.rotationZ || 0) * (Math.PI / 180);
        wordGroup.rotation.x = (wordConfigs[index]?.rotationX || 0) * (Math.PI / 180);
        wordGroup.rotation.y = (wordConfigs[index]?.rotationY || 0) * (Math.PI / 180);

        webGroup.add(wordGroup);

        charsWeb.forEach((char, charIndex) => {
            const charGeometry = new TextGeometry(char, {
                font: font,
                size: wordConfigs[index]?.size || 3.5,
                depth: 0.5, // Use depth instead of height
                curveSegments: 250,
                bevelEnabled: true,
                bevelThickness: 0.5,
                bevelSize: 0.1,
                bevelSegments: 1,
            });

            let charMaterial;
            if (wordConfigs[index]?.materialType === 'envMap') {
                // Material with envMapTexture
                charMaterial = new THREE.MeshPhysicalMaterial({
                    roughness: 0.03,
                    metalness: 1.0,
                    envMap: envMapTexture,
                    envMapIntensity: 1.5,
                    flatShading: true
                });
            } else if (wordConfigs[index]?.materialType === 'physical') {
                // Alternative physical material
                charMaterial = new THREE.MeshPhysicalMaterial({
                    color: 0xBC2649,
                    roughness: 0.5,
                    metalness: 0.5,
                    clearcoat: 1.0,
                    clearcoatRoughness: 0.1
                });
            } else if (wordConfigs[index]?.materialType === 'physical2') {
                // Another physical material variant
                charMaterial = new THREE.MeshPhysicalMaterial({
                    color: 0x1137C6,
                    roughness: 0.5,
                    metalness: 0.5,
                    clearcoat: 1.0,
                    clearcoatRoughness: 0.1
                });
            }

            const charMesh = new THREE.Mesh(charGeometry, charMaterial);
            charMesh.castShadow = true;

            charGeometry.computeBoundingBox();
            charMesh.position.set(xOffset, yOffset, -2);

            if (wordConfigs[index]?.direction === 'vertical') {
                yOffset -= charGeometry.boundingBox.max.y - charGeometry.boundingBox.min.y;
                yOffset -= wordConfigs[index]?.letterSpacing || 0;
            } else {
                xOffset += charGeometry.boundingBox.max.x - charGeometry.boundingBox.min.x;
                xOffset += wordConfigs[index]?.letterSpacing || 0;
            }

            wordGroup.add(charMesh);
        });
    });
});

}

function removeText(group) {
while (group.children.length > 0) {
const child = group.children[0];
group.remove(child);
child.geometry.dispose();
child.material.dispose();
}
}

// Initial call
updateScene();

const textureLoader = new THREE.TextureLoader();
const envMapTexture = textureLoader.load(‘models/texture3.jpg’);
envMapTexture.mapping = THREE.EquirectangularReflectionMapping;

function onContainerResize() {
const canvas = renderer.domElement;
const container = canvas.parentNode;
const width = container.offsetWidth * pixelRatio;
const height = container.offsetHeight * pixelRatio;
canvas.style.width = (width / pixelRatio) + “px”;
canvas.style.height = (height / pixelRatio) + “px”;
renderer.setSize(width, height, false);
camera.aspect = width / height;
camera.updateProjectionMatrix();
}

window.addEventListener(“resize”, onContainerResize);
onContainerResize();

function animate() {
const delta = clock.getDelta();

JAVASCRIPTCopied
if (mixer) mixer.update(delta);

if (rotate) {
    portals.rotation.y += delta * 0.5;

    // Camera rotation
    rotationAngle += rotationSpeed * delta;
    if (rotationAngle >= totalRotations) {
        rotationAngle -= totalRotations;
    }

    const x = Math.cos(rotationAngle) * radius;
    const z = Math.sin(rotationAngle) * radius;
    camera.position.set(x, initialCameraPosition.y, z);
    camera.lookAt(scene.position);
}

renderer.render(scene, camera);

}