Yado_tech

旅館+ITとはなんぞ

three.jsはじめてみました

なんだかんだでJSとPythonとあとHTML位が楽。
Processingなんてなかった。

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

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

早速写経した。つまづいたところは - オブジェクト作るvar stats = new initStats();ていうところ - function initStats(){}内にもvar stats = new Stats();同じ文章があるところ

ここでつまづいた。あれ?変数同じでええんかいってなったけどスコープ違うからいいのね。

後は本の中で当たり前にFunctionをネストしてた。関数のネストもはじめてなんだよなぁ

<!DOCTYPE html>
<html>
<head>
  <title>example 01.01</title>
  <script type="text/javascript" src="./libs/three.js"></script>
  <script type="text/javascript" src = "./libs/stats.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);
      var step = 0;
      var renderer = new THREE.WebGLRenderer();
      renderer.setClearColor(new THREE.Color(0xEEEEEE));
      renderer.setSize(window.innerWidth,window.innerHeight);
      renderer.shadowMap.enabled = true;

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

      var axes = new THREE.AxisHelper(20);
      scene.add(axes);

      var planeGeometry = new THREE.PlaneGeometry(60,20);
      var planeMaterial = new THREE.MeshLambertMaterial({color:0xcccccc});
      var plane = new THREE.Mesh(planeGeometry,planeMaterial);

      plane.rotation.x = -0.5*Math.PI;
      plane.position.x = 15;
      plane.position.y = 0;
      plane.position.z = 0;

      plane.receiveShadow = true;

      scene.add(plane);

      var cubeGeometry = new THREE.BoxGeometry(4,4,4);
      var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000});
      var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);

      cube.position.x = -4;
      cube.position.y = 3;
      cube.position.z = 0;
      cube.castShadow = true;
      scene.add(cube);

      var sphereGeometry = new THREE.SphereGeometry(4,20,20);
      var sphereMaterial = new THREE.MeshLambertMaterial({color:0x7777ff});
      var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
      sphere.position.x = 20;
      sphere.position.y = 4;
      sphere.position.z = 2;
      sphere.castShadow = true;
      scene.add(sphere);


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

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

      function renderScene(){
        stats.update()
        cube.rotation.x +=0.02;
        cube.rotation.y +=0.02;
        cube.rotation.z +=0.02;
        step += 0.04;
        sphere.position.x = 20+(10*(Math.cos(step)));
        sphere.position.y = 2+(10*Math.abs(Math.sin(step)));
        requestAnimationFrame(renderScene);
        renderer.render(scene,camera);
      }

      function initStats(){
        var stats = new Stats();
        stats.setMode(0);
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.lft = '0px';
        stats.domElement.style.top = '0px';
        document.getElementById("Stats-output").appendChild(stats.domElement);
        return stats;

      }

    }



    window.onload =init;
  </script>
</body>
</html>

面妖なスコープ・・