ThreeJS初体验随着移动端，云端的普及，CAD的渲染都不仅仅依赖于本地的计算机CPU，GPU了，现代的浏览器的增强，

随着移动端，云端的普及，CAD的渲染都不仅仅依赖于本地的计算机CPU，GPU了，现代的浏览器的增强，javascript的计算能力因为google的V8引擎得到了迅猛的增强，做3D程序，做服务器都没有问题，比如nodejs直接可以打入服务器端。让基于web的CAD建模，图形化显示变得越来越靠谱。接下来给大家介绍一个基于webGL的Javascript插件ThreeJS官方网址，threejs.org/，希望更多的有志之士可…

先来个简单的人物动画。

再来个车型的展示

是不是很酷，是不是很心动，没错，打开IE就可以看到。可以更换车型，可以设置颜色等等。（忽略掉我录制动画时候颤抖的小手吧~~~）

官方提供了很多案例，很炫酷的结果，感兴趣可以去看看，而且例子都是开源可以下载的。（因为官方是外网，我们访问的时候会有些卡顿，可以搜索three中文网，是咱们国内的，不会卡）

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

好了，牛逼归牛逼，炫酷归炫酷，到底难不难。我想说如果你是搞CAD开发的，了解计算机图形学，了解几何拓扑，所谓的几何构造元素 Vertex，edge，face，mesh，body等，CAD渲染render，光线light，材料material，照相机视图 Camera等，我的感觉，真不难。

关键的关键，你想做什么，我一直知道我想要什么，只是时间问题。好了来看看简单的代码和结果吧。

引入JS这里不多说，官方也有模板。我放上来只想让你看看，真的简单明了。

<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>

逻辑部分，创建三个对象

场景

照相机

渲染器

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);

想起了风靡一时的跳一跳，也许是最好的诠释。

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

好了，抛砖引玉到此，希望感兴趣的一起讨论！