Three.js 教程
生活随笔
收集整理的這篇文章主要介紹了
Three.js 教程
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
了解Three.js
Threejs是一款WebGL三維引擎，在所有WebGL引擎中，Three.js是國內文資料最多、使用最廣泛的三維引擎。
如何學習Three.js
當你開始思考你應該如何學習WebGL和Three.js的時候，相信你至少對相關的關鍵詞了解過了，希望通過WebGL或Three.js實現你想要的Web3D功能。
也許你也會去思考通過WebGL或Three.js能不能實現你想要的功能，也許你是因為領導臨時分配任務，還不太清楚WebGL和Three.js是什么，個人建議是不要做過多思考，先看看相關的具體技術教程，隨著時間的推移你自然會明白Canvas、WebGl、Three.js等關鍵詞指什么。
如果你急于要實現一個Web3D功能，時間有限，也沒有圖形學基礎，個人建議直接學習先Three.js即可，以后想深入掌握，可以學習原生WebGL和圖形學相關知識。
如果時間比較充足，又希望有更大的成長空間，學習底層原生WebGL肯定是必要的，可以WebGL和Threejs結合著學習，順序也不是非常重要。
下面直接進入教程
創建第一個Three.js場景
創建場景對象Scene
var scene = new THREE.Scene();
創建場景光源
//點光源var point = new THREE.PointLight(0xffffff); point.position.set(400, 200, 300); //點光源位置 scene.add(point); //點光源添加到場景中 //環境光var ambient = new THREE.AmbientLight(0x444444); scene.add(ambient);相機設置
var width = window.innerWidth; //窗口寬度 var height = window.innerHeight; //窗口高度 var k = width / height; //窗口寬高比 var s = 200; //三維場景顯示范圍控制系數，系數越大，顯示的范圍越大創建相機對象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); camera.position.set(200, 300, 200); //設置相機位置 camera.lookAt(scene.position); //設置相機方向(指向的場景對象)創建渲染器對象
var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height);//設置渲染區域尺寸 renderer.setClearColor(0xb9d3ff, 1); //設置背景顏色 document.body.appendChild(renderer.domElement);執行渲染操作 指定場景、相機作為參數
renderer.render(scene, camera);附上源碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title></title><style>body {margin: 0;overflow: hidden;/* 隱藏body窗口區域滾動條 */}</style><!--引入three.js三維引擎--><script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script> </head> <body><script>/*** 創建場景對象Scene*/var scene = new THREE.Scene();/*** 創建網格模型*/var geometry = new THREE.BoxGeometry(100, 100, 100); //創建一個立方體幾何對象Geometryvar material = new THREE.MeshLambertMaterial({color: 0x0000ff}); //材質對象Materialvar mesh = new THREE.Mesh(geometry, material); //網格模型對象Meshscene.add(mesh); //網格模型添加到場景中/*** 光源設置*///點光源var point = new THREE.PointLight(0xffffff);point.position.set(400, 200, 300); //點光源位置scene.add(point); //點光源添加到場景中//環境光var ambient = new THREE.AmbientLight(0x444444);scene.add(ambient);/*** 相機設置*/var width = window.innerWidth; var height = window.innerHeight; var k = width / height; var s = 200; //創建相機對象var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);camera.position.set(200, 300, 200);camera.lookAt(scene.position);/*** 創建渲染器對象*/var renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);//設置渲染區域尺寸renderer.setClearColor(0xb9d3ff, 1); //設置背景顏色document.body.appendChild(renderer.domElement); //body元素中插入canvas對象// 渲染函數function render() {renderer.render(scene,camera);//執行渲染操作mesh.rotateY(0.01);//每次繞y軸旋轉0.01弧度requestAnimationFrame(render);//請求再次執行渲染函數render，渲染下一幀}render();</script> <div class="" style="position:absolute;top:0px;left:0px;background: rgba(0, 0, 0, 0.5);padding:10px 20px;"><a href="http://www.yanhuangxueyuan.com/Three.js/" target="_blank" style="color:#fff;text-decoration: none;">案例對應電子書地址</a></div> </body></html>總結
以上是生活随笔為你收集整理的Three.js 教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 通达信程序化交易接口的设计方案
- 下一篇： JESD204接口调试总结——Xilin