peace098beat · November 12, 2018 23:37
diff --git a/magma.html b/magma.html
 <!DOCTYPE html>
 <html>

 <head>
  <meta charset="utf-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

  <script src="js/controls/OrbitControls.js"></script>
  <script src="js/loaders/TDSLoader.js"></script>
  <script src="js/loaders/ColladaLoader.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
  <script>
    /**
     * マグマ
     */
    class Magma extends THREE.Object3D {

      /**
       * コンストラクタ
       */
      constructor() {
        super();


        let loader = new THREE.TextureLoader();
        this._map = loader.load("./assets/texture/magma.png");
        this._map.wrapS = this._map.wrapT = THREE.RepeatWrapping;

        // テクスチャーをあてた球のMeshを作成します。
        const mesh = new THREE.Mesh(
          new THREE.SphereGeometry(10, 20, 20),
          new THREE.MeshBasicMaterial({ map: this._map })
        );

        this.add(mesh);


      }

      /**
       * 更新処理
       */
      update() {
        // 毎フレーム位置を0.005ずつ動かす。
        this._map.offset.x += 0.005;
        this._map.offset.y += 0.005;

      }
    }

    /**
     * シーン
     */
    class GameScene extends THREE.Scene {
      constructor() {
        super();

        this._frame = 0;

        // カメラを作成
        this.camera = new THREE.PerspectiveCamera(45, 1.0);
        // this.camera.position.set(0, 0, -100);
        this.camera.position.y = 10;
        this.camera.position.x = 50;
        this.camera.position.z = 50;
        this.camera.lookAt(new THREE.Vector3(0, 0, 0));

        // ヘルパー
        var dir = new THREE.Vector3(1, 0, 0);
        var origin = new THREE.Vector3(0, 0, 0);
        var length = 10;
        var hex = 0xffff00;
        var arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex);
        this.add(arrowHelper);

        // 平行光源
        const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
        directionalLight.position.set(1, 1, 1);
        this.add(directionalLight);

        // 環境光源
        const ambientLight = new THREE.AmbientLight(0x333333);
        this.add(ambientLight);

        // 地面
        const plane = new THREE.GridHelper(1000, 20);
        plane.position.y = -80;
        this.add(plane);

        // *****

        this.magma = new Magma();
        this.add(this.magma);

        // *****

      }

      update() {
        this.magma.update();

      }


    }
  </script>

  <script>
    // 2018-11-13 8:30 -

    let radius = 150;
    let rot = 0;

    // ページの読み込みを待つ
    window.addEventListener('load', init);


    function init() {


      // サイズを指定
      const width = 500;
      const height = 500;

      // レンダラーを作成
      const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#myCanvas'),
        antialias: true
      });



      // シーンを作成
      const scene = new GameScene();
      // フォグを設定
      // scene.fog = new THREE.Fog(0xF9F9F9, 50, 100);


      // ********************************************
      // ここに書く




      // ********************************************
      // フレームレートの数値を画面に表示
      const stats = new Stats();
      stats.domElement.style.position = 'absolute';
      stats.domElement.style.left = '0px';
      stats.domElement.style.bottom = '100px';

      document.body.appendChild(stats.domElement);
      // ********************************************


      tick();

      const camera = scene.camera;

      function tick() {

        scene.update();


        requestAnimationFrame(tick);


        stats.update();
        document.getElementById('hud').innerHTML = JSON.stringify(renderer.info.render, '', 2);

        // レンダリング
        renderer.render(scene, scene.camera);

      }


      // 初期化のために実行
      onResize();

      // リサイズイベント発生時に実行
      window.addEventListener('resize', onResize);

      function onResize() {
        // サイズを取得
        const width = window.innerWidth;
        const height = window.innerHeight;
        // レンダラーのサイズを調整する
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(width, height);
        // カメラのアスペクト比を正す
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
      }

    }
  </script>
 </head>

 <body>
  <!-- Three.js用のcanvasタグ -->
  <canvas id="myCanvas" style="position: absolute; top: 0; left: 0;"></canvas>

  <!-- 親のタグの基準点をリセット -->
  <div style="position:relative; overflow: hidden; width: 960px; height: 540px;">
    <!-- 座標表示用のdivタグ -->
    <pre id="hud" style="position: absolute; top: 0; left: 0; color:gray; font-size:9px"></pre>
  </div>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

	<script src="js/controls/OrbitControls.js"></script>
	<script src="js/loaders/TDSLoader.js"></script>
	<script src="js/loaders/ColladaLoader.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<style>
	body {
	margin: 0;
	overflow: hidden;
	}
	</style>
	<script>
	/**
	* マグマ
	*/
	class Magma extends THREE.Object3D {

	/**
	* コンストラクタ
	*/
	constructor() {
	super();


	let loader = new THREE.TextureLoader();
	this._map = loader.load("./assets/texture/magma.png");
	this._map.wrapS = this._map.wrapT = THREE.RepeatWrapping;

	// テクスチャーをあてた球のMeshを作成します。
	const mesh = new THREE.Mesh(
	new THREE.SphereGeometry(10, 20, 20),
	new THREE.MeshBasicMaterial({ map: this._map })
	);

	this.add(mesh);


	}

	/**
	* 更新処理
	*/
	update() {
	// 毎フレーム位置を0.005ずつ動かす。
	this._map.offset.x += 0.005;
	this._map.offset.y += 0.005;

	}
	}

	/**
	* シーン
	*/
	class GameScene extends THREE.Scene {
	constructor() {
	super();

	this._frame = 0;

	// カメラを作成
	this.camera = new THREE.PerspectiveCamera(45, 1.0);
	// this.camera.position.set(0, 0, -100);
	this.camera.position.y = 10;
	this.camera.position.x = 50;
	this.camera.position.z = 50;
	this.camera.lookAt(new THREE.Vector3(0, 0, 0));

	// ヘルパー
	var dir = new THREE.Vector3(1, 0, 0);
	var origin = new THREE.Vector3(0, 0, 0);
	var length = 10;
	var hex = 0xffff00;
	var arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex);
	this.add(arrowHelper);

	// 平行光源
	const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
	directionalLight.position.set(1, 1, 1);
	this.add(directionalLight);

	// 環境光源
	const ambientLight = new THREE.AmbientLight(0x333333);
	this.add(ambientLight);

	// 地面
	const plane = new THREE.GridHelper(1000, 20);
	plane.position.y = -80;
	this.add(plane);

	// *****

	this.magma = new Magma();
	this.add(this.magma);

	// *****

	}

	update() {
	this.magma.update();

	}


	}
	</script>

	<script>
	// 2018-11-13 8:30 -

	let radius = 150;
	let rot = 0;

	// ページの読み込みを待つ
	window.addEventListener('load', init);


	function init() {


	// サイズを指定
	const width = 500;
	const height = 500;

	// レンダラーを作成
	const renderer = new THREE.WebGLRenderer({
	canvas: document.querySelector('#myCanvas'),
	antialias: true
	});



	// シーンを作成
	const scene = new GameScene();
	// フォグを設定
	// scene.fog = new THREE.Fog(0xF9F9F9, 50, 100);


	// ********************************************
	// ここに書く




	// ********************************************
	// フレームレートの数値を画面に表示
	const stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.left = '0px';
	stats.domElement.style.bottom = '100px';

	document.body.appendChild(stats.domElement);
	// ********************************************


	tick();

	const camera = scene.camera;

	function tick() {

	scene.update();


	requestAnimationFrame(tick);


	stats.update();
	document.getElementById('hud').innerHTML = JSON.stringify(renderer.info.render, '', 2);

	// レンダリング
	renderer.render(scene, scene.camera);

	}


	// 初期化のために実行
	onResize();

	// リサイズイベント発生時に実行
	window.addEventListener('resize', onResize);

	function onResize() {
	// サイズを取得
	const width = window.innerWidth;
	const height = window.innerHeight;
	// レンダラーのサイズを調整する
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(width, height);
	// カメラのアスペクト比を正す
	camera.aspect = width / height;
	camera.updateProjectionMatrix();
	}

	}
	</script>
	</head>

	<body>
	<!-- Three.js用のcanvasタグ -->
	<canvas id="myCanvas" style="position: absolute; top: 0; left: 0;"></canvas>

	<!-- 親のタグの基準点をリセット -->
	<div style="position:relative; overflow: hidden; width: 960px; height: 540px;">
	<!-- 座標表示用のdivタグ -->
	<pre id="hud" style="position: absolute; top: 0; left: 0; color:gray; font-size:9px"></pre>
	</div>
	</body>

	</html>