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

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

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

好了，抛砖引玉到此，但愿感兴趣的一块儿讨论！