猫史档案馆

有bug,用3de网页编辑器解决（code editor)链接：https://www.code3dgames.com/3de/
py菌花了三周搞出来的，有不足，请指教，点个赞球球了
<body></body>
<script src="/three.js"></script>
<script src="/tween.js"></script>
<script>
  var scene = new THREE.Scene();
  var flat = {flatShading: true};
  var light = new THREE.AmbientLight('white', 12);
  scene.add(light);
  var aspectRatio = window.innerWidth / window.innerHeight;
  var camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 10000);
  camera.position.z = 400;
  scene.add(camera);
  var renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  var mk = new THREE.Object3D();
  scene.add(mk);
  var body = new THREE.SphereGeometry(80,30,15);
  var cover = new THREE.MeshNormalMaterial();
  var main = new THREE.Mesh(body, cover);
  mk.add(main);
  var hand = new THREE.SphereGeometry(30,30,30);
  var lefthand = new THREE.Mesh(hand,cover);
  lefthand.position.set(-90,0,0);
  main.add(lefthand);
  var righthand = new THREE.Mesh(hand,cover);
  righthand.position.set(90,0,0);
  main.add(righthand);
  
  var leg = new THREE.SphereGeometry(40,20,15);
  var leftleg = new THREE.Mesh(leg,cover);
  leftleg.position.set(-50,-70,0);
  main.add(leftleg);
  var rightleg = new THREE.Mesh(leg,cover);
  main.add(rightleg);
  rightleg.position.set(50,-70,0);
  mk.add(camera);
  
  var clock = new THREE.Clock();
  
  function walk(){
    if (!iswalk()){
      return ;
    }else{
      var time = clock.getElapsedTime();
    let position = Math.sin(10 * time) * 50;
    rightleg.position.z = -position;
    leftleg.position.z = position;
    righthand.position.z = position;
    lefthand.position.z = -position;
    }
  }

  function animate(){
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    walk();
    turn();
    TWEEN.update();
  }
  function iswalk(){
    if (rgh) return true;
    if (frd) return true;
    if (lft) return true;
    if (bck) return true;
    return false;
  }
  document.addEventListener('keydown',sendKeyDown);
  var rgh = false;
  var frd = false;
  var lft = false;
  var bck = false;
  var crk = false;
  var direction;
  var ld;
  function sendKeyDown(event){
    var code = event.code;
    if (!ic()){
      if (code == 'ArrowRight'){
      mk.rotation.y = mk.rotation.y - 0.03;
      }
      if (code == 'ArrowLeft'){
        mk.rotation.y = mk.rotation.y + 0.03;
      }
      if (code == 'KeyA'){
        mk.position.x = mk.position.x - 10;
        lft = true;
      }
      if (code == 'KeyD'){
        mk.position.x = mk.position.x + 10;
        rgh = true;
      }
      if (code == 'KeyS'){
        mk.position.z = mk.position.z + 10;
        bck = true;
      }
      if (code == 'KeyW'){
        mk.position.z = mk.position.z - 10;
        frd = true;
      }
    }
    if (ic()){
      //没有编完!!!!!!!!!!!!!!!!!!益！
    }
    if (code == 'KeyC'){
        main.rotation.x = main.rotation.x - 0.1;
    }
    if (code == 'ArrowRight'){
      mk.rotation.y = mk.rotation.y - 0.03;
    }
    if (code == 'ArrowLeft'){
      mk.rotation.y = mk.rotation.y + 0.03;
    }
  }
  document.addEventListener('keyup',sendKeyUp);
  function sendKeyUp(event){
    var code = event.code;
    if (code == 'KeyA') lft = false;
    if (code == 'KeyD') rgh = false;
    if (code == 'KeyS') bck = false;
    if (code == 'KeyW') frd = false;
  }
  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);
    var b = new THREE.Mesh(
      new THREE.CircleGeometry(300),
      new THREE.MeshNormalMaterial()
    );
    b.position.y = -100;
    b.rotation.x = -Math.PI/2;
    not.push(b);
    trunk.add(b);
    trunk.position.set(x, -75,z);
    scene.add(trunk);
  }
  function turn(){
    if(rgh) direction = -Math.PI/2;
    if (lft) direction = Math.PI/2;
    if (frd) direction = 0;
    if (bck) direction = Math.PI;
    if (direction == ld) return;
    main.rotation.y = direction;
    var position = { x: 100 };
    var tween = new TWEEN.Tween(position);
    tween.to({ x: 10 }, 1000);
    tween.easing(TWEEN.Easing.Linear.None);
    tween.start();
  }
  var not = [];
  function ic(){
    var vector = new THREE.Vector3(0,-1,0);
    var raycaster = new THREE.Raycaster(mk.position, vector);
    var it = raycaster.intersectObjects(not);
    if (it.length > 0) return true;
    return false;
  }
  animate();
  for (var j=0;j<=10;j++){
    maketree(-1600,(-j)*400);
  }
  for (var p=0;p<=10;p++){
    maketree(1600,(-p)*400);
  }
</script>
猫史档案馆

js极简3d场景塑造代码！！！！！

回复
