การใช้ three.js สร้างโลก 3D ในเว็บไซต์

three.js เป็น js library สำหรับทำ 3D บนเว็บไซต์ บทความนี้จะนำเอาความสารถของ library ตัวนี้มาใช้กันครับ

ตัวอย่างครับ

ส่วนที่แสดงผลจะเป็น canvas ซึ่งใช้ three.js สร้างขี้นมาครับ
1 สร้าง object ที่เป็นวงกลม โลก + เมฆ
2 ใส่พื้นผิวให้กับ object ที่สร้างขี้น(คือรูปแผนที่โลก น้ำทะเล เป็นต้น)
3 ใส่ camera หรือมุมมองซึ่งก็จะมีหลายแบบสามารถไปดูได้ที่เว็บไซต์  https://threejs.org/docs/#api/cameras/Camera
4 ใส่แสง
5 ใส่ event control

ส่วน CODE ของ js ซึ่งผมจะ comment ให้ในส่วนต่างๆครับ

<script>
  
  
(function () {

	var worldgl = document.getElementById('world'); // เก็บ object ในตัวแปล
         
        
	if (!Detector.webgl) {
		Detector.addGetWebGLMessage(worldgl);
		return;
	}

	var width  = window.innerWidth,	height = window.innerHeight; // กำหนดความกว้างสูงเท่ากับหน้าจอเว็บ

	// Earth params
	var radius   = 0.5,segments = 32,rotation = 6;   

	var scene = new THREE.Scene();
        
        // สร้าง camera ใส่อัตราส่วนและมุมมอง
	var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
	camera.position.z = 1.5;

        
	var renderer = new THREE.WebGLRenderer();
	renderer.setSize(width, height);

	scene.add(new THREE.AmbientLight(0x333333));
        
        // สร้างแสงและกำหนดตำแหน่ง
	var light = new THREE.DirectionalLight(0xffffff, 1);
	light.position.set(5,3,5);
	scene.add(light);

         // สร้าง object โลก
    var sphere = createSphere(radius, segments);
	sphere.rotation.y = rotation; 
	scene.add(sphere)
        // สร้าง object เมฆ
    var clouds = createClouds(radius, segments);
	clouds.rotation.y = rotation;
	scene.add(clouds)
        // สร้าง bg ที่เป็นดาว
	var stars = createStars(90, 64);
	scene.add(stars);
        // เพิ่ม event trackball ที่ทำให้หมุนได้
	var controls = new THREE.TrackballControls(camera);

	worldgl.appendChild(renderer.domElement);

	render();

	function render() {
		controls.update();
		sphere.rotation.y += 0.0005; // เวลาการหมุนโลก
		clouds.rotation.y += 0.0005; // เวลาการหมุนเมฆ		
		requestAnimationFrame(render);
		renderer.render(scene, camera);
	}

         // function สร้างโลก
	function createSphere(radius, segments) {
		return new THREE.Mesh(
			new THREE.SphereGeometry(radius, segments, segments),
			new THREE.MeshPhongMaterial({
				map:         THREE.ImageUtils.loadTexture('map.jpg'),
		  	bumpMap:     THREE.ImageUtils.loadTexture('map_bum.jpg'),
				bumpScale:   0.005,
        transparent: true,
		    specularMap: THREE.ImageUtils.loadTexture('wather.png'),
		    specular:    new THREE.Color('gray')								
			})
		);
	}
        // function สร้างเมฆ
	function createClouds(radius, segments) {
		return new THREE.Mesh(
			new THREE.SphereGeometry(radius + 0.003, segments, segments),			
			new THREE.MeshPhongMaterial({     
				map:         THREE.ImageUtils.loadTexture('clouds.png'), 
				transparent: true
			})
		);		
	}
        // function สร้างดวงดาว
	function createStars(radius, segments) {
		return new THREE.Mesh(
			new THREE.SphereGeometry(radius, segments, segments), 
			new THREE.MeshBasicMaterial({
				map:  THREE.ImageUtils.loadTexture('galaxy_starfield.png'), 
				side: THREE.BackSide
			})
		);
	}

}());
  
  </script>

SOURCE CODE DOWNLOAD

สามารถเอาโค้ตไปลองเล่นดูครับ