master

分支 (1)

管理

管理

master

threejs_exercise
/
01-demo.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/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);

    new THREE.OrbitControls(camera, 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);


    // 监视器
    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;
    // 动画
    var animate = function () {
      requestAnimationFrame(animate);

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

      renderer.render(scene, camera);
    };

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

</html>