本文主要為大家詳細介紹了Three.js基礎學習教程,具有一定的參考價值,有興趣的小夥伴們可以參考一下,希望能幫助到大家。
一、Three.js官網及使用Three.js必備的三個條件
1.Three.js 官網https://threejs.org/
2.使用Three.js必備的三個條件
(To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.)
大致意思是使用three.js可以實現任何顯示的東西,必須滿足三個條件: a scene場景、a camera相機、a renderer渲染器. 三者缺一不可。
二、使用Three.js必備三個條件(a scene場景、a camera相機、a renderer渲染器)之間的關係
#如上圖所示,來說明a scene場景、a camera相機、a renderer渲染器三者之間關係[/code]
1.場景scene是一個物體的容器【通俗理解裝東西的嘛】,開發者可以將需要的角色放入場景中,例如蘋果,葡萄。同時,角色本身也管理著在場景中的位置。
2.相機camera的作用就是面對場景,在場景中取一個合適的景,把它拍下來。 【可以想像成人的眼睛】
3.渲染器renderer的作用就是將相機拍下來的圖片,放到瀏覽器中去顯示
三、透過上述理論來實踐官網案例
效果圖如下
#官網案例實作原始碼
<html> <head> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="./lib/three.js"></script> <script> //创建一个场景对象 var scene = new THREE.Scene(); //创建一个相机对象 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); //创建一个渲染器对象 var renderer = new THREE.WebGLRenderer(); //设置画布尺寸 renderer.setSize( window.innerWidth, window.innerHeight ); //设置画布色 renderer.setClearColor(0x00AABB, 1.0); //将渲染画布添加到浏览器中,以便后面剩放相机拍下的景 document.body.appendChild( renderer.domElement ); //创建一个几何体长、宽、高分别为1几何体对象 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //材料、皮肤 var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); //将material材料添加到几何体geometry,产生新的对象几何体cube var cube = new THREE.Mesh( geometry, material ); //将几何体添加至场景中 scene.add( cube ); //设置相机z轴,垂直电脑屏幕位置 camera.position.z = 5; var render = function () { /*requestAnimationFrame( render ); //循环渲染 cube.rotation.x += 0.1; //x轴每秒旋转60次 cube.rotation.y += 0.1;//y轴每秒旋转60次*/ renderer.render(scene, camera); //实时将相机拍下的几何体渲染到场景中 }; render(); </script> </body> </html>
透過官網案例不難發現,camera照相機預設的觀察方向是螢幕的方向(z軸負方向),當變化座標以後,就要將照相機指向原點,才能觀察到物體
z軸負方向? ? ?因此這裡很有必要說說三維座標(如下圖)
照相機指向原點? ? ?來說說相機camera相機(很重要!!想像一下人看不到東西是什麼感覺).
案例中採用透視相機(從視點開始越近的物體越大、遠處的物體繪製的較小的一種方式、和日常生活中我們看物體的方式是一致的。
new THREE.PerspectiveCamera(fov, aspect , near,far) 透視相機
視野角:fov 這裡視野角(有的地方叫拍攝距離)越大,場景中的物體越小,視野角越小,場景中的物體越大縱橫比:aspect相機離視體積最近的距離:near
相機離視體積最遠的距離:far
綜上,相信結合上述三維座標、相機圖理解相機、就應該變得很簡單咯哦.接下來接著修改上述案例(說明後面案例滑鼠滾動放大縮小、三維旋轉都是基於相機來實現的)
利用[lookAt]方法來設定相機的視野中心。 “lookAt()”的參數是一個屬性包含中心座標“x”“y”“z”的物件。
設定相機的上方向為正方向y軸camera.up.x = 0; camera.up.y = 1/*相機朝向--相機上方為y軸*/; camera. up.z = 0;五、實現旋轉立方體
#旋轉動畫原理相機圍繞y軸旋轉,不斷修改相機x、z軸位置,並且保持場景中的物件一直再相機的視野中,即時將相機拍攝下來的圖片,放到瀏覽器中去顯示
//相机围绕y轴旋转,不断修改相机x、z轴位置,并且保持场景中的物体一直再相机的视野中 //实时渲染成像 function animation(){ var timer = Date.now()*0.0001; camera.position.x = Math.cos(timer)*100; camera.position.z = Math.sin(timer)*100; camera.lookAt(scene.position); //设置相机视野中心 renderer.render(scene, camera); requestAnimationFrame(animation);//渲染回调函数 }實現效果圖如下所示
#
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>旋转立方体 </title> <style> #canvas-frame { width: 100%; height: 600px; } </style> </head> <body onload="threeStart()"> <p id="canvas-frame" ></p> </body> <script type="text/javascript" src="./lib/three.js" ></script> <script type="text/javascript"> var renderer, //渲染器 width = document.getElementById('canvas-frame').clientWidth, //画布宽 height = document.getElementById('canvas-frame').clientHeight; //画布高 //初始化渲染器 function initThree(){ renderer = new THREE.WebGLRenderer({ antialias : true //canvas: document.getElementById('canvas-frame') }); renderer.setSize(width, height); renderer.setClearColor(0xFFFFFF, 1.0); document.getElementById('canvas-frame').appendChild(renderer.domElement); renderer.setClearColor(0xFFFFFF, 1.0); } //初始化场景 var scene; function initScene(){ scene = new THREE.Scene(); } var camera; function initCamera() { //透视相机 camera = new THREE.PerspectiveCamera(45, width/height , 1, 10000); camera.position.x = 50; camera.position.y = 150; camera.position.z =150; camera.up.x = 0; camera.up.y = 1; //相机朝向--相机上方为y轴 camera.up.z = 0; camera.lookAt({ //相机的中心点 x : 0, y : 0, z : 0 }); // camera 正交相机 /*camera = new THREE.OrthographicCamera(-300, 300, 100, -100, 1, 10000); camera.position.x = 250; camera.position.y = 100; camera.position.z = 1800; camera.up.x = 0; camera.up.y = 1; //相机朝向--相机上方为y轴 camera.up.z = 0; camera.lookAt({ //相机的中心点 x : 0, y : 0, z : 0 });*/ } function initLight(){ // light--这里使用环境光 //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/ //light.position.set(600, 1000, 800); var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源 light.position.set(600, 1000, 800); //使用Ambient Light时可以忽略方向和角度,只考虑光源的位置 scene.add(light); } function initObject(){ //初始化对象 //初始化地板 initFloor(); } function initGrid(){ //辅助网格 var helper = new THREE.GridHelper( 1000, 50 ); helper.setColors( 0x0000ff, 0x808080 ); scene.add( helper ); } function initFloor(){ //创建一个立方体 var geometry = new THREE.BoxGeometry(80, 20, 80); for ( var i = 0; i < geometry.faces.length; i += 2 ) { var hex = Math.random() * 0xffffff; geometry.faces[ i ].color.setHex( hex ); geometry.faces[ i + 1 ].color.setHex( hex ); } var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} ); //将material材料添加到几何体geometry var mesh = new THREE.Mesh(geometry, material); mesh.position = new THREE.Vector3(0,0,0); scene.add(mesh); } //初始化页面加载 function threeStart(){ //初始化渲染器 initThree(); //初始化场景 initScene(); //初始透视化相机 initCamera(); //初始化光源 //initLight(); //模型对象 initObject(); //初始化网格辅助线 initGrid(); //renderer.render(scene, camera); //实时动画 animation(); } /* * 旋转原理 * 相机围绕y轴旋转 * 不断修改相机x、z轴位置,并且保持场景中的物体一直再相机的视野中, * 实时将相机拍摄下来的图片,放到浏览器中去显示 */ function animation(){ //渲染成像 var timer = Date.now()*0.0001; camera.position.x = Math.cos(timer)*100; //相机位置x轴方向 camera.position.z = Math.sin(timer)*100; //相机位置y轴方向 //设置相机视野中心 camera.lookAt(scene.position); //渲染成像 renderer.render(scene, camera); //渲染回调animation函数 requestAnimationFrame(animation); } </script> </html>至此完畢,附上個人繪製想法流程圖
#Three.js入門之hello world以及如何繪製線
#以上是Three.js基礎入門學習教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!