🎮ArcadeLab

OC 猫猫 · 3D 预览（最终修正版）

by TurboKoala83
474 lines14.6 KB🛠️ Three.js (3D graphics)
▶ Play
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>OC 猫猫 · 3D 预览（最终修正版）</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{width:100%;height:100%;overflow:hidden;background:#2a3240;
    font-family:-apple-system,"PingFang SC",sans-serif;
    -webkit-user-select:none;user-select:none;
    -webkit-tap-highlight-color:transparent;touch-action:none;}
  #c{display:block;width:100%;height:100%;}
  #hint{position:fixed;left:0;right:0;bottom:26px;text-align:center;
    color:rgba(255,255,255,.4);font-size:12px;letter-spacing:2px;
    pointer-events:none;}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hint">拖动旋转 · 双指缩放</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
(function(){
'use strict';

/* ================= 渲染器 / 场景 / 相机 ================= */
const canvas = document.getElementById('c');
const renderer = new THREE.WebGLRenderer({canvas, antialias:true});
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.setSize(innerWidth, innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x2a3240);

const camera = new THREE.PerspectiveCamera(40, innerWidth/innerHeight, 0.1, 100);

/* ================= 灯光 ================= */
scene.add(new THREE.HemisphereLight(0xdfeaff, 0x2a2a30, 1.0));

const key = new THREE.DirectionalLight(0xfff0d8, 1.1);
key.position.set(4, 8, 5);
key.castShadow = true;
key.shadow.mapSize.set(1024, 1024);
key.shadow.camera.left = -5;
key.shadow.camera.right = 5;
key.shadow.camera.top = 5;
key.shadow.camera.bottom = -5;
scene.add(key);

const rim = new THREE.DirectionalLight(0x88bbff, 0.4);
rim.position.set(-5, 4, -4);
scene.add(rim);

/* ================= 地面 ================= */
const groundGeo = new THREE.CircleGeometry(6, 48);
groundGeo.rotateX(-Math.PI/2);
const ground = new THREE.Mesh(groundGeo, new THREE.MeshLambertMaterial({color:0x38424f}));
ground.position.y = -0.01;
ground.receiveShadow = true;
scene.add(ground);

/* ============================================================
   OC 猫猫建模 · 最终修正版
   ============================================================ */
function createCat(){
  const g = new THREE.Group();

  /* ---- 配色 ---- */
  const C_MAIN  = 0xE69A4E;
  const C_LIGHT = 0xF6DEBE;
  const C_DARK  = 0xB0682F;
  const C_LINE  = 0x3A2318;
  const C_EYE   = 0x9BF25B;

  /* ---- 材质 ---- */
  const matMain  = new THREE.MeshLambertMaterial({color: C_MAIN});
  const matLight = new THREE.MeshLambertMaterial({color: C_LIGHT});
  const matDark  = new THREE.MeshLambertMaterial({color: C_DARK});
  const matLine  = new THREE.MeshLambertMaterial({color: C_LINE});
  const matEyeW  = new THREE.MeshBasicMaterial({color: 0xFFFFFF});
  const matEyeG  = new THREE.MeshBasicMaterial({color: C_EYE});
  const matEyeB  = new THREE.MeshBasicMaterial({color: 0x101014});

  /* ============ 躯干 ============ */
  const body = new THREE.Mesh(new THREE.SphereGeometry(0.5, 32, 24), matMain);
  body.scale.set(0.85, 0.72, 1.15);
  body.position.set(0, 0.8, 0);
  body.castShadow = true;
  g.add(body);

  const belly = new THREE.Mesh(new THREE.SphereGeometry(0.44, 32, 24), matLight);
  belly.scale.set(0.82, 0.75, 1.1);
  belly.position.set(0, 0.72, 0.05);
  g.add(belly);

  // 臀部重心略微后移，配合后腿位置
  const hip = new THREE.Mesh(new THREE.SphereGeometry(0.42, 32, 24), matMain);
  hip.scale.set(0.88, 0.78, 0.9);
  hip.position.set(0, 0.82, -0.5); 
  hip.castShadow = true;
  g.add(hip);

  const neck = new THREE.Mesh(new THREE.CylinderGeometry(0.24, 0.34, 0.35, 16), matMain);
  neck.position.set(0, 1.05, 0.42);
  neck.rotation.x = -0.35;
  neck.castShadow = true;
  g.add(neck);

  /* ============ 头部 ============ */
  const head = new THREE.Mesh(new THREE.SphereGeometry(0.38, 32, 24), matMain);
  head.scale.set(1.1, 0.95, 1.0);
  head.position.set(0, 1.25, 0.78);
  head.castShadow = true;
  g.add(head);

  const chin = new THREE.Mesh(new THREE.SphereGeometry(0.26, 20, 16), matMain);
  chin.scale.set(0.9, 0.7, 0.9);
  chin.position.set(0, 1.13, 0.88);
  g.add(chin);

  [-1, 1].forEach(function(sx){
    for (let i = 0; i < 3; i++){
      const spike = new THREE.Mesh(new THREE.ConeGeometry(0.055, 0.22, 8), matMain);
      spike.rotation.z = -sx * (Math.PI/2 + 0.15);
      spike.rotation.y =  0.1 * sx;
      spike.position.set(0.4*sx, 1.28 - i*0.08, 0.78);
      g.add(spike);
    }
  });

  const muzzle = new THREE.Mesh(new THREE.SphereGeometry(0.2, 24, 20), matLight);
  muzzle.scale.set(1.15, 0.8, 1.0);
  muzzle.position.set(0, 1.12, 1.02);
  g.add(muzzle);

  const nose = new THREE.Mesh(new THREE.ConeGeometry(0.06, 0.07, 4), matLine);
  nose.rotation.x = Math.PI;
  nose.rotation.y = Math.PI/4;
  nose.position.set(0, 1.17, 1.18);
  g.add(nose);

  const mouthGeo = new THREE.TorusGeometry(0.065, 0.009, 6, 12, Math.PI);
  [-1, 1].forEach(function(sx){
    const m = new THREE.Mesh(mouthGeo, matLine);
    m.rotation.z = Math.PI/2;
    m.rotation.y = Math.PI;
    m.position.set(0.055*sx, 1.07, 1.14);
    g.add(m);
  });

  /* ============ 眼睛 ============ */
  [-1, 1].forEach(function(sx){
    const eyeW = new THREE.Mesh(new THREE.SphereGeometry(0.115, 24, 18), matEyeW);
    eyeW.scale.set(1.0, 0.78, 0.45);
    eyeW.position.set(0.18*sx, 1.35, 1.06);
    eyeW.rotation.z = 0.35 * sx;
    g.add(eyeW);

    const eyeG = new THREE.Mesh(new THREE.SphereGeometry(0.092, 24, 18), matEyeG);
    eyeG.scale.set(0.95, 0.85, 0.45);
    eyeG.position.set(0.18*sx, 1.35, 1.09);
    eyeG.rotation.z = 0.35 * sx;
    g.add(eyeG);

    const pupil = new THREE.Mesh(new THREE.SphereGeometry(0.045, 16, 12), matEyeB);
    pupil.scale.set(0.45, 1.0, 0.5);
    pupil.position.set(0.18*sx, 1.35, 1.13);
    g.add(pupil);

    const spark = new THREE.Mesh(new THREE.SphereGeometry(0.022, 8, 6), matEyeW);
    spark.position.set(0.15*sx, 1.39, 1.15);
    g.add(spark);
  });

  /* ============ 耳朵 ============ */
  [-1, 1].forEach(function(sx){
    const ear = new THREE.Mesh(new THREE.ConeGeometry(0.17, 0.48, 12), matMain);
    ear.position.set(0.26*sx, 1.7, 0.7);
    ear.rotation.z = -0.22 * sx;
    ear.rotation.x = -0.15;
    ear.castShadow = true;
    g.add(ear);

    const inner = new THREE.Mesh(new THREE.ConeGeometry(0.095, 0.28, 12), matDark);
    inner.position.set(0.26*sx, 1.68, 0.74);
    inner.rotation.z = -0.22 * sx;
    inner.rotation.x = -0.15;
    g.add(inner);

    const tuft = new THREE.Mesh(new THREE.ConeGeometry(0.05, 0.16, 8), matDark);
    tuft.position.set(0.26*sx, 1.96, 0.7);
    tuft.rotation.z = -0.26 * sx;
    tuft.rotation.x = -0.15;
    g.add(tuft);
  });

  /* ============ 额头 M 纹 ============ */
  [-1, 1].forEach(function(sx){
    for (let i = 0; i < 3; i++){
      const s = new THREE.Mesh(
        new THREE.CylinderGeometry(0.012, 0.012, 0.18, 6),
        matDark
      );
      s.rotation.x = Math.PI/2;
      s.rotation.z = -0.4 * sx;
      s.position.set(0.1*sx, 1.56 - i*0.025, 0.88 - i*0.07);
      g.add(s);
    }
  });

  /* ============ 四肢（后腿彻底移到屁股末端） ============ */
  const legGeo = new THREE.CylinderGeometry(0.095, 0.075, 0.75, 16);
  legGeo.translate(0, -0.375, 0);
  const pawGeo = new THREE.SphereGeometry(0.105, 16, 12);

  const legs = [];
  // 前腿保持在 0.5，后腿从 -0.45 直接推到 -0.68，完美对齐臀部末端
  const legPos = [
    [ 0.28,  0.5], [-0.28,  0.5],
    [ 0.30, -0.68], [-0.30, -0.68]
  ];

  legPos.forEach(function(p, index){
    const leg = new THREE.Mesh(legGeo, matMain);
    leg.position.set(p[0], 0.75, p[1]);
    leg.castShadow = true;

    if (index < 2) leg.rotation.x = 0.15;
    else           leg.rotation.x = -0.15;

    const stripe = new THREE.Mesh(
      new THREE.CylinderGeometry(0.098, 0.098, 0.04, 16),
      matDark
    );
    stripe.position.y = -0.2;
    leg.add(stripe);

    const paw = new THREE.Mesh(pawGeo, matLight);
    paw.scale.set(1.0, 0.7, 1.35);
    paw.position.set(0, -0.75, 0.04);
    paw.rotation.x = 0.15;
    leg.add(paw);

    g.add(leg);
    legs.push(leg);
  });

  /* ============================================================
     尾巴（均匀分布毛发，不再只集中在尾尖）
     ============================================================ */
  const tailSegs = [
    { len: 0.28, r0: 0.13, r1: 0.115, ang: -0.75 },
    { len: 0.30, r0: 0.115, r1: 0.10, ang: 0.35 },
    { len: 0.30, r0: 0.10, r1: 0.085, ang: 0.35 },
    { len: 0.28, r0: 0.085, r1: 0.07, ang: 0.3 },
    { len: 0.26, r0: 0.07, r1: 0.055, ang: 0.25 }
  ];

  const tailRoot = new THREE.Group();
  tailRoot.position.set(0, 0.85, -0.55); // 紧贴臀部
  g.add(tailRoot);

  const tailPivots = [];
  let attach = tailRoot;

  tailSegs.forEach(function(s, i){
    const pivot = new THREE.Group();
    if (i > 0) pivot.position.y = tailSegs[i-1].len;
    pivot.rotation.x = s.ang;

    const isTip = (i === tailSegs.length - 1);

    // 尾巴主体圆柱
    const geo = new THREE.CylinderGeometry(s.r1, s.r0, s.len, 20);
    geo.translate(0, s.len/2, 0);
    const mesh = new THREE.Mesh(geo, isTip ? matLight : matMain);
    mesh.castShadow = true;
    pivot.add(mesh);

    // 深色环纹
    if (i === 1 || i === 3){
      const ring = new THREE.Mesh(
        new THREE.CylinderGeometry(s.r0*1.01, s.r0*1.01, 0.03, 20),
        matDark
      );
      ring.position.y = s.len * 0.5;
      pivot.add(ring);
    }

    // ✨ 毛发：均匀分布在每一段圆柱表面，不再局限于尾尖
    // 数量改为每段 8 根，让蓬松感连贯
    const furCount = 8;
    const furLen = 0.18;

    for (let j = 0; j < furCount; j++) {
      const angle = (j / furCount) * Math.PI * 2 + i * 0.6; // 错开排列
      
      // 越靠近尾尖，毛发颜色越浅
      const furMat = (i > 2) ? matLight : matMain;

      const fur = new THREE.Mesh(
        new THREE.ConeGeometry(0.04, furLen, 5),
        furMat
      );

      // 定位在圆柱表面稍靠外
      fur.position.set(
        Math.cos(angle) * s.r0 * 0.9,
        s.len * 0.5,
        Math.sin(angle) * s.r0 * 0.9
      );

      // 让毛发向外微微张开，同时带一点向后的斜度，形成毛绒感
      fur.rotation.z = -Math.cos(angle) * 0.6;
      fur.rotation.x = Math.sin(angle) * 0.6 - 0.2; // 稍微后仰

      pivot.add(fur);
    }

    // 尾尖改用更大的圆头收尾，不再额外插一圈刺
    if (isTip){
      const cap = new THREE.Mesh(new THREE.SphereGeometry(s.r1 * 1.3, 16, 12), matLight);
      cap.position.y = s.len;
      pivot.add(cap);
    }

    attach.add(pivot);
    attach = pivot;
    tailPivots.push(pivot);
  });

  /* ============ 躯干侧面螺旋虎斑 ============ */
  [-1, 1].forEach(function(sx){
    const spiral = new THREE.Mesh(
      new THREE.TorusGeometry(0.13, 0.016, 6, 24),
      matDark
    );
    spiral.scale.set(1, 1, 0.15);
    spiral.rotation.y = Math.PI/2;
    spiral.position.set(0.42*sx, 0.85, -0.05);
    g.add(spiral);
  });

  /* ============ 背部条纹 ============ */
  for (let i = 0; i < 4; i++){
    const stripe = new THREE.Mesh(
      new THREE.CylinderGeometry(0.018, 0.018, 0.25, 6),
      matDark
    );
    stripe.rotation.x = Math.PI/2;
    stripe.rotation.z = 0.3;
    stripe.position.set(0, 1.15 - i*0.01, -0.1 - i*0.18);
    g.add(stripe);
  }

  return { group: g, legs: legs, tail: tailPivots };
}

/* ================= 实例化 ================= */
const cat = createCat();
scene.add(cat.group);

/* ================= 拖动旋转 / 双指缩放 ================= */
let camDist = 6.0;
let camYaw  = Math.PI * 0.25;
let camPitch= 0.3;
let dragging = false;
let lastX = 0, lastY = 0;
let pinchStart = 0, pinchDist0 = 0;

function updateCamera(){
  const cx = Math.sin(camYaw) * Math.cos(camPitch) * camDist;
  const cy = Math.sin(camPitch) * camDist;
  const cz = Math.cos(camYaw) * Math.cos(camPitch) * camDist;
  camera.position.set(cx, cy + 1.0, cz);
  camera.lookAt(0, 1.0, 0);
}
updateCamera();

canvas.addEventListener('touchstart', function(e){
  if (e.touches.length === 1){
    dragging = true;
    lastX = e.touches[0].clientX;
    lastY = e.touches[0].clientY;
  } else if (e.touches.length === 2){
    dragging = false;
    pinchDist0 = Math.hypot(
      e.touches[0].clientX - e.touches[1].clientX,
      e.touches[0].clientY - e.touches[1].clientY
    );
    pinchStart = camDist;
  }
}, {passive:true});

canvas.addEventListener('touchmove', function(e){
  if (e.touches.length === 1 && dragging){
    const dx = e.touches[0].clientX - lastX;
    const dy = e.touches[0].clientY - lastY;
    lastX = e.touches[0].clientX;
    lastY = e.touches[0].clientY;
    camYaw   -= dx * 0.008;
    camPitch += dy * 0.006;
    camPitch = Math.max(-0.1, Math.min(1.1, camPitch));
    updateCamera();
  } else if (e.touches.length === 2){
    const d = Math.hypot(
      e.touches[0].clientX - e.touches[1].clientX,
      e.touches[0].clientY - e.touches[1].clientY
    );
    if (pinchDist0 > 0){
      camDist = Math.max(3.5, Math.min(12, pinchStart * pinchDist0 / d));
      updateCamera();
    }
  }
}, {passive:true});

canvas.addEventListener('touchend', function(){ dragging = false; });

/* 桌面端鼠标支持 */
canvas.addEventListener('mousedown', function(e){
  dragging = true; lastX = e.clientX; lastY = e.clientY;
});
window.addEventListener('mousemove', function(e){
  if (!dragging) return;
  const dx = e.clientX - lastX, dy = e.clientY - lastY;
  lastX = e.clientX; lastY = e.clientY;
  camYaw   -= dx * 0.008;
  camPitch += dy * 0.006;
  camPitch = Math.max(-0.1, Math.min(1.1, camPitch));
  updateCamera();
});
window.addEventListener('mouseup', function(){ dragging = false; });
canvas.addEventListener('wheel', function(e){
  e.preventDefault();
  camDist = Math.max(3.5, Math.min(12, camDist + e.deltaY * 0.004));
  updateCamera();
}, {passive:false});

window.addEventListener('resize', function(){
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

/* ================= 轻量动画 ================= */
const clock = new THREE.Clock();

function tick(){
  const dt = Math.min(clock.getDelta(), 0.05);
  const t = clock.getElapsedTime();

  cat.group.position.y = Math.sin(t * 1.4) * 0.015;

  // 尾巴摆动
  const bases = [-0.75, 0.35, 0.35, 0.3, 0.25];
  for (let i = 0; i < cat.tail.length; i++){
    const p = cat.tail[i];
    p.rotation.x = bases[i] + Math.sin(t * 2.0 - i * 1.2) * 0.05;
    p.rotation.z = Math.sin(t * 1.6 - i * 1.4) * 0.08;
  }

  renderer.render(scene, camera);
}

renderer.setAnimationLoop(tick);

})();
</script>
</body>
</html>

Game Source: OC 猫猫 · 3D 预览（最终修正版）

Creator: TurboKoala83

Libraries: three

Complexity: complex (474 lines, 14.6 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: oc-3d-turbokoala83-mujgv00o" to link back to the original. Then publish at arcadelab.ai/publish.