ThingJS 和three.js開發5大概念解析，讓開發早點下班回家！3D 可視化

ThingJS徹底基於3D自主可視化引擎,幾百k大小,卻能迸發出驚人的可視化效果。javascript

ThingJS 3D框架簡化了開發工做，面向對象和模塊化的特色使得網頁代碼更加易於管理和維護，而且提供近200個官方示例，直接獲取API能力，不須要基於3D概念進行開發，適合3D商業項目快速生成！距離您的業務僅一層之隔，是非開發者也容易理解的一種應用方法。java

Three.js是更爲底層的3D渲染器，提供各式各樣的3D開發概念，例如材質、網格、shader、燈光，逐一進行定製化開發，要求程序員要有清晰的設計思路，尤爲是在3D對象類的定義上。程序員

今天一併總結常見的3D開發概念及其使用方法，包括：（1）第一人稱漫遊；（2）圖片紋理；（3）子類與層級關係；（4）線段處理；（5）粒子系統。對於這些內容的解釋和說明，咱們在腳本文件中穿插進行，看看three.js和ThingJS實現過程當中有何區別？app

第一人稱漫遊

它容許用戶經過鍵盤或鼠標對場景進行巡遊控制，ThingJS平臺經過第一人稱行走控件實現。和three.js的代碼量相比，顯然更加輕量化。框架

// 添加控件
var ctrl = null;
var gui = null;
function add_control() {
	if (ctrl) {
		return;
	}

	app.camera.position = [0, 10, 0];// 起始位置 就是攝像機位置, 不設置就會在攝像機位置直接開始
	ctrl = app.addControl(
		new THING.WalkControl({ // 參數能夠動態修改
			walkSpeed: 0.02, // 行走速度
			turnSpeed: 0.25, // 右鍵旋轉速度
			gravity: 29.8, // 物體重量
			eyeHeight: 1.6, // 人高度
			jumpSpeed: 10, // 按空格鍵 跳躍的速度
			enableKeyRotate: false, // 默認不開啓鍵盤控制旋轉
			useCollision: false, // 默認不開啓碰撞檢測
			useGravity: true // 默認開啓重力
		})
	);

圖片紋理

在真實的3D場景中，模型是有紋理的，而不單單是隻有顏色值，Three.js經過ImageUtils.loadTexture方法使用圖片紋理對3D模型進行貼圖，使得模型更接近真實。例如，MeshLambertMaterial（朗勃面）是一種很經常使用的材質，它將使用漫反射的方式引用前面的紋理圖片，最終效果還與光線有關；另一種經常使用的材質是MeshPhongMaterial，它能夠產生鏡面效果。 ThingJS中提供直接貼圖的方式來實現模型紋理，建模師只要導入相似於照片效果的圖形，簡單實現模型的紋理，雖然沒法實現three.js那樣的細節定製化，仍舊能夠改變參數來接近實景效果。ide

// 設置攝像機位置和目標點
	app.camera.position = [24.642510549459775, 4.302692201327658, 16.259715252398298];
	app.camera.target = [16.850313962013193, 0.15861977649910672, 4.364786416484356];

	new THING.widget.Button('建立 Box', function () {
		var box = app.query('#myBox01')[0];
		if (box) return;

		box = app.create({
			type: 'Box',
			id: 'myBox01',
			width: 2.0, // 寬度
			height: 2.0, // 高度
			depth: 2.0, // 深度
			center: 'Bottom', // 中心點
			position: [18, 0, 8],
			style: {
				image: 'images/uv.jpg',
				color: '#ffffff',
			}
		});
	})

	new THING.widget.Button('換 Box 貼圖', function () {
		var imgUrl = 'https://www.thingjs.com/static/images/avatar.png';

		var box = app.query('#myBox01')[0];
		if (box) {
			box.style.image = imgUrl;
		}
	})

子類與層級關係

在此示例中，月亮屬於地球的子類，將跟隨地球一塊兒繞太陽公轉，經過建立子類，無論地球如何運動，月亮將自動跟隨地球，程序不須要再單獨處理這部份內容。層級關係是計算機動畫的重要概念之一。好比骨骼動畫，對於人體動畫，小腿骨骼將跟隨大腿骨骼一塊兒運動。在 ThingJS 場景中，每一個對象，均可以經過 children 訪問到下層子對象物體，經過 parent 訪問到對應的父物體。建立一個物體對象時，可指定該對象的父物體；一個物體對象也能夠經過 add ，添加子物體。模塊化

線段處理

在真實的太陽系中並無軌道線，但在程序中加入軌道線將使場景更加美觀。咱們使用圓形軌道來模擬真實軌道（真實軌道是橢圓的），THREE.LineBasicMaterial材質可將geometry中的頂點逐個相連，只要分段足夠多，最終的效果將趨於平滑的圓形，本例中，軌道線被分紅了120段。 ThingJS提供軌跡線應用，直接封裝了three.js有關於線條、材質的3D概念，直接取用軌跡線的對象規則來建立軌跡線，實現便捷開發。動畫

/**
 * 說明：軌跡線應用
 */
app = new THING.App({
    url: 'https://www.thingjs.com/static/models/simplebuilding'
});

//軌跡線
var line;
app.on('load', function () {

    var points = [];
    var radius = 20;
    for (var degree = 0, y = 0.5; degree <= 520; degree += 2) {
        var x = Math.cos(degree * 2 * Math.PI / 360) * radius;
        var z = Math.sin(degree * 2 * Math.PI / 360) * radius;
        points.push([x, y, z]);
    }

    // 建立軌跡線
    line = app.create({
        type: 'Line',
        color: 0x00FF00, // 軌跡線顏色
        dotSize: 2, // 軌跡點的大小
        dotColor: 0xFF0000, // 軌跡點的顏色
        points: points,
    })

    // 小車開始沿軌跡線運動
    play();

    // 建立按鈕
    new THING.widget.Button('開始移動', play);
    new THING.widget.Button('軌跡線', showLines);
    new THING.widget.Button('軌跡點', showPoints);
});

// 物體跟隨軌跡線運動
function play() {
    var car = app.query('car01')[0];
    car.movePath({
        'path': line.points, // 軌跡路線
        'time': 12000, // 移動時間
        'orientToPath': true, // 物體移動時沿向路徑方向
    });
}

// 顯示/隱藏軌跡線
var lineVisible = true;
function showLines() {
    lineVisible = !lineVisible;
    line.showLines(lineVisible);
}

// 顯示/隱藏軌跡點
var pointVisible = true;
function showPoints() {
    pointVisible = !pointVisible;
    line.showPoints(pointVisible);
}

粒子系統

爲使整個地月系看起來更加生動，咱們爲其添加了背景星空，隨機地添加了1000顆星星，它們的大小和亮度不等，相似的情形包括煙霧效果、火焰效果、波紋效果等，在Three.js中，這類效果可使用粒子系統來實現，即THREE.ParticleSystem。 ThingJS封裝了粒子效果的實現方法，是更爲頂層的抽象，因此減小了代碼量和開發投入，更受3D開發初學者的歡迎，如直接用query查詢API接口，在場景中加入火焰效果。ui

// 建立火焰粒子
	new THING.widget.Button('create', function () {
		var fire = app.query('#fire01')[0];

		if (!fire) {
			app.create({
				id: 'fire01',
				type: 'ParticleSystem',
				url: 'https://model.3dmomoda.com/models/19061018snbajhvuzrheq9sbgwdoefuk/0/particles',
				parent: car, // 設置粒子的父物體
				localPosition: [0, 0, 0] // 設置粒子相對於父物體的位置
			});
		}
	})

若是將場景擴展到了整個太陽系，包含水星、金星、地球、火星、木星、土星六大近地行星，全部星球均按真實大小比例和距太陽的距離構造，經過第一人稱視角漫遊，用戶能夠自由選擇在任意位置、任意角度來觀察太陽系，同樣能夠經過ThingJS的第一人稱行走簡單實現！url

只要對技術實現邏輯清晰，就能夠在不一樣的場景上輕鬆應用規則，實現快速的規模化3D開發！

人生就是一場馬拉松，看的是均值迴歸，不要被眼前的阻礙嚇到！