場景
Three.js
Three.js是基於原生WebGL封裝運行的三維引擎，在所有WebGL引擎中，Three.js是國內文資料最多、使用最廣泛的三維引擎。
Three.js官網：
Three.js中文網:
Three.js電子書：
http://www.webgl3d.cn/Three.js/
需要理解以下幾個概念(對象)
場景-scene-它將包含我們所有的元素，如物體，攝像機和燈光
相機-camera-它定義了我們正在看的地方
渲染器-renderer-渲染器-負責計算指定相機角度下，瀏覽器中scene的樣子
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
首先搭建一個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, to
use 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/
如果下載之后因為版本問題沒有效果，可以從這里下載
https://download.csdn.net/download/BADAO_LIUMANG_QIZHI/20550443
然后搭建js與html文件的路徑
首先頁面上放置一個div用來顯示
<!-- 顯示的div --> <div id="WebGL-output"> </div>
然后設置樣式
<style> body { /* 將邊距設置為0，溢出設置為隱藏，以實現全屏顯示 */ margin: 0; overflow: hidden; } </style>
引入three.js文件
<script type="text/javascript" src="./js/three.js"></script>
在js代碼初始化的方法中
創建一個場景
// 創建一個場景，它將包含我們所有的元素，如物體，攝像機和燈光 var scene = new THREE.Scene();
再創建一個相機
// 創建一個相機，它定義了我們正在看的地方 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
然后創建一個渲染器
// 創建渲染器並設置大小 var renderer = new THREE.WebGLRenderer(); //將renderer的背景色設置為接近白色 renderer.setClearColorHex(); renderer.setClearColor(new THREE.Color(0xEEEEEE)); //設置大小 renderer.setSize(window.innerWidth, window.innerHeight);
然后就是創建需要顯示的元素了，這里需要顯示坐標軸和一個球體
首先新建一個坐標軸並添加進場景
// 創建坐標軸對象 var axes = new THREE.AxisHelper(20); //將坐標軸添加進場景 scene.add(axes);
然后創建一個球體並設置球體的屬性和坐標
在這里還需要用到材質對象， 設置材質顯示邊框，並將材質與球體對象進行合並
// 創建一個球體 var sphereGeometry = new THREE.SphereGeometry(4, 20, 20); //把線框屬性wireframe設置為true var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true}); var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // 設置球體的坐標 sphere.position.x = 20; sphere.position.y = 4; sphere.position.z = 2; // 添加進場景 scene.add(sphere);
最后將其添加進場景。
然后定義相機的坐標
// 定義相機的坐標，即懸掛在場景的上方 camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; //為了確保相機能夠拍攝到這些物體，使用lookat函數指向場景的中心 camera.lookAt(scene.position);
最后與要顯示的div進行綁定，執行渲染
// 將renderer的輸出掛接到HTML終點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 {
/* 將邊距設置為0，溢出設置為隱藏，以實現全屏顯示 */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 顯示的div -->
<div id="WebGL-output">
</div>
<script type="text/javascript">
// 初始化的方法
function init() {
// 創建一個場景，它將包含我們所有的元素，如物體，攝像機和燈光
var scene = new THREE.Scene();
// 創建一個相機，它定義了我們正在看的地方
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 創建渲染器並設置大小
var renderer = new THREE.WebGLRenderer();
//將renderer的背景色設置為接近白色
renderer.setClearColorHex();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
//設置大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 創建坐標軸對象
var axes = new THREE.AxisHelper(20);
//將坐標軸添加進場景
scene.add(axes);
// 創建一個球體
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
//把線框屬性wireframe設置為true
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// 設置球體的坐標
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
// 添加進場景
scene.add(sphere);
// 定義相機的坐標，即懸掛在場景的上方
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
//為了確保相機能夠拍攝到這些物體，使用lookat函數指向場景的中心
camera.lookAt(scene.position);
// 將renderer的輸出掛接到HTML終點div元素
document.getElementById("WebGL-output").appendChild(renderer.domElement);
// 渲染場景
renderer.render(scene, camera);
}
window.onload = init;
</script>
</body>
</html>
效果
