<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Machine</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> </head> <body style="margin:0"> <script> let scene = new THREE.Scene(); let camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); let renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // light scene.add(new THREE.AmbientLight(0xffffff, 1)); // base let base = new THREE.Mesh( new THREE.BoxGeometry(400,10,200), new THREE.MeshBasicMaterial({color:0x888888}) ); scene.add(base); // motor let motor = new THREE.Mesh( new THREE.CylinderGeometry(20,20,50), new THREE.MeshBasicMaterial({color:0x000000}) ); motor.rotation.x = Math.PI/2; motor.position.set(-120,35,0); scene.add(motor); // crank let crank = new THREE.Mesh( new THREE.CylinderGeometry(15,15,10), new THREE.MeshBasicMaterial({color:0x333333}) ); crank.rotation.x = Math.PI/2; crank.position.set(-90,35,0); scene.add(crank); // piston let piston = new THREE.Mesh( new THREE.CylinderGeometry(4,4,120), new THREE.MeshBasicMaterial({color:0xff0000}) ); piston.rotation.z = Math.PI/2; piston.position.set(-20,35,0); scene.add(piston); // chamber let chamber = new THREE.Mesh( new THREE.CylinderGeometry(10,10,80), new THREE.MeshBasicMaterial({color:0x444444}) ); chamber.rotation.z = Math.PI/2; chamber.position.set(40,35,0); scene.add(chamber); // nozzle let nozzle = new THREE.Mesh( new THREE.CylinderGeometry(4,4,50), new THREE.MeshBasicMaterial({color:0xffffff}) ); nozzle.rotation.z = Math.PI/2; nozzle.position.set(100,35,0); scene.add(nozzle); // hopper let hopper = new THREE.Mesh( new THREE.ConeGeometry(70,120,4), new THREE.MeshBasicMaterial({color:0x0000ff, wireframe:true}) ); hopper.position.set(40,100,0); scene.add(hopper); camera.position.set(200,150,300); let angle = 0; function animate(){ requestAnimationFrame(animate); angle += 0.05; // crank rotation crank.rotation.z = angle; // piston move piston.position.x = -20 + Math.sin(angle)*30; renderer.render(scene, camera); } animate(); </script> </body> 1. * - [ ] - [ ] - [ ] </html>