ThreeJS初體驗 - JavaShuo

隨着移動端，雲端的普及，CAD的渲染都不單單依賴於本地的計算機CPU，GPU了，現代的瀏覽器的加強，javascript的計算能力由於google的V8引擎獲得了迅猛的加強，作3D程序，作服務器都沒有問題，好比nodejs直接能夠打入服務器端。讓基於web的CAD建模，圖形化顯示變得愈來愈靠譜。接下來給你們介紹一個基於webGL的Javascript插件ThreeJS官方網址，threejs.org/，但願更多的有志之士可…javascript

先來個簡單的人物動畫。html

再來個車型的展現java

是否是很酷，是否是很心動，沒錯，打開IE就能夠看到。能夠更換車型，能夠設置顏色等等。（忽略掉我錄製動畫時候顫抖的小手吧~~~）node

官方提供了不少案例，很炫酷的結果，感興趣能夠去看看，並且例子都是開源能夠下載的。（由於官方是外網，咱們訪問的時候會有些卡頓，能夠搜索three中文網，是我們國內的，不會卡）web

=============================================canvas

好了，牛逼歸牛逼，炫酷歸炫酷，到底難不難。我想說若是你是搞CAD開發的，瞭解計算機圖形學，瞭解幾何拓撲，所謂的幾何構造元素 Vertex，edge，face，mesh，body等，CAD渲染render，光線light，材料material，照相機視圖 Camera等，個人感受，真不難。瀏覽器

關鍵的關鍵，你想作什麼，我一直知道我想要什麼，只是時間問題。好了來看看簡單的代碼和結果吧。服務器

引入JS這裏很少說，官方也有模板。我放上來只想讓你看看，真的簡單明瞭。markdown

<head>
	<meta charset="utf-8">
	<title>My first three.js app</title>
	<style>
		body { margin: 0; }
		canvas { width: 100%; height: 100% }
	</style>
</head>
<body>
	<script src="js/three.js"></script>
	<script>
		// Our Javascript will go here.
	</script>
</body></html>
複製代碼

邏輯部分，建立三個對象app

場景

照相機

渲染器

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

基本上大功告成了，加入要建立的幾何

//create the shape

var geometry = new THREE.TorusGeometry(2, 1, 16, 100);

//create a meterial

var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });

//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];

//var material = new THREE.MeshFaceMaterial(myMaterial);

var cube = new THREE.Mesh(geometry, material);

scene.add(cube);

camera.position.z = 5;

//rotate 目的讓她轉起來

var update = function () {

cube.rotation.x += .01;

cube.rotation.y += .02;

cube.rotation.z += .02;
複製代碼

}

var render = function () {

renderer.render(scene, camera);
複製代碼

}

var Gameloop = function () {

requestAnimationFrame(Gameloop);

update();

render();
複製代碼

}

Gameloop();

我建立了個輪胎同樣的Torus在空間裏面轉，體驗地址：

plmhome.com/doteam/less…

圖片

固然若是想實現向NX或者Catia那種模型移動等功能，加入案例中的 orbit contorls 便可。

//orbit contorls

controls = new THREE.OrbitControls(camera,renderer.domElement);

想起了風靡一時的跳一跳，也許是最好的詮釋。

===============================================================================

好了，拋磚引玉到此，但願感興趣的一塊兒討論！