three.js 概述
1-three.js 是什么？
- three.js是用JavaScript編寫的WebGL第三方庫;
- three.js 提供了非常多的3D顯示和編輯功能;
- 具體而言，three.js 是一款運行在瀏覽器中的 3D 引擎，可以用three.js 創(chuàng)建各種三維場景，并對其進行編輯;
- 在three.js 的官網(wǎng)上看到許多精彩的演示和文檔
- three.js 官網(wǎng)：https://threejs.org/
- github：https://github.com/mrdoob/three.js
2-three 的優(yōu)缺點
優(yōu)點：
- 對WebGL 進行了深度封裝，可以提高常見項目的開發(fā)速度。
- 入門簡單，精通較難，需圖形學基礎(chǔ)。
- 具備較好的生態(tài)環(huán)境，文檔詳細，持續(xù)更新，在國內(nèi)的使用者很多，就業(yè)需求也很大。
缺點：
- 在Node.js 中引用困難。在 Node.js v12 中， three.js 的核心庫可使用 require(‘three’) 來作為 CommonJS module 進行導入。然而，大多數(shù)在 examples/jsm 中的示例組件并不能夠這樣。
- 個別功能封裝過緊，限制了其靈活性。
3-three 適合做什么
- three.js 適合三維項目的開發(fā)和展示，比如VR、AR、三維產(chǎn)品展示、三維家居設(shè)計……
- three.js 也可以做游戲開發(fā)，只是相較于Babylon，缺少了物理引擎。
創(chuàng)建第一個3D應(yīng)用-旋轉(zhuǎn)的立方體
1.建立一個HTML文件，引入three
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>立方體</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="https://unpkg.com/three/build/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>
2.創(chuàng)建一個場景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
- 建立了場景、相機和渲染器，對于其中參數(shù)的意思，可以去官網(wǎng)查閱文檔。
3.創(chuàng)建立方體
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
4.在連續(xù)渲染方法里旋轉(zhuǎn)立方體
animate()
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
- 現(xiàn)在已經(jīng)成功完成了第一個Three.js應(yīng)用程序
文章來源地址http://www.zghlxwxcb.cn/news/detail-679792.html
文章來源：http://www.zghlxwxcb.cn/news/detail-679792.html
到了這里，關(guān)于three.js(一)：認識three.js并創(chuàng)建第一個3D應(yīng)用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
