master

分支 (1)

管理

管理

master

threejs_exercise
/
05-grid.html

<!DOCTYPE html>
<html>

<head>
  <title>My first three.js app</title>
  <style>
    body {
      margin: 0;
    }

    canvas {
      width: 100%;
      height: 100%
    }
  </style>
</head>

<body>
  <script src="js/three.js"></script>
  <script src="./js/OrbitControls.js"></script>
  <script>
    // 创建创建
    var scene = new THREE.Scene();
    // 创建透视相机
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    // 设置渲染器的尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);


    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    var geometry = new THREE.Geometry();
    var material = new THREE.LineBasicMaterial({
      vertexColors: true,
      Linewidth: 20
    });
    var red = new THREE.Color(0xff0000),
      green = new THREE.Color(0x00ff00),
      blue = new THREE.Color(0x0000ff),
      white = new THREE.Color(0xffffff),
      sblue = new THREE.Color(0x59a1e9);

    // 线的材质可以由2点的颜色决定
    Createline(0, 0, 0, 15, 0, 0, white);
    Createline(0, 0, 0, 0, 15, 0, white);
    Createline(0, 0, 0, 0, 0, -15, white);

    // 立方体
    // 创建几何体
    var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
    var cubeGeometry1 = new THREE.BoxGeometry(1, 3, 1);
    var cubeGeometry2 = new THREE.BoxGeometry(1, 6, 1);

    // 创建材质
    var material = new THREE.MeshBasicMaterial({
      color: 0x996633,
    });

    // 循环绘制网格
    for (var i = 0; i <= 10; i++) {
      Createline(i * 1, 0, 0, i * 1, 0, -10, sblue);
      Createline(0, 0, -i * 1, 10, 0, -i * 1, sblue);

      Createline(i * 1, 10, 0, i * 1, 10, -10, sblue);
      Createline(0, 10, -i * 1, 10, 10, -i * 1, sblue);
    }


    addModal(cubeGeometry, {
      x: 0.5,
      y: 0.5,
      z: -0.5
    });

    addModal(cubeGeometry1, {
      x: 2 + 0.5,
      y: 1.5,
      z: -3 + 0.5
    });

    addModal(cubeGeometry1, {
      x: 6 + 0.5,
      y: 1.5,
      z: -2 + 0.5
    });

    addModal(cubeGeometry2, {
      x: 4 + 0.5,
      y: 3,
      z: -6 + 0.5
    });


    camera.position.z = 15;
    camera.position.y = 5;
    camera.position.x = 0;
    // camera.position.x = 5;


    var jiao = 0;
    var zeroPoint = new THREE.Vector3(5, 5, -5);

    // 动画
    var animate = function () {


      jiao += 1;

      camera.position.x = 5 + 13 * Math.cos(jiao / 180 * Math.PI);
      camera.position.z = -5 + 13 * Math.sin(jiao / 180 * Math.PI);
      // 相机 关注点
      camera.lookAt(zeroPoint)

      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      controls.update();

    };

    animate();

    function Createline(x1, y1, z1, x2, y2, z2, color) {
      var lineMaterial = new THREE.LineBasicMaterial({
        vertexColors: true
      });
      var p1 = new THREE.Vector3(x1, y1, z1);
      var p2 = new THREE.Vector3(x2, y2, z2);
      geometry.vertices.push(p1);
      geometry.vertices.push(p2);
      geometry.colors.push(color, color);
      var line = new THREE.Line(geometry, lineMaterial, THREE.LinePieces);
      scene.add(line);
    }


    // 辅助边线
    function addEdges(geometry, {
      x,
      y,
      z
    }) {
      var edges = new THREE.EdgesGeometry(geometry);
      var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({
        color: 0x00ff00,
        linewidth: 3
      }));

      line.position.x = x;
      line.position.y = y;
      line.position.z = z;
      scene.add(line);

    }

    // 创建立方体
    function createCube(geometry, {
      x,
      y,
      z
    }) {
      // 集合  mesh 网络
      var cube = new THREE.Mesh(geometry, material);
      console.log(x, y, z);

      cube.position.x = x;
      cube.position.y = y;
      cube.position.z = z;
      scene.add(cube);
    }

    function addModal(cubeGeometry, position) {
      addEdges(cubeGeometry, position);
      createCube(cubeGeometry, position);
    }
  </script>
</body>

</html>