master

分支 (1)

管理

管理

master

threejs_exercise
/
06-camera-rotate copy.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/stats.min.js"></script>
  <script src="./js/tween.umd.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.BoxGeometry(1, 1, 1);
    // 创建材质
    var material = new THREE.MeshBasicMaterial({
      color: 0x00ff00
    });
    // 集合  mesh 网络
    var cube = new THREE.Mesh(geometry, material);

    scene.add(cube);
    addEdges(geometry, {
      x: 0,
      y: 0,
      z: 0
    });


    // -----------------------监视器 开始-----------------------
    var stats = new Stats();
    stats.setMode(1); // 0: fps, 1: ms
    // 将stats的界面对应左上角
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    document.body.appendChild(stats.domElement);
    setInterval(function () {
      stats.begin();
      // 你的每一帧的代码
      stats.end();
    }, 1000 / 60);
    // -----------------------监视器 结束-------------------
    camera.position.z = 5;

    // -------------------tween.js 动画 -------------------
    var jiao = 0;

    // const coords = {
    //   x: 0,
    //   y: 0
    // }; // Start at (0, 0)
    // const tween = new TWEEN.Tween() // Create a new tween that modifies 'coords'.
    //   .to({
    //     x: 0,
    //     y: 0
    //   }, 5000) // 5000 动画持续时间
    //   .easing(TWEEN.Easing.Quadratic.Out) // 运动方式
    //   .onUpdate(() => { // 更新坐标 的方法
    //     camera.position.x = 5 * Math.cos(jiao / 180 * Math.PI);
    //     camera.position.z = 5 * Math.sin(jiao / 180 * Math.PI);
    //   })
    //   .start(); // Start the tween immediately.

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

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


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


    // ---------------------渲染动画------------------------
    var animate = function () {
      jiao += 1;


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

      // camera.rotation.y = jiao / 180 * -Math.PI * 0.5;

      // cube.rotation.x += 0.1;
      // cube.rotation.y += 0.1;

      // line.rotation.x += 0.1;
      // line.rotation.y += 0.1;

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

    animate();
  </script>
</body>

</html>