master

分支 (1)

管理

管理

master

threejs_exercise
/
03-test-edges.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 lines = [];

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

    new THREE.OrbitControls(camera, renderer.domElement);


    // 圆锥
    var geometry1 = new THREE.ConeBufferGeometry(1, 2, 15);
    // var material = new THREE.MeshBasicMaterial({
    //   color: 0xdaa520
    // });
    // var cone = new THREE.Mesh(geometry, material);


    // 圆柱体
    var geometry2 = new THREE.CylinderGeometry(1, 1, 3, 12);
    // var material = new THREE.MeshBasicMaterial({
    //   color: 0xffff00
    // });
    // var cylinder = new THREE.Mesh(geometry, material);


    // 环3d
    var geometry3 = new THREE.TorusGeometry(2, 0.3, 10, 10);
    var material = new THREE.MeshBasicMaterial({
      color: 0x005500
    });
    var torus = new THREE.Mesh(geometry3, material);

    hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
    hemiLight.color.setHSL(0.6, 1, 0.6);
    hemiLight.groundColor.setHSL(0.095, 1, 0.75);
    hemiLight.position.set(0, 50, 0);
    scene.add(hemiLight);

    scene.add(torus);
    torus.position.z = -5;
    lines.push(torus);

    addEdges(geometry1);
    // addEdges(geometry2);
    addEdges(geometry3);

    // 动画
    var animate = function () {
      requestAnimationFrame(animate);
      lines.forEach(v => {
        v.rotation.y += 0.05
      });

      // camera.position.z -= 0.1;
      renderer.render(scene, camera);
    };


    animate();


    // 设置边缘网格
    function addEdges(geometry) {
      var edges = new THREE.EdgesGeometry(geometry);
      var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({
        color: 0xffff00
      }));
      lines.push(line);


      line.position.z = -5;
      scene.add(line);

    }
  </script>
</body>

</html>