master

分支 (1)

管理

管理

master

threejs_exercise
/
04-3mf.html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>three.js webgl - 3MF</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <style>
    body {
      font-family: Monospace;
      background-color: #000000;
      margin: 0px;
      overflow: hidden;
    }

    #info {
      color: #fff;
      position: absolute;
      top: 10px;
      width: 100%;
      text-align: center;
      z-index: 100;
      display: block;

    }

    a {
      color: skyblue
    }

    .button {
      background: #999;
      color: #eee;
      padding: 0.2em 0.5em;
      cursor: pointer
    }

    .highlight {
      background: orange;
      color: #fff;
    }

    span {
      display: inline-block;
      width: 60px;
      /* float: left; */
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="info">

  </div>

  <script src="./js/three.js"></script>
  <script src="./js/3MFLoader.js"></script>

  <script src="js/Detector.js"></script>
  <script src="js/OrbitControls.js"></script>

  <script src="js/jszip.min.js"></script>

  <script>
    if (!Detector.webgl) Detector.addGetWebGLMessage();

    var camera, scene, renderer;

    init();

    function init() {

      renderer = new THREE.WebGLRenderer({
        antialias: true
      });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      scene = new THREE.Scene();
      scene.background = new THREE.Color(0x333333);

      scene.add(new THREE.AmbientLight(0xffffff, 0.2));

      camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 500);

      // Z is up for objects intended to be 3D printed.

      camera.up.set(0, 0, 1);
      camera.position.set(-80, -90, 150);
      scene.add(camera);

      var controls = new THREE.OrbitControls(camera, renderer.domElement);
      controls.addEventListener('change', render);
      controls.minDistance = 50;
      controls.maxDistance = 300;
      controls.enablePan = false;
      controls.target.set(80, 65, 20);
      controls.update();

      var pointLight = new THREE.PointLight(0xffffff, 0.8);
      camera.add(pointLight);
      var loader = new THREE.ThreeMFLoader();
      loader.load('./modal/02.3mf', function (object) {

        scene.add(object);
        render();

      });

      window.addEventListener('resize', onWindowResize, false);

    }

    function onWindowResize() {

      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

      renderer.setSize(window.innerWidth, window.innerHeight);

      render();

    }

    function render() {

      renderer.render(scene, camera);

    }
  </script>
</body>

</html>