master

分支 (1)

管理

管理

master

threejs_exercise
/
04-line.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>
    // 创建创建
    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 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);

    // 线的材质可以由2点的颜色决定

    Createline(0, 0, 0, 10, 0, 0, red);
    Createline(0, 0, 0, 0, 10, 0, green);
    Createline(0, 0, 0, 0, 0, 10, blue);

    // 立方体
    // 创建几何体
    var geometry = new THREE.BoxGeometry(3, 3, 3);
    // 创建材质
    var material = new THREE.MeshBasicMaterial({
      color: 0xcccccc
    });
    // 集合  mesh 网络
    var cube = new THREE.Mesh(geometry, material);
    cube.position.x = 1.5;
    cube.position.y = 1.5;
    cube.position.z = 1.5;

    // scene.add(cube);

    addEdges(geometry);


    camera.position.z = 0;
    camera.position.x += 5;
    // camera.position.y += 15;
    // 动画
    var animate = function () {
      requestAnimationFrame(animate);
      camera.position.z += 0.1;
      renderer.render(scene, camera);
    };

    animate();

    function Createline(x1, y1, z1, x2, y2, z2, color) {
      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, material, THREE.LinePieces);
      scene.add(line);
    }
    // 赋值边线
    function addEdges(geometry) {
      var edges = new THREE.EdgesGeometry(geometry);
      var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({
        color: 0x00ff00,
        linewidth: 3

      }));

      line.position.x = 1.5;
      line.position.y = 1.5;
      line.position.z = 1.5;

      scene.add(line);

    }
  </script>
</body>

</html>