master

分支 (1)

管理

管理

master

threejs_exercise
/
11-cube-ball.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, red);
    Createline(0, 0, 0, 0, 0, -15, green);

    // 立方体
    // 创建几何体
    var cubeGeometry = new THREE.BoxGeometry(1, 15, 1);
    var cubeGeometry1 = new THREE.BoxGeometry(1, 3, 1);
    var cubeGeometry2 = new THREE.BoxGeometry(1, 6, 1);
    // 创建材质
    var material = new THREE.MeshLambertMaterial({
      color: 0xFFFF00,
    });

    // var material = new THREE.MeshBasicMaterial({
    //   color: 0xFFFF00,
    // });


    // 点光源
    var light = new THREE.PointLight(0xffffff, 1, 100);
    light.position.set(0, 40, 10);
    scene.add(light);


    light.position.set(10, -40, -10);
    scene.add(light);

    // 点光源赋值
    var sphereSize = 1;
    var pointLightHelper = new THREE.PointLightHelper(light, sphereSize);
    scene.add(pointLightHelper);


    // 从正上方照射过来的白色平行光，0.5的光强。
    var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(50, 50, 0);
    scene.add(directionalLight);

    // 平行光辅助

    let ping = new THREE.DirectionalLightHelper(directionalLight, 100)
    scene.add(ping);


    camera.position.z = 50;
    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);

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

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

    };

    animate();

    // addModal(cubeGeometry, {
    //   x: 0,
    //   y: 0,
    //   z: 0
    // })

    let num = 18;

    for (let i = 0; i < num; i++) {
      for (let j = -3; j < 4; j++) {
        addModal(cubeGeometry, {
          rx: getDeg(360 / num * i),
          rz: getDeg(360 / num * j)
        })
      }

    }


    // 创建先的方法
    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,
      rx,
      ry,
      rz
    }) {
      var edges = new THREE.EdgesGeometry(geometry);
      var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({
        color: 0x00ff00,
        linewidth: 3
      }));


      line.position.x = x || 0;
      line.position.y = y || 0;
      line.position.z = z || 0;
      line.rotation.x = rx || 0;
      line.rotation.y = ry || 0;
      line.rotation.z = rz || 0;
      line.translateY(40);

      scene.add(line);
    }

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

      cube.position.x = x || 0;
      cube.position.y = y || 0;
      cube.position.z = z || 0;
      cube.rotation.x = rx || 0;
      cube.rotation.y = ry || 0;
      cube.rotation.z = rz || 0;
      cube.translateY(40);

      scene.add(cube);
    }

    function addModal(cubeGeometry, position) {
      // addEdges(cubeGeometry, position);
      createCube(cubeGeometry, position);
    }

    // 角度转换弧度
    function getDeg(angle) {
      return angle / 180 * Math.PI;
    }
  </script>
</body>

</html>