three.js　2章

写経中・・

f:id:devilmakelie:20171206165055p:plain

初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ

作者: Jos Dirksen,あんどうやすし
出版社/メーカー: オライリージャパン
発売日: 2016/07/23
メディア: 単行本（ソフトカバー）
この商品を含むブログ (3件) を見る

悪いところがあったら大体コンソールに出力されてるのに気づいてデバッグめっちゃはやくなった。今までずっと探してたわ・・

<!DOCTYPE html>
<html>
<head>
  <title>test4</title>
  <script type="text/javascript" src ="./libs/three.js"></script>
  <script type="text/javascript" src ="./libs/stats.js"></script>
  <script type="text/javascript" src ="./libs/dat.gui.js"></script>
  <style>
    body{
      margin:0;
      overflow:hidden;
    }
  </style>
</head>
<body>
  <div id = "Stats-output"></div>
  <div id = "WebGL-output"></div>
  <script type="text/javascript">
    function init(){
      var stats = initStats();
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000);
      scene.add(camera);

      var renderer = new THREE.WebGLRenderer();
      renderer.setClearColor(new THREE.Color(0xEEEEEE));
      renderer.setSize(window.innerWidth,window.innerHeight);
      renderer.shadowMap.enabled = true;

      var planeGeometry = new THREE.PlaneGeometry(60,40,1,1);
      var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});
      var plane = new THREE.Mesh(planeGeometry,planeMaterial);
      plane.receiveShadow = true;

      plane.rotation.x = -0.5*Math.PI;
      plane.position.x = 0;
      plane.position.y = 0;
      plane.position.z = 0;
      scene.add(plane)

      camera.position.x = -30;
      camera.position.y = 40;
      camera.position.z = 30;
      camera.lookAt(scene.position);

      var ambientLight = new THREE.AmbientLight(0x0c0c0c);
      scene.add(ambientLight);

      var spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set(-20,30,-5);
      spotLight.castShadow = true;
      scene.add(spotLight);

      document.getElementById("WebGL-output").appendChild(renderer.domElement);

      var step = 0;

      var controls = new function(){
        this.rotationSpeed = 0.02;
        this.numberOfObjects = scene.children.length;
        this.removeCube = function(){
          var allChildren = scene.children;
          var lastObject = allChildren[allChildren.length-1];
          if(lastObject instanceof THREE.Mesh){
            scene.remove(lastObject);
            this.numberOfObjects = scene.children.length;
          }
        };
          this.addCube = function(){
            var cubeSize = Math.ceil((Math.random()*3));
            var cubeGeometry = new THREE.BoxGeometry(cubeSize,cubeSize,cubeSize);
            var cubeMaterial = new THREE.MeshLambertMaterial({color:Math.random()*0xffffff});
            var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
            cube.castShadow = true;
            cube.name = "cube-" + scene.children.length;
            cube.position.x = -30 + Math.round((Math.random()*planeGeometry.parameters.width));
            cube.position.y = Math.round((Math.random()*5));
            cube.position.z = -20 + Math.round((Math.random()*planeGeometry.parameters.height));
            scene.add(cube);
            this.numberOfObjects = scene.children.length;
        };
        this.outputObjects = function(){
          console.log(scene.children);
        }

      };

      var gui = new dat.GUI();
      gui.add(controls,'rotationSpeed',0,0.5);
      gui.add(controls,'addCube');
      gui.add(controls,'removeCube');
      gui.add(controls,'outputObjects').listen();

      render();

      function render(){
        stats.update();
        scene.traverse(function(obj){
          if(obj instanceof THREE.Mesh && obj !=plane){
            obj.rotation.x += controls.rotationSpeed;
            obj.rotation.y +=controls.rotationSpeed;
            obj.rotation.z +=controls.rotationSpeed;

          }
        });
        requestAnimationFrame(render);
        renderer.render(scene,camera);
      }
      function initStats(){
        var stats = new Stats();
        stats.setMode(0);
        stats.domElement.style.position = "absolute";
        stats.domElement.style.left = "0px";
        stats.domElement.style.top="0px";
        document.getElementById("Stats-output").appendChild(stats.domElement);
        return stats;

      }

      }
      window.onload = init
  </script>
</body>

</html>

Yado_tech

旅館＋ITとはなんぞ