发现3 .js与Android和英特尔XDK

• 下载example3.zip - 456.5 KB
• 下载apk14.zip - 6.8 MB
• 下载apk13.zip - 6.8 MB

Introduction  本文是关于使用Intel XDK和three.js开发android应用程序的。它将概述如何使用这个奇妙的工具开发基于GUI的Android架构的应用程序。 背景 这是Android平台的新产品 在过去的15个月里，我一直在为Windows桌面开发应用程序，所以我对Android平台非常陌生。所以当我探索Android的未知世界时，这种体验对我来说是全新的，我所介绍的东西可能并不新鲜，但我已经尝试过了 为什么选择Intel XDK 我对HTML的知识很少，我打算使用IDE，我可以实现我的HTML技能。整个IDE的经验对我来说是全新的，因为我没有使用过一次Intel XDK。它是一个基于云的IDE，要求您在创建用于发布的包的整个过程中始终连接到internet。英特尔XDK的优点是你不需要配置Android ADT bundle，它有一个内置的模拟器来测试你的应用。这里你有选择从不同的形式因素，如谷歌Nexus 4和谷歌Nexus 7，联想K900等。我发现的缺点是，如果您在IDE上工作了很长时间，那么IDE有时会冻结。在这些times 我不得不重新启动IDE，然后重新开始我的工作。总的来说，我使用Intel XDK的经验还不错，因为我在开发应用程序时几乎没有遇到什么麻烦。 探索Three.js  Three.js ! !事实上，当我在网上搜索一些基于实例的处理时，我开始喜欢上它了。本质上是另一个有创造力的编码者的喜悦(http://threejs.org/)它有很多由WebGL提供的选项，本质上是有帮助的。创建伟大的外观GUI应用程序和乐趣。开放源码，有很多例子可以使用。你在为Android开发时需要注意的是不是所有的浏览器都支持WebGL在那种情况下你需要做的是使用画布渲染器在你的路上。 什么是英特尔XDK? Intel XDK是用于在开发环境中开发可靠HTML 5的跨平台IDE，您可以在连接到internet时更新代码。创建应用程序后，可以将其分发到不同的平台。Android应用程序也可以通过同样的方式创建，在build选项中可以创建apk。这个IDE能够编写一次代码并将其分发到不同的平台。在新的更新的XDK有人行横道构建选项的android目前还处于测试阶段，它可以帮助您移植本地功能的html 5、JavaScript和CSS 3应用程序。在开发阶段，您可以使用模拟器测试应用程序的不同形式因素。总而言之，它是一个开发和发布HTML 5应用程序的伟大平台。 下载链接,http://xdk-software.intel.com/index.html  循序渐进的过程下载Intel XDK的数据 下一步将检测你的OS  保存文件和exe将被保存。按照下面提到的步骤安装和启动exe Intel XDK和Android项目的项目生命周期如下所示 当您打开Intel XDK时，您将看到一个选项来启动一个新项目。在这里，您可以使用空白模板重新开始，或者重用任何演示并修改它。可用的选项有 i)从一个空白项目开始导入一个现有的应用:-这里你可以移植旧的应用程序与XDK的，PhoneGap应用程序，AppMobapps，基于HTML 5 api的应用程序，但不能移植Java应用程序。应用程序设计器允许你使用应用程序框架，BootStrap API,jQuery Mobile或Top Coat来启动项目。 由于我们的目标是Three.js，我们将使用一个演示，也交叉走演示和修改演示插入额外的代码，在index.html文件，并添加所需的Three.js文件。在英特尔的网站http://software.intel.com/en-us/html5/articles/crosswalk-applicationruntime中有一个很好的信息来解释和概述人行横道的运行时间 Three.js是什么? js是一个使WebGL(浏览器中的3D)变得非常简单的库。在WebGL中，一个简单的立方体会产生数百行JavaScript和着色器代码，而3 .js的等效物只是其中的一小部分。js是一个轻量级的跨浏览器JavaScript库/API，用于在Web浏览器上创建和显示三维计算机图形动画。 开始一个新的 Decoding 其中一个例子是从GITHUB创建一个新的apk。Three.js的创始人做了非常出色的感谢他们，我使用其中一个例子来开始。 https://github.com/mrdoob/three.js/blob/master/examples/canvas_interactive_voxelpainter.html, 打开Intel xdk点击项目点击开始一个新的项目 单击Work演示 选择人行横道并点击下一步 , 点击创建。当项目创建时，您将收到一条祝贺信息 根据你的喜好变化html页面，因为它将反映在应用程序和  还要添加所需的JavaScript。 根据你的喜好来改变。html页面，因为它将反映主要的变化，在应用程序，也增加了Three.js JavaScript需要只, , 仔细看看index.html页面 根据链接:-http:// aerotwist.com/tutorials/getting-staring-with-threjs/ 我已经提出了一个flow index.html页面，它将在下面进行描述 让我们看看索引的流程。文件在英特尔XDK , 修改了index.html文件，并在threejs文件夹中添加了所需的js文件(您需要 从项目的Windows目录结构中访问文件，然后手动添加文件。在我的情况下，我手动将文件添加到主项目文件夹E: IntelXDK_Projects\eXAMPLE2\threejs)你需要点击仿真(你可以从许多模拟器中选择来检查这个项目) 构建过程 这里是apk创建的主要操作。Build菜单提供了在多个平台上发布应用程序的所有选项。在这里，你可以编辑你想要添加到应用程序中的资产和图像。对于Android有两个选项 Android:安康;你创建了正常的APK，你可以分配…,,Android人行横道(正在测试阶段):-这是一个创建人行横道运行时Android APK的版本，你可以选择为基于ARM的设备或X86架构构建它。, 构建过程figures  您将看到将要创建的构建。你现在需要点击build app , 下一幅图显示了构建过程 你会得到一个信息，构建是成功的。 更改应用程序开发流程的整个过程发生在index.html页面上。这里的任何更新都反映了变化和整个流程的变化。对index.html页面进行更改，并包含必要的三个.js文件。调整GITHUB中的代码将帮助您进行探索。也有一个人行横道构建，允许创建x86或ARM架构的包，它在beta阶段，但你可以尝试这个构建。 根据链接:-  http://aerotwist.com/tutorials/getting-stard-with-threjs/ 我已经使用了描述并展示了它如何在Intel XDK中创建一个Android应用程序 解析index.html页面(创建一个新项目) 对索引所做的任何更改。html实际上反映了应用程序最终的样子。因此，我们需要包括三个。js文件，以及整个逻辑需要实现在这里。我深入挖掘了three.js的GITHUB库，并检查了哪些示例可以在上面工作，并将其带到Intel XDK中，最终从中制作出apk。因此，我所做的就是对index.html页面进行分解，并对其进行修改，以获得项目的正确视图。在学习方面，我从https://github.com/mrdoob/three.js/ repository获得了帮助。它在探索three.js时非常有用。这个库的主要贡献者是Droob先生https://github.com/mrdoob和theo-armour https://github.com/theo-armour。出于对这些人的尊重(他们在Three.js中已经做得很好了)，我正在导出这些知识库来学习、分享和贡献。, 让我们Start  为了更兼容不同的移动平台，我们需要声明viewport与设备的宽度高度。, 设备宽度允许根据改变的设备调整，无论是平板电脑还是不同模式的手机。 declaration , 隐藏,复制Code

<metaname="viewport"width,user-scalable=no, minimum-scale=1.0, maxcontent="width=device-imum-scale=1.0">

这也意味着当我们改变设备的方向时，它会提供一个正确的应用程序访问。 标签的样式 样式标签允许如何将应用程序呈现给设备。下面的修改显示了该应用程序的外观。现在在这个项目中，我们根据需要修改样式标签 隐藏,复制Code

       <style>
    body {
        font-family: Monospace;
        background-color: #f0f0f0;
        margin: 0px;
        overflow: hidden;
    }
</style>

为了使重新加载更容易，我们必须一次又一次地重新加载页面，我们在html的头标签中包括了three.min.js，包括脚本标签中的脚本 隐藏,复制Code

<script></script>

由于我们在正文中包含了three.js脚本标签，所以我们允许重要的动作在three.min.js脚本中执行。这里是实现three.js的逻辑，因此我们需要将其包含到head标签中。, 现在轮到intilaizatioof的变量或实现的方式，3D GUI结构将表现，我们实现动画susch作为对象运动的交互，接近对象或移出，我们sta通过调用init()方法。 在3 .js脚本的入口点，我们需要附加元素和chid行为。为了让几何图形工作，我们需要实现变量和它们的实现逻辑。 当我们遇到Three.js脚本时，我们看到它本质上是一个涉及到的3D gui描述 场景、摄像机、投影仪、渲染器和对象。 js脚本中的某些修改允许实现平面几何图形。面对法线，我们使用var normalMatrix= new three . matrix (); 为了用相机透视创建阴影效果，我们使用了这个 相机= new THREE.perspectiveCamera ();,修改自定义网格需要改变几何形状，因此我们做如下操作 隐藏,收缩,复制Code

var size = 500, step = 50;

var geometry = new THREE.Geometry();

for ( var i = - size; i <= size; i+= step ){geometry.vertices.push(newTHREE.Vector3(-size,0,i));geometry.vertices.push(newTHREE.Vector3(size,0,i));geometry.vertices.push(newTHREE.Vector3(i,0,-size));geometry.vertices.push(newTHREE.Vector3(i,0,size));}varmaterial= new THREE.LineBasicMaterial({color:0x000000,opacity:0.2});varline= new THREE.Line(geometry,material);line.type= THREE.LinePieces;
scene.add(line);

我们使用投影仪来改变对象的行为，也实现了鼠标移动和选择特定的对象。这也有助于在屏幕空间中的投影。 光线反射以及环境光效果在这些代码行中得到控制。这也显示了如何照明效果将是。 隐藏,复制Code

//
// var ambientLight = new THREE.AmbientLight( 0x606060 );
//

看一下变量声明 ,目标= new THREE.Vector3 (0200 0); 在上面的声明中，我们声明了一个3D向量。三维矢量通常是具有大小和方向的几何量 var normalMatrix = new三人。矩阵3 (); 它是一个3*3矩阵。 为了进行投影，我们使用了鼠标2D和鼠标3D 更多的修改和整个html代码如下所示。创建一个网格，你可以放置盒子。和设计。这是一个从https://github.com/mrdoob/three.js/修改的导出 隐藏,收缩,复制Code

 <!DOCTYPEhtml>
<htmllang="en">
	<head>
		<title>three.js canvas - interactive - voxel painter</title>
		<metacharset="utf-8">
		<metaname="viewport"content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
 
		<scriptsrc="../build/three.min.js"></script>
 
		<scriptsrc="js/libs/stats.min.js"></script>
 
		<script>
 
			var container, stats;
			var camera, scene, renderer;
			var projector, plane;
			var mouse2D, mouse3D, raycaster, theta = 45,
			isShiftDown = false, isCtrlDown = false,
			target = new THREE.Vector3( 0, 200, 0 );
			var normalMatrix = new THREE.Matrix3();
			var ROLLOVERED;
 
			init();
			animate();
 
			function init() {
 
				container = document.createElement( 'div' );
				document.body.appendChild( container );
 
				var info = document.createElement( 'div' );
				info.style.position = 'absolute';
				info.style.top = '10px';
				info.style.width = '100%';
				info.style.textAlign = 'center';
				info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> - voxel painter<br><strong>click</strong>: add voxel, <strong>control + click</strong>: remove voxel, <strong>shift</strong>: rotate, <a href="javascript:save()">save .png</a>';
				container.appendChild( info );
 
				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.y = 800;
 
				scene = new THREE.Scene();
 
				// Grid
 
				var size = 500, step = 50;
 
				var geometry = new THREE.Geometry();
 
				for ( var i = - size; i <= size; i += step ) {
 
					geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
					geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );
 
					geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
					geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );
 
				}
 
				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
 
				var line = new THREE.Line( geometry, material );
				line.type = THREE.LinePieces;
				scene.add( line );
 
				//
 
				projector = new THREE.Projector();
 
				plane = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000 ), new THREE.MeshBasicMaterial() );
				plane.rotation.x = - Math.PI / 2;
				plane.visible = false;
				scene.add( plane );
 
				mouse2D = new THREE.Vector3( 0, 10000, 0.5 );
 
				// Lights
 
				var ambientLight = new THREE.AmbientLight( 0x606060 );
				scene.add( ambientLight );
 
				var directionalLight = new THREE.DirectionalLight( 0xffffff );
				directionalLight.position.x = Math.random() - 0.5;
				directionalLight.position.y = Math.random() - 0.5;
				directionalLight.position.z = Math.random() - 0.5;
				directionalLight.position.normalize();
				scene.add( directionalLight );
 
				var directionalLight = new THREE.DirectionalLight( 0x808080 );
				directionalLight.position.x = Math.random() - 0.5;
				directionalLight.position.y = Math.random() - 0.5;
				directionalLight.position.z = Math.random() - 0.5;
				directionalLight.position.normalize();
				scene.add( directionalLight );
 
				renderer = new THREE.CanvasRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );
 
				container.appendChild(renderer.domElement);
 
				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				container.appendChild( stats.domElement );
 
				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
				document.addEventListener( 'keydown', onDocumentKeyDown, false );
				document.addEventListener( 'keyup', onDocumentKeyUp, false );

				//
 
				window.addEventListener( 'resize', onWindowResize, false );

			}
 
			function onWindowResize() {
 
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
 
				renderer.setSize( window.innerWidth, window.innerHeight );
 
			}
 
			function onDocumentMouseMove( event ) {
 
				event.preventDefault();
 
				mouse2D.x = ( event.clientX / window.innerWidth ) * 2 - 1;
				mouse2D.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
				var intersects = raycaster.intersectObjects( scene.children );
 
				if ( intersects.length > 0 ) {
 
					if ( ROLLOVERED ) ROLLOVERED.color.setHex( 0x00ff80 );
 
					ROLLOVERED = intersects[ 0 ].face;
					ROLLOVERED.color.setHex( 0xff8000 )
 
				}
 
			}
 
			function onDocumentMouseDown( event ) {
 
				event.preventDefault();
 
				var intersects = raycaster.intersectObjects( scene.children );
 
				if ( intersects.length > 0 ) {
 
					var intersect = intersects[ 0 ];
 
					if ( isCtrlDown ) {
 
						if ( intersect.object != plane ) {
 
							scene.remove( intersect.object );
 
						}
 
					} else {
 
						normalMatrix.getNormalMatrix( intersect.object.matrixWorld );
 
						var normal = intersect.face.normal.clone();
						normal.applyMatrix3( normalMatrix ).normalize();
 
						var position = new THREE.Vector3().addVectors( intersect.point, normal );
 
						var geometry = new THREE.CubeGeometry( 50, 50, 50 );
 
						for ( var i = 0; i < geometry.faces.length; i ++ ) {
 
							geometry.faces[ i ].color.setHex( 0x00ff80 );
 
						}
 
						var material = new THREE.MeshLambertMaterial( { vertexColors: THREE.FaceColors } );
 
						var voxel = new THREE.Mesh( geometry, material );
						voxel.position.x = Math.floor( position.x / 50 ) * 50 + 25;
						voxel.position.y = Math.floor( position.y / 50 ) * 50 + 25;
						voxel.position.z = Math.floor( position.z / 50 ) * 50 + 25;
						voxel.matrixAutoUpdate = false;
						voxel.updateMatrix();
						scene.add( voxel );
 
					}
 
				}
			}
 
			function onDocumentKeyDown( event ) {
 
				switch( event.keyCode ) {
 
					case 16: isShiftDown = true; break;
					case 17: isCtrlDown = true; break;
 
				}
 
			}
 
			function onDocumentKeyUp( event ) {
 
				switch( event.keyCode ) {
 
					case 16: isShiftDown = false; break;
					case 17: isCtrlDown = false; break;
 
				}
			}
 
			function save() {
 
				window.open( renderer.domElement.toDataURL('image/png'), 'mywindow' );
				return false;
 
			}
 
			//
 
			function animate() {
 
				requestAnimationFrame( animate );
 
				render();
				stats.update();
 
			}
 
			function render() {
 
				if ( isShiftDown ) {
 
					theta += mouse2D.x * 3;
 
				}
 
				camera.position.x = 1400 * Math.sin( theta * Math.PI / 360 );
				camera.position.z = 1400 * Math.cos( theta * Math.PI / 360 );
				camera.lookAt( target );
 
				raycaster = projector.pickingRay( mouse2D.clone(), camera );
 
				renderer.render( scene, camera );
 
			}
 
		</script>
 
	</body>
</html>

项目在模拟器中的样子 , 在实验之后，我们看到在index.html中添加简单的修改和添加必需的3 .js文件会给你一些很酷的gui效果，你可以在你的项目中使用。 js有无限的可能性，因为你也可以用它来开发游戏。js是一个优秀的WebGL工具，可以帮助您以一种创新的方式探索3D GUI应用程序。 现在，当您结合Intel XDK IDE时，您可以使用它创建一些很棒的APK。 Nexus7 模拟器图片 这篇文章是一篇文章展示了如何使用Intel XDK IDE开发基于GUI的WebGL Android应用程序。在整个项目过程中需要互联网连接。随着我学到的更多，我将努力做出更多的贡献。GITHUB repository for Three.js https://github.com/mrdoob/three.js检查示例和实验。我很喜欢修改代码。 参考文献 http://aerotwist.com/tutorials/getting -开始- - - - - - -三- js/ http://threejs.org/docs/ http://xdk——software.intel.com/ http://learningthreejs.com/ http://code.tutsplus.com/tutorials/webgl - - threejs -基础-网- 35688 - http://blog.teamtreehouse.com/the初学者指南-三- js http://www.johannes raida.de/tutorials/three.js/tutorial02/tutorial02.htm http://en.wikipedia.org/wiki/main_page https://github.com/mrdoob/three.js/ ,好的资源 你会学到很多东西，并从中获得知识。StackOverflow的3 .js问题 http://stackoverflow.com/search?q=Three.js, 英特尔XDK文档 http://software.intel.com/en-us/html5/articles/xdkdocs, Three.js文档 http://threejs.org/docs/,, 的兴趣点 我已经花了很多时间学习three.js和Intel XDK，这是唯一的机会来分享我所学到的文章。对于为Android和其他架构构建HTML 5应用程序，Intel XDK是一个非常有用的工具。英特尔还包含了一个构建的人行横道Android beta构建，用于创建基于WebGl的Android项目和其他Android目标构建 历史 第一篇文章更新了代码和APK的 本文转载于：http://www.diyabc.com/frontweb/news30211.html