<!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>