Help, please, I installed the latest version of three.js Three.js version: r173
When connected
import { EffectComposer } from ‘./three/examples/jsm/postprocessing/EffectComposer.js’;
An error occurs…
ShaderPass.js:3 Uncaught SyntaxError: The requested module ‘three’ does not provide an export named ‘UniformsUtils’ (at ShaderPass.js:3:2)
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’;
const pixelRatio = window.devicePixelRatio || 1;
let camera, scene, renderer;
let portals, rotate = true;
let mixer, clock;
// Параметры для вращения камеры
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’);
while (container3d.firstChild) {
container3d.removeChild(container3d.firstChild);
}
var w = container3d.offsetWidth;
var h = container3d.offsetHeight;
renderer = new THREE.WebGPURenderer({ antialias: true });
renderer.domElement.id = "canvasfirst";
renderer.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));
// Создаем ортографическую камеру
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();
// Освещение
const light = new THREE.SpotLight(0xffffff, 1);
light.power = 2000;
camera.add(light);
scene.add(camera);
// Порталы
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));
}
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;
// Удаляем старый текст
removeText(webGroup);
// Добавляем новый текст
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
);
// Преобразуем градусы в радианы для поворота
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, // Используйте depth вместо height
curveSegments: 250,
bevelEnabled: true,
bevelThickness: 0.5,
bevelSize: 0.1,
bevelSegments: 1,
});
let charMaterial;
if (wordConfigs[index]?.materialType === 'envMap') {
// Материал с envMapTexture
charMaterial = new THREE.MeshPhysicalMaterial({
roughness: 0.03,
metalness: 1.0,
envMap: envMapTexture,
envMapIntensity: 1.5,
flatShading: true
});
} else if (wordConfigs[index]?.materialType === 'physical') {
// Другой физический материал
charMaterial = new THREE.MeshPhysicalMaterial({
color: 0xBC2649, // Красный цвет
roughness: 0.5,
metalness: 0.5,
clearcoat: 1.0,
clearcoatRoughness: 0.1
});
} else if (wordConfigs[index]?.materialType === 'physical2') {
// Другой физический материал
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
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();
if (mixer) mixer.update(delta);
if (rotate) {
portals.rotation.y += delta * 0.5;
// Вращение камеры
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);
}