Cartoon #43
Description
<!doctype html>
<title>Mini 3D Cartoon (Three.js)</title> <style>body{margin:0;background:#87ceeb}canvas{display:block}</style> <script src="https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.158.0/examples/js/controls/OrbitControls.js"></script> <script> const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(50, innerWidth/innerHeight, 0.1, 100); camera.position.set(0, 1.6, 4); const renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.target.set(0,1,0); // Simple directional light and ambient const dir = new THREE.DirectionalLight(0xffffff, 0.9); dir.position.set(5,10,7); scene.add(dir); scene.add(new THREE.AmbientLight(0xffffff, 0.35)); // Gradient / ramp texture for toon steps (optional, but Three's MeshToonMaterial // can produce a cartoon-like look without custom map) function toonMaterial(color) { return new THREE.MeshToonMaterial({color: color, flatShading: true}); } // Build a very simple stylized character const character = new THREE.Group(); // Head const headGeo = new THREE.SphereGeometry(0.6, 32, 32); const headMat = toonMaterial(0xffe0bd); const head = new THREE.Mesh(headGeo, headMat); head.position.y = 1.6; character.add(head); // Eyes (simple) const eyeGeo = new THREE.SphereGeometry(0.08, 8, 8); const leftEye = new THREE.Mesh(eyeGeo, toonMaterial(0x000000)); const rightEye = leftEye.clone(); leftEye.position.set(-0.18, 1.65, 0.53); rightEye.position.set(0.18, 1.65, 0.53); character.add(leftEye, rightEye); // Body const bodyGeo = new THREE.BoxGeometry(0.7, 0.9, 0.4); const bodyMat = toonMaterial(0x2a9d8f); const body = new THREE.Mesh(bodyGeo, bodyMat); body.position.y = 0.8; character.add(body); // Arms const armGeo = new THREE.BoxGeometry(0.18, 0.7, 0.18); const leftArm = new THREE.Mesh(armGeo, toonMaterial(0xffe0bd)); const rightArm = leftArm.clone(); leftArm.position.set(-0.55, 0.95, 0); rightArm.position.set(0.55, 0.95, 0); character.add(leftArm, rightArm); // Legs const legGeo = new THREE.BoxGeometry(0.22, 0.8, 0.22); const leftLeg = new THREE.Mesh(legGeo, toonMaterial(0x264653)); const rightLeg = leftLeg.clone(); leftLeg.position.set(-0.17, 0.0, 0); rightLeg.position.set(0.17, 0.0, 0); character.add(leftLeg, rightLeg); scene.add(character); // Simple outline by rendering a slightly scaled black mesh behind each visible mesh // (cheap outline effect) function addOutline(mesh) { const outlineMat = new THREE.MeshBasicMaterial({color:0x000000, side: THREE.BackSide}); const outline = new THREE.Mesh(mesh.geometry.clone(), outlineMat); outline.scale.multiplyScalar(1.03); outline.position.copy(mesh.position); outline.rotation.copy(mesh.rotation); mesh.add(outline); } [head, body, leftArm, rightArm, leftLeg, rightLeg].forEach(addOutline); // Ground const ground = new THREE.Mesh(new THREE.PlaneGeometry(10,10), new THREE.MeshToonMaterial({color:0xffffff})); ground.rotation.x = -Math.PI/2; ground.position.y = -0.4; scene.add(ground); // Animation (simple bob and arm swing) const clock = new THREE.Clock(); function animate(){ const t = clock.getElapsedTime(); character.rotation.y = Math.sin(t*0.4) * 0.08; head.rotation.y = Math.sin(t*0.9) * 0.08; leftArm.rotation.x = Math.sin(t*3) * 0.6 - 0.2; rightArm.rotation.x = Math.sin(t*3 + Math.PI) * 0.6 - 0.2; renderer.render(scene, camera); requestAnimationFrame(animate); } animate(); // Responsive addEventListener('resize', ()=> { camera.aspect = innerWidth/innerHeight; camera.updateProjectionMatrix(); renderer.setSize(innerWidth, innerHeight); }); </script>