猫史档案馆

有缺陷，望大佬指教，有简易就一针见血提（开心.png)
<body></body>
<script src="/three.js"></script>
<script>
  var scene = new THREE.Scene();
  var flat = {flatShading: true};
  var light = new THREE.AmbientLight('white', 0.8);
  scene.add(light);

  var aspectRatio = window.innerWidth / window.innerHeight;
  var camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);
  var renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  var body = new THREE.CubeGeometry(150,180,80);
  var cover = new THREE.MeshNormalMaterial();
  var play = new THREE.Mesh(body, cover);
  scene.add(play);
  
  var hd = new THREE.SphereGeometry(60,20,16);
  var he = new THREE.Mesh(hd,cover);
  play.add(he);
  he.position.set(0,130,0);
  var hand = new THREE.CubeGeometry(40,150,53);
  var rh = new THREE.Mesh(hand,cover);
  rh.position.set(-90,-20,0);
  play.add(rh);
  rh.geometry.applyMatrix( new THREE.Matrix4().makeTranslation(0,0,0) );
  rh.rotation.z = -0.3;
  var lh = new THREE.Mesh(hand,cover);
  play.add(lh);
  lh.position.set(90,-20,0);
  lh.rotation.z = 0.3;
  rh.geometry.translate(0,30, 0);
  var lg = new THREE.CubeGeometry(50,100,50);
  var rl = new THREE.Mesh(lg,cover);
  play.add(rl);
  rl.position.set(-50,-130,0);
  var ll = new THREE.Mesh(lg,cover);
  ll.position.set(50,-130,0);
  play.add(ll);
  play.add(camera);
  var clock = new THREE.Clock();
  function maketree(x,z){
    var trunk = new THREE.Mesh(
      new THREE.CylinderGeometry(50,50,200),
      new MeshBasicMaterial({color:'sienna'})
    );
    var top = new THREE.Mesh(
      new THREE.SphereGeometry(150),
      new MeshBasicMaterial({color:'forestgreen'})
    );
    top.position.y = 175;
    trunk.add(top);
    trunk.position.set(x,75,z);
    scene.add(trunk);
  }
  document.addEventListener('keydown',sendKeyDown);
  function animate(){
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    
    var t = clock.getElapsedTime();
    if (t >=0){
      t = clock.getElapsedTime();
    }else{
      t = -clock.getElapsedTime();
    }
    var rotation = Math.sin(3 * t);
    rh.rotation.z = rotation/10;
    lh.rotation.z = -rotation/10;
  }

  function sendKeyDown(event){
    var code = event.code;
    var t = clock.getElapsedTime();
    var pz = Math.sin(10 * t) * 100;
    if (code == 'ArrowRight'){
      play.rotation.y = play.rotation.y + 0.03;
    }
    if (code == 'ArrowLeft'){
      play.rotation.y = play.rotation.y - 0.03;
    }
    if (code == 'KeyA'){
      play.position.x = play.position.x - 5;
    }
    if (code == 'KeyD'){
      play.position.x = play.position.x + 5;
    }
    if (code == 'KeyS'){
      play.position.z = play.position.z + 5;
    }
    if (code == 'KeyW'){
      play.position.z = play.position.z - 5;
    }
    if (code == 'ArrowUp'){
      play.position.y = play.position.y + 5;
    }
    if (code == 'ArrowDown'){
      play.position.y = play.position.y - 5;
    }
  }
  function maketree(x, z){
    var trunk = new THREE.Mesh(
      new THREE.CylinderGeometry(20, 60, 300),
      new THREE.MeshBasicMaterial({color: 'sienna'})
    );
    var top = new THREE.Mesh(
      new THREE.SphereGeometry(150),
      new THREE.MeshBasicMaterial({color: 'forestgreen'})
    );
    top.position.y = 275;
    trunk.add(top);
    trunk.position.set(x, -75,z);
    scene.add(trunk);
  }
  animate();
  maketree( 500, 0);
  maketree(-500, 0);
  maketree( 750, -1000);
  maketree(-750, -1000);
</script>
猫史档案馆

three.js编出的不成熟3d小游戏

回复
