1024是什么？
游戲？2的十次方？某論壇節日？
10月24日，其實是程式猿翻身做主，拒絕加班的日子——程式員節（又稱碼農節），
所以，請關愛身邊的瀕危物種程式猿吧！
為什么是10月24日？因為1024是2的十次方，二進制計數的基本計量單位，是程式員最熟悉的數字，就像醫生的刀、畫家的筆，
江湖上流傳著這樣一首詩：
床前明月光，我會寫代碼；千山鳥飛絕，我會寫代碼；
松下問童子，我會寫代碼；春眠不覺曉，我會寫代碼；
白日依山盡，我會寫代碼；紅豆生南國，我會寫代碼；
鋤禾日當午，我會寫代碼；欲窮千里目，我會寫代碼！
但理想豐滿現實卻很骨感，“加班多禿的快”已經成了程式員的御用段子，
俗話說：“工欲善其事必先利其器”，工具用得好，效率必然高，拿3D可視化應用開發來說，3D可視化應用開發對每個企業來說都是大工程，需要投入大量的人力物力財力才能做好這項工程，但其實可以化繁為簡，不需要大費周章，具體來說，ThingJS 3D可視化開發平臺，基于webgl3D繪制標準，使用最熱門的Javascript語言，封裝threejs庫，前端工程師可實作在線開發，可視化場景通過拖拽和簡單寫一些代碼，對接資料源，專案部署之后就可以運行在服務器了~真是簡單好用，工具用的好，下班走得早！
ThingJS 3D框架簡化了開發作業，面向物件和模塊化的特點使得網頁代碼更加易于管理和維護，并且提供幾百個個官方示例，直接獲取API能力，不需要基于3D概念進行開發，適合3D商業專案快速生成！距離業務僅一層之隔，是非開發者也容易理解的一種應用方法，采用原生JavaScript的開發語言，配合簡捷易用的3D搭建工具，讓前端程式員和實施人員都可以立即上手，
僅需幾行代碼實作第一人稱行走
這種3D場景中的第一人稱行走僅需幾十行代碼就能輕松實作，代碼如下：
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/factory',
skyBox: 'Night',
env: 'Seaside',
});
// 加載場景后執行
app.on('load', function ()
// 創建按鈕
new THING.widget.Button('添加控制元件', add_control);
new THING.widget.Button('重置', remove_control);
});
/**
* 添加控制元件
*/
var ctrl = null;
var gui = null;
function add_control() {
if (ctrl) {
return;
}
// 攝像機飛行到某位置
app.camera.flyTo({
'position': [2.8321649862532032, 1.800003570690751, 19.142406079541555],
'target': [8.238903690935196, 1.4337976272817292, 14.458302731727938],
'time': 1000,
'complete': function () {
ctrl = app.addControl(
new THING.WalkControl({
// 引數可以動態修改
walkSpeed: 0.02, // 行走速度
turnSpeed: 0.25, // 右鍵旋轉速度
gravity: 29.8, // 物體重量
eyeHeight: 1.8, // 人高度
jumpSpeed: 10, // 按空格鍵 跳躍的速度
enableKeyRotate: false, // 默認不開啟鍵盤控制旋轉
useCollision: false, // 默認不開啟碰撞檢測
useGravity: true // 默認開啟重力
})
);
// GUI
gui = new THING.widget.Panel({ 'titleText': '第一人稱行走', 'hasTitle': true });
gui.position = [10, 200];
gui.addBoolean(ctrl, 'enableKeyRotate').caption('鍵盤控制旋轉');
gui.addBoolean(ctrl, 'useCollision').caption('碰撞檢測');
gui.addBoolean(ctrl, 'useGravity').caption('重力檢測');
gui.addNumberSlider(ctrl, 'gravity').caption('重力').step(1).min(0).max(50).isChangeValue(true);
gui.addNumberSlider(ctrl, 'jumpSpeed').caption('跳起速度').step(1).min(0).max(30).isChangeValue(true);
}
});
}
/**
* 洗掉控制元件
*/
function remove_control() {
if (ctrl) {
// 攝像機飛行到某位置
app.camera.flyTo({
'position': [36.013, 42.67799999999998, 61.72399999999999],
'target': [1.646, 7.891, 4.445],
'time': 1000,
'complete': function () {
app.removeControl(ctrl);
ctrl = null;
gui.destroy();
}
});
}
}
看下效果：
ThingJS提供的可視化能力可以讓物聯網應用場景更易于被理解和掌控，大幅提升客戶滿意度和解決方案競爭力，簡單好用threejs庫3D可視化平臺ThingJS，前端工程師會js就可以的，試一下你就知道如何做啦~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/333605.html
標籤：其他