Ecosort-3D REcycling Animation

// Three.js көмегімен 3 кезеңді зауыттың 3D сценасы
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0f172a);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Жарықтандыру
const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
scene.add(ambientLight);
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(10, 20, 10);
scene.add(dirLight);

// 1-этап: Шредер мен труба цехы (Көк түс)
const m1Geo = new THREE.BoxGeometry(2, 3, 2);
const m1Mat = new THREE.MeshStandardMaterial({ color: 0x3b82f6 });
const stage1 = new THREE.Mesh(m1Geo, m1Mat);
stage1.position.set(-6, 1.5, 0);
scene.add(stage1);

// 2-этап: Пластик турау және оқу құралдары цехы (Жасыл түс)
const m2Geo = new THREE.BoxGeometry(2, 2, 2);
const m2Mat = new THREE.MeshStandardMaterial({ color: 0x10b981 });
const stage2 = new THREE.Mesh(m2Geo, m2Mat);
stage2.position.set(-2, 1, 0);
scene.add(stage2);

// 3-этап: Биогаз және жылу пеші (Қызғылт сары түс)
const furnaceGeo = new THREE.CylinderGeometry(1.5, 1.5, 3, 32);
const furnaceMat = new THREE.MeshStandardMaterial({ color: 0xf97316 });
const furnace = new THREE.Mesh(furnaceGeo, furnaceMat);
furnace.position.set(2, 1.5, 0);
scene.add(furnace);

// Карбонсыз Скруббер және таза ауа шығару модулі (Көгілдір түс)
const scrubberGeo = new THREE.CylinderGeometry(1, 1, 4, 32);
const scrubberMat = new THREE.MeshStandardMaterial({ color: 0x06b6d4 });
const scrubber = new THREE.Mesh(scrubberGeo, scrubberMat);
scrubber.position.set(6, 2, 0);
scene.add(scrubber);

camera.position.set(0, 6, 14);
camera.lookAt(0, 1, 0);

// Анимация циклі
function animate() {
requestAnimationFrame(animate);

// Пеш мен скруббердің жұмыс істеп тұрғанын көрсету үшін жеңіл айналдыру
furnace.rotation.y += 0.01;
scrubber.rotation.y -= 0.005;

renderer.render(scene, camera);

}
animate();

Hi Zhansaya,

We can turn this scene into a clear animation of the recycling process. Here is how we would build it:

  • One continuous line: waste items (bottles, bags, pieces of plastic) move on a conveyor through all four stages, so the viewer sees what happens to the material at each step.
  • Stage 1, shredder: rotating blades, items going in whole and coming out as flakes into the pipe workshop.
  • Stage 2, plastic cutting: flakes pressed into sheets and cut into simple educational items.
  • Stage 3, biogas furnace: a glowing flame, heat shown as a soft pulse, and a pipe carrying the heat out.
  • Stage 4, scrubber: dark smoke goes in, clean air comes out (particles that change colour).
  • Presentation: a guided camera tour (stage by stage), then free rotate and zoom; labels and short captions in Kazakh, Russian or English; a play / pause button; works on phones and a projector.

Plain three.js, no heavy model files, so it opens fast in any browser. You get the source code and a link you can show.

Examples of our three.js work:

Offer: $250 fixed, 5 working days, first version for your review in 2 days, two rounds of changes included. If you only need your current scene animated (no new models), $150.

Two questions: is this for a presentation, a website or a school or university project? And do you have a deadline?

По-русски: можем сделать из вашей сцены понятную анимацию всего процесса переработки: конвейер через 4 этапа, работающий шредер, печь, скруббер с очисткой воздуха, облёт камерой и подписи на казахском, русском или английском. Цена 250 $, срок 5 рабочих дней, первая версия через 2 дня. Можно писать по-русски.

Maxim Yaroshenko · estudio MY

Бастапқы кодтағы қате

animate() функциясының ішіне Markdown белгілері (```javascript) кіріп кеткен. Оларды алып тастау керек.

Негізгі түзетілген функция:

function animate() {
requestAnimationFrame(animate);

furnace.rotation.y += 0.01;
scrubber.rotation.y -= 0.005;

renderer.render(scene, camera);
}

animate();

2026-10-23_14-10-51