การทำ LOGO 3D ในเว็บไซต์ ด้วย three.js

threelogo

การทำ 3d ในบทความนี้จะใช้ library three.js ซึ่งเจะ render โดยใช้ css3 และ webgl ( web gl เป็น 3d Graphic Library ที่ติดมากับเว็บ browser ใหม่ๆ จริงๆ webgl ก็คือ opengl ที่จับยัดเข้ามาใน web browser นั้นเอง)

เราจะมาดูตัวอย่างงานก่อน (ลองใช้ mouse ลาก logo เล่นหรือ scroll zoom )

ขั้นตอนการทำ

1 การเตรียม model สำหรับ อันนี้เป็นวิธีที่ผมใช้นะครับอาจจะใช้ โปรแกรมอื่นทำก็ได้

– download program blender และติดตั้ง

– download ตัว plugin สำหรับ export เป็น jsqon https://github.com/mrdoob/three.js/tree/dev/utils/exporters/blender และทำตามขั้นตอนการ install

– เปิดโปรแกรม blender และสร้างงานจากนั้น export เป็น json.js ออกมา เราก็จะได้ model สำหรับใช้ใน three.js

2 เราจะมาเริ่มเขียน code กันซึ่งจริงๆส่วนสำคัญคงเป็น js ที่ควบคุม

– ทำการ include library ที่ต้องใช้เข้ามา

<script src="three.min.js"></script> // core ของ threejs
<script src="OrbitControls.js"></script>  // controls ในการหมุน

– สร้าง html div ขึ้นมาเพื่อจะให้ script ควบคุม ใช้ id ชื่อ sence

 <div id="sence"></div>

– ใช้ js ในการสร้าง scene, แสง ,camera , import model และ render ตาม comment code ด้านล่าง

      var contentner = document.getElementById('sence');   // get dom content
      var scene = new THREE.Scene(); // สร้าง scene
      var clock = new THREE.Clock();
      scene.fog = new THREE.Fog( 0xffffff, 1, 5000 );
      scene.fog.color.setHSL( 0.6, 0, 1 );   
      
      //  สร้าง camera คือมุมมองนั้นเอง
      var camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 10000 );
      camera.position.x = 0; // set ตำแหน่ง x
      camera.position.z = 11; // set ตำแหน่ง z
      camera.position.y = 10; // set ตำแหน่ง y
      camera.lookAt(new THREE.Vector3(0, 0, 0));
      
      	
      // สร้างตัว render
      var renderer = new THREE.WebGLRenderer({
      alpha: true, // พื้นใส
      antialias: true 
      });
      
      //set size
      renderer.setSize( window.innerWidth, window.innerHeight );
      renderer.shadowMap.enabled = true;
       
      // สร้าง controls สำหรับ หมุน object
      controls = new THREE.OrbitControls( camera ,renderer.domElement);
      controls.maxPolarAngle = 0.9 * Math.PI / 2;  // ความเร็วในการหมุน
      controls.enableZoom = true; // zoom 
      
      // จับ render ยัดใส่ dom ที่เป็น content
      contentner.appendChild(renderer.domElement );

      // load json ที่ได้จากการ export จากขั้นตอนเตรียม model
      var loader = new THREE.JSONLoader();
      loader.load( "unique.json", function(geometry){
          var material = new THREE.MeshLambertMaterial({color: "rgb(234,234,234)",emissive:"rgb(180,180,180)"});
          mesh = new THREE.Mesh(geometry, material);
          scene.add(mesh);
       });
      
       
       // สร้างแสง
       var light = new THREE.PointLight( "rgb(100,100,100)", 1, 11 );
       light.position.set( 4, 1, 1 );
       scene.add( light );
  

       //function สำหรับ render 3d
       var render = function () {
			
       	  requestAnimationFrame( render );
          renderer.render(scene, camera);
	
       };
      

	render();

การใช้ 3d ในเว็บอาจจะยังใช้ได้แต่ browser ใหม่ๆ ลองดูจาก wiki ที่ support https://en.wikipedia.org/wiki/WebGL#Desktop_browsers
ซึ่งหากจะใช้ต้องคำนึงถึง user ที่ใช้ browser เก่าๆหรือ client ที่เครื่องไม่แรง
แต่ในอนาคตคิดว่าคงดีกว่านี้เร็วกว่านี้ น่าจะทำให้การทำเว็บมีความหลากหลายมากขึ้น
หากมีข้อสงสัยหรือติชมอย่างไร comment ได้ครับ

SOURCE CODE