Three.js入门和搭建HelloWorld
場景
Three.js
Three.js是基于原生WebGL封裝運(yùn)行的三維引擎，在所有WebGL引擎中，Three.js是國內(nèi)文資料最多、使用最廣泛的三維引擎。
Three.js官網(wǎng)：
https://threejs.org/
Three.js中文網(wǎng):
http://www.webgl3d.cn/
Three.js電子書：
http://www.webgl3d.cn/Three.js/
需要理解以下幾個(gè)概念(對象)
場景-scene-它將包含我們所有的元素，如物體，攝像機(jī)和燈光
相機(jī)-camera-它定義了我們正在看的地方
渲染器-renderer-渲染器-負(fù)責(zé)計(jì)算指定相機(jī)角度下，瀏覽器中scene的樣子
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。
實(shí)現(xiàn)
首先搭建一個(gè)html的模板
<!DOCTYPE html><html><head><title>公眾號:霸道的程序猿</title><script type="text/javascript" src=".js/three.js"></script><style>body {/* set margin to 0 and overflow to hidden, touse the complete page */margin: 0;overflow: hidden;}</style> </head> <body><!-- Div which will hold the Output --> <div id="WebGL-output"> </div><!-- Javascript code that runs our Three.js examples --> <script type="text/javascript">// once everything is loaded, we run our Three.js stuff.function init() {// here we'll put the Three.js stuff}window.onload = init</script> </body> </html>然后下載three.js引擎文件
可以從github上的build目錄中下載尋找
https://github.com/mrdoob/three.js/
?
如果下載之后因?yàn)榘姹締栴}沒有效果，可以從這里下載
https://download.csdn.net/download/BADAO_LIUMANG_QIZHI/20550443
然后搭建js與html文件的路徑
?首先頁面上放置一個(gè)div用來顯示
<!-- 顯示的div --> <div id="WebGL-output"> </div>然后設(shè)置樣式
??? <style>body {/* 將邊距設(shè)置為0，溢出設(shè)置為隱藏，以實(shí)現(xiàn)全屏顯示 */margin: 0;overflow: hidden;}</style>引入three.js文件
<script type="text/javascript" src="./js/three.js"></script>在js代碼初始化的方法中
創(chuàng)建一個(gè)場景
??????? // 創(chuàng)建一個(gè)場景，它將包含我們所有的元素，如物體，攝像機(jī)和燈光var scene = new THREE.Scene();再創(chuàng)建一個(gè)相機(jī)
??????? // 創(chuàng)建一個(gè)相機(jī)，它定義了我們正在看的地方var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);然后創(chuàng)建一個(gè)渲染器
??????? // 創(chuàng)建渲染器并設(shè)置大小var renderer = new THREE.WebGLRenderer();//將renderer的背景色設(shè)置為接近白色renderer.setClearColorHex();renderer.setClearColor(new THREE.Color(0xEEEEEE));//設(shè)置大小renderer.setSize(window.innerWidth, window.innerHeight);然后就是創(chuàng)建需要顯示的元素了，這里需要顯示坐標(biāo)軸和一個(gè)球體
首先新建一個(gè)坐標(biāo)軸并添加進(jìn)場景
??????? // 創(chuàng)建坐標(biāo)軸對象var axes = new THREE.AxisHelper(20);//將坐標(biāo)軸添加進(jìn)場景scene.add(axes);然后創(chuàng)建一個(gè)球體并設(shè)置球體的屬性和坐標(biāo)
在這里還需要用到材質(zhì)對象， 設(shè)置材質(zhì)顯示邊框，并將材質(zhì)與球體對象進(jìn)行合并
??????? // 創(chuàng)建一個(gè)球體var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);//把線框?qū)傩詗ireframe設(shè)置為truevar sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);// 設(shè)置球體的坐標(biāo)sphere.position.x = 20;sphere.position.y = 4;sphere.position.z = 2;// 添加進(jìn)場景scene.add(sphere);最后將其添加進(jìn)場景。
然后定義相機(jī)的坐標(biāo)
??????? // 定義相機(jī)的坐標(biāo)，即懸掛在場景的上方camera.position.x = -30;camera.position.y = 40;camera.position.z = 30;//為了確保相機(jī)能夠拍攝到這些物體，使用lookat函數(shù)指向場景的中心camera.lookAt(scene.position);最后與要顯示的div進(jìn)行綁定，執(zhí)行渲染
??????? // 將renderer的輸出掛接到HTML終點(diǎn)div元素document.getElementById("WebGL-output").appendChild(renderer.domElement);// 渲染場景renderer.render(scene, camera);完整的html的代碼
<!DOCTYPE html><html><head><title>你好 Three.js</title><script type="text/javascript" src="./js/three.js"></script><style>body {/* 將邊距設(shè)置為0，溢出設(shè)置為隱藏，以實(shí)現(xiàn)全屏顯示 */margin: 0;overflow: hidden;}</style> </head> <body><!-- 顯示的div --> <div id="WebGL-output"> </div><script type="text/javascript">// 初始化的方法function init() {// 創(chuàng)建一個(gè)場景，它將包含我們所有的元素，如物體，攝像機(jī)和燈光var scene = new THREE.Scene();// 創(chuàng)建一個(gè)相機(jī)，它定義了我們正在看的地方var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 創(chuàng)建渲染器并設(shè)置大小var renderer = new THREE.WebGLRenderer();//將renderer的背景色設(shè)置為接近白色renderer.setClearColorHex();renderer.setClearColor(new THREE.Color(0xEEEEEE));//設(shè)置大小renderer.setSize(window.innerWidth, window.innerHeight);// 創(chuàng)建坐標(biāo)軸對象var axes = new THREE.AxisHelper(20);//將坐標(biāo)軸添加進(jìn)場景scene.add(axes);// 創(chuàng)建一個(gè)球體var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);//把線框?qū)傩詗ireframe設(shè)置為truevar sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);// 設(shè)置球體的坐標(biāo)sphere.position.x = 20;sphere.position.y = 4;sphere.position.z = 2;// 添加進(jìn)場景scene.add(sphere);// 定義相機(jī)的坐標(biāo)，即懸掛在場景的上方camera.position.x = -30;camera.position.y = 40;camera.position.z = 30;//為了確保相機(jī)能夠拍攝到這些物體，使用lookat函數(shù)指向場景的中心camera.lookAt(scene.position);// 將renderer的輸出掛接到HTML終點(diǎn)div元素document.getElementById("WebGL-output").appendChild(renderer.domElement);// 渲染場景renderer.render(scene, camera);}window.onload = init;</script> </body> </html>效果
?
總結(jié)
以上是生活随笔為你收集整理的Three.js入门和搭建HelloWorld的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Docker可视化工具portainer
- 下一篇： Three.js中显示坐标轴、平面、球体