master

分支 (1)

管理

管理

master

threejs_exercise
/
15-datGUI.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 src="./js/dat.gui.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({
      antialias: true,
      autoClear: true
    });

    // 控制数据
    var myData = {
      r: 2,
      xSize: 8,
      ySize: 8,
      nfog: 0.1,
      ffog: 10,
    }

    var mesh = null;


    // 设置渲染器的尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);


    // 背景颜色
    scene.background = new THREE.Color(0xccccccc);


    // 控制器
    new THREE.OrbitControls(camera, renderer.domElement);


    // 创建材质
    var material = new THREE.MeshBasicMaterial({
      color: 0x0000ff,
      wireframe: true // 渲染成功线框图
    });


    // var light = new THREE.PointLight(0xffffff, 1, 1000);
    // light.position.set(0, 3, 3);
    // light.power = 10 * Math.PI;
    // scene.add(light);

    // var sphereSize = 1;
    // var pointLightHelper = new THREE.PointLightHelper(light, sphereSize);

    // scene.add(pointLightHelper);

    // // 从正上方照射过来的白色平行光，0.5的光强。

    // var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    // directionalLight.position.set(5, 5, 5);
    // directionalLight.power = 10 * Math.PI;
    // scene.add(directionalLight);

    // var pointLightHelper = new THREE.DirectionalLightHelper(directionalLight);
    // scene.add(pointLightHelper);

    // var light = new THREE.AmbientLight(0xffffff); // soft white light
    // scene.add(light);

    var gui = new dat.GUI();
    console.log('gui：', gui);
    var f1 = gui.addFolder('球体尺寸：');
    f1.add(myData, 'r', .5, 5).name('半径');
    f1.add(myData, 'xSize', 2, 40).name('水平片段')
    f1.add(myData, 'ySize', 2, 40).name('垂直片段');
    var f2 = gui.addFolder('雾化参数：');
    f2.add(myData, 'nfog', 0.1, 1);
    f2.add(myData, 'ffog', 1, 10);
    f2.open();


    camera.position.z = 5;
    // 动画
    var animate = function () {
      scene.remove(mesh);
      // 雾化效果
      scene.fog = new THREE.Fog(0xcccccc, myData.nfog, myData.ffog)
      // 创建几何体
      var geometry = new THREE.SphereGeometry(myData.r, myData.xSize, myData.ySize);
      mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
      // console.log('sence:', scene);

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


    };

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

</html>