TakizawaAkira/ThreeJSのランダムに地面生成

## ThreeJSのランダムに地面生成
<!--
lib\three.js-master\build\three.min.js
lib\three.js-master\examples\fonts\helvetiker_regular.typeface.js
lib\three.js-master\examples\js\controls\OrbitControls.js
-->

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Three.js Pratice</title>
</head>
<body>
  <div id="stage"></div>
  <script src="lib\three.js-master\build\three.min.js"></script>
  <script>
  (function() {
    'use strict';

    var scene;
    var box; // mesh
    var camera;
    var renderer;
    var width = 480;
    var height = 320;

    // scene ステージ
    scene = new THREE.Scene();

    // mesh 物体

    // - geometry 形状
    // - material 材質
    /*
      BoxGeometry箱型のgeometry
      マテリアルには複数の種類があるがMeshLambertMaterialを使用
      色は16進数で0x******で指定
    */
    var geometry = new THREE.PlaneGeometry( 160, 160, 64, 64 );
    for (var i = 0; i < geometry.vertices.length; i++ ) {
        var vertex = geometry.vertices[ i ];
        vertex.z = Math.floor( Math.random() * 10 ) ;
    }

    var map1 = THREE.ImageUtils.loadTexture( 'img/beacon.png' );
    var material = new THREE.MeshPhongMaterial( { /*color: 0xff0000,*/ map: map1 } );
    var mesh = new THREE.Mesh( geometry, material );
    scene.add(mesh); //シーンに追加

    // camera
    /*
    カメラの種類が複数ありPerspectiveCameraは遠近のあるカメラ
    45度で1の距離から1000までを指定
    */
    camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
    camera.position.set(80, 50, 100); //カメラ座標指定
    camera.lookAt(scene.position);  //向いている方向

    // renderer
    /*
    WebGLRendererを仕様してantialiasをtrueにして滑らかに描画
    setPixelRatio(window.devicePixelRatio)で解像度の高いディスプレイに対応
    */
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(width, height); //サイズ指定
    renderer.setClearColor(0xefefef);
    renderer.setPixelRatio(window.devicePixelRatio);

    //光源の追加
    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( 0, 0.7, 0.7 );
    scene.add( directionalLight );

    document.getElementById('stage').appendChild(renderer.domElement);

    //renderer.render(scene, camera);

    (function renderLoop () {
      requestAnimationFrame( renderLoop );
      mesh.rotation.set(
        mesh.rotation.x = Math.PI / -2,
        0,
        mesh.rotation.z + 0.01
      )
      renderer.render( scene, camera );
    })();

  })();
  </script>
</body>
</html>

## ThreeJS描画基礎
<!--
lib\three.js-master\build\three.min.js
lib\three.js-master\examples\fonts\helvetiker_regular.typeface.js
lib\three.js-master\examples\js\controls\OrbitControls.js
-->

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Three.js Pratice</title>
</head>
<body>
  <div id="stage"></div>
  <script src="lib\three.js-master\build\three.min.js"></script>
  <script>
  (function() {
    'use strict';

    var scene;
    var box; // mesh
    var camera;
    var renderer;
    var width = 500;
    var height = 250;

    // scene ステージ
    scene = new THREE.Scene();

    // mesh 物体

    // - geometry 形状
    // - material 材質
    /*
      BoxGeometry箱型のgeometry
      マテリアルには複数の種類があるがMeshLambertMaterialを使用
      色は16進数で0x******で指定
    */
    box = new THREE.Mesh(
      new THREE.BoxGeometry(50, 50, 50),
      new THREE.MeshLambertMaterial({ color: 0xff0000})
    );
    box.position.set(0, 0, 0); //座標指定
    scene.add(box); //シーンに追加

    // camera
    /*
    カメラの種類が複数ありPerspectiveCameraは遠近のあるカメラ
    45度で1の距離から1000までを指定
    */
    camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
    camera.position.set(200, 100, 300); //カメラ座標指定
    camera.lookAt(scene.position);  //向いている方向

    // renderer
    /*
    WebGLRendererを仕様してantialiasをtrueにして滑らかに描画
    setPixelRatio(window.devicePixelRatio)で解像度の高いディスプレイに対応
    */
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(width, height); //サイズ指定
    renderer.setClearColor(0xefefef);
    renderer.setPixelRatio(window.devicePixelRatio);

    //光源の追加
    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( 0, 0.7, 0.7 );
    scene.add( directionalLight );

    document.getElementById('stage').appendChild(renderer.domElement);

    renderer.render(scene, camera);

  })();
  </script>
</body>
</html>
	<!--
	lib\three.js-master\build\three.min.js
	lib\three.js-master\examples\fonts\helvetiker_regular.typeface.js
	lib\three.js-master\examples\js\controls\OrbitControls.js
	-->

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>Three.js Pratice</title>
	</head>
	<body>
	<div id="stage"></div>
	<script src="lib\three.js-master\build\three.min.js"></script>
	<script>
	(function() {
	'use strict';

	var scene;
	var box; // mesh
	var camera;
	var renderer;
	var width = 480;
	var height = 320;

	// scene ステージ
	scene = new THREE.Scene();

	// mesh 物体

	// - geometry 形状
	// - material 材質
	/*
	BoxGeometry箱型のgeometry
	マテリアルには複数の種類があるがMeshLambertMaterialを使用
	色は16進数で0x******で指定
	*/
	var geometry = new THREE.PlaneGeometry( 160, 160, 64, 64 );
	for (var i = 0; i < geometry.vertices.length; i++ ) {
	var vertex = geometry.vertices[ i ];
	vertex.z = Math.floor( Math.random() * 10 ) ;
	}

	var map1 = THREE.ImageUtils.loadTexture( 'img/beacon.png' );
	var material = new THREE.MeshPhongMaterial( { /color: 0xff0000,/ map: map1 } );
	var mesh = new THREE.Mesh( geometry, material );
	scene.add(mesh); //シーンに追加

	// camera
	/*
	カメラの種類が複数ありPerspectiveCameraは遠近のあるカメラ
	45度で1の距離から1000までを指定
	*/
	camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
	camera.position.set(80, 50, 100); //カメラ座標指定
	camera.lookAt(scene.position); //向いている方向

	// renderer
	/*
	WebGLRendererを仕様してantialiasをtrueにして滑らかに描画
	setPixelRatio(window.devicePixelRatio)で解像度の高いディスプレイに対応
	*/
	renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(width, height); //サイズ指定
	renderer.setClearColor(0xefefef);
	renderer.setPixelRatio(window.devicePixelRatio);

	//光源の追加
	var directionalLight = new THREE.DirectionalLight( 0xffffff );
	directionalLight.position.set( 0, 0.7, 0.7 );
	scene.add( directionalLight );

	document.getElementById('stage').appendChild(renderer.domElement);

	//renderer.render(scene, camera);

	(function renderLoop () {
	requestAnimationFrame( renderLoop );
	mesh.rotation.set(
	mesh.rotation.x = Math.PI / -2,
	0,
	mesh.rotation.z + 0.01
	)
	renderer.render( scene, camera );
	})();

	})();
	</script>
	</body>
	</html>