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

由于我们在正文中包含了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 = 'three.js - voxel painter
click: add voxel, control + click: remove voxel, shift: rotate, save .png';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

更多相关文章

随机推荐