master

分支 (1)

管理

管理

master

html5
/
maze.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>迷宫</title>
  <style type="text/css">
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>

  <script type="text/javascript" src="assets/javascripts/three.js"></script>
  <script type="text/javascript" src="assets/javascripts/dat.gui.min.js"></script>
  <script type="text/javascript"src="assets/javascripts/stats.min.js"></script>
  <script type="text/javascript" src="assets/javascripts/OrbitControls.js"></script>
  <script type="text/javascript" src="assets/javascripts/EffectComposer.js"></script>
  <script type="text/javascript" src="assets/javascripts/RenderPass.js"></script>
  <script type="text/javascript" src="assets/javascripts/CopyShader.js"></script>
  <script type="text/javascript" src="assets/javascripts/ShaderPass.js"></script>
  <script type="text/javascript" src="assets/javascripts/MaskPass.js"></script>
  <script type="text/javascript" src="assets/javascripts/commons.js"></script>
  <script type="text/javascript" src="assets/javascripts/maze/array.js"></script>
  <script type="text/javascript" src="assets/javascripts/maze/cell.js"></script>
  <script type="text/javascript" src="assets/javascripts/maze/graph.js"></script>
  <script type="text/javascript" src="assets/javascripts/maze/maze.js"></script>
  <script type="text/javascript" src="assets/javascripts/maze/mazeGenerator.js"></script>
  <script type="text/javascript" src="assets/javascripts/maze/underscore-min.js"></script>
  <script type="text/javascript">

    var scene, camera, renderer;
    var stats, cameraControl;

    function init () {
      scene = new THREE.Scene();

      var maze = new Maze(scene,17, 100, 100);
      maze.generate();
      // maze.draw();

      camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
      camera.position.set(10, 5, 10);
      // camera.position.set(80, 120, 100);
      camera.lookAt(scene.position);


      renderer = new THREE.WebGLRenderer( {antialias: true} );
      renderer.setClearColor(0x000000, 1.0);
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.shadowMapEnabled = true;

      // create the ground plane
      var planeGeometry = new THREE.PlaneGeometry(100, 100);
      var planeMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc});
      var plane = new THREE.Mesh(planeGeometry, planeMaterial);
      plane.receiveShadow = true;

      // rotate and position the plane
      plane.rotation.x = -0.5 * Math.PI;
      plane.position.y = -1.5;

      // add the plane to the scene
      scene.add(plane)
      var width = 4;
      var boxGeometry = new THREE.BoxGeometry( width, width, width );
      var boxMaterial = new THREE.MeshNormalMaterial( {color: 0x00FF00, opacity: 0.8, transparent: true} );
      var box = new THREE.Mesh(boxGeometry, boxMaterial);
      box.name = 'box';
      box.castShadow = true;
      scene.add(box);

      var width = 4;
      var box1Geometry = new THREE.BoxGeometry( width, width, width );
      var box1Material = new THREE.MeshNormalMaterial( {color: 0x00FF00, opacity: 0.8, transparent: true} );
      var box1 = new THREE.Mesh(box1Geometry, box1Material);
      // box1.position.y = width / 2;
      // box1.position.z = width / 2;
      box1.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, width / 2, width / 2));
      // box1.geometry.applyMatrix(new THREE.Matrix4().makeRotationX(0.25 * Math.PI));
      // box1.rotation.x = 0.25 * Math.PI;
      box1.name = 'box1';
      box1.castShadow = true;

      box1.position.y += width / 2;
      box1.position.z -= width / 2;
      box1.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, -width / 2, width / 2));

      drawLine(scene, -100, width / 2, width / 2, 100, width / 2, width / 2);
      scene.add(box1);


      drawCoordinateAxies(scene);

      var spotLight = new THREE.SpotLight(0xFFFFFF);
      spotLight.position.set(40, 100, 80);
      spotLight.shadowCameraNear = 50;
      spotLight.shadowCameraFar = 300;
      spotLight.castShadow = true;

      var ambientLight = new THREE.AmbientLight(0x111111);
      scene.add(ambientLight);
      scene.add(spotLight);


      cameraControl = new THREE.OrbitControls(camera);

      addStatsObject();

      document.body.appendChild(renderer.domElement);

      render();
    }

    function addStatsObject() {
      stats = new Stats();
      stats.setMode(0);
      stats.domElement.style.position = "absolute";
      stats.domElement.style.top = "0";
      stats.domElement.style.left = "0";

      document.body.appendChild(stats.domElement);
    }

    function render () {
      cameraControl.update();
      stats.update();

      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }

    window.onload = init;
  </script>
</head>
<body>

</body>
</html>