金沙澳门官网网址_金沙国际登陆

欢迎加入金沙澳门官网网址体验更多不一样的精彩.,金沙国际登陆提供最丰厚回馈!,因为金沙澳门官网网址这里的游戏是多种多样的,为大家打造一个最专业的化的超级五星酒店。

金沙澳门官网网址 > 金沙澳门官网网址 > js常用指令介绍,使用Chrome控制台进行3D模型编辑

原标题:js常用指令介绍,使用Chrome控制台进行3D模型编辑

浏览次数:108 时间:2019-11-06

写在前面

前言:3D模型编辑的核心是对顶点位置和纹理颜色的编辑,这个研究的目的在于寻找一种通过编程方式直接对模型进行编辑的方法,这种编辑方法和时下流行的通过鼠标点选、拖拽进行编辑的方法之间的关系,和前端编程中“程序员编写静态网页”与“美工进行网页切图”之间的关系很相似。

我是一个小白程序员,准备开发小程序找了很久小程序开发引擎,看到白鹭和LayaAir 。经过一番资料查找后被LayaAir高性能、接口简洁及社区活跃所吸引,然后选择了LayaAir。

作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的非常简单,用起来也是非常的方便,通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合,足以应付任何规模的应用。

一、工具用法:

开发过程中一般小问题都说看看官网看看文档就能解决了,但是现在我遇见了解决不到问题,官网又没任何资料的时候,我提了个问题就是白鹭引擎里控制骨骼运动在LayaAir怎么实现时,官方人员却含糊其辞。我想这问题一年前就有人问过了应该有人知道吧,不过我太天真了,得到的答案只是技术大佬的嘲讽。

如果你之前已经习惯了用jQuery、JS操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。

1、访问 

图片 1

当然了,在使用Vue.js时,你也可以结合其他库一起使用,比如jQuery、JS等等。

图片 2

说我态度不好,但是我没半点不尊敬,我觉得LayaAir开发挺好的,可是让我认错,我不知道怎么认。我又没骂我只是提问题而已。免费用别人引擎难道就不能提问题了吗。
图片 3
我没有怼引擎,也没说LayaAir不好,不然我也不会用。别人提了我这个相同的问题是一年前的,我不知道他是怎么解决的,官网也没有任何代码提示,我很无奈。

这是我第一次在博客上对于自己的学习成长经历进行记录,先从最简单的一些基本指令记起,下面开始

在场景世界坐标系的(0,-10,0),(0,0,0),(0,10,0)处各有一个绿色小球作为参考点,使用上下左右和鼠标拖动可以进行场景漫游。

图片 4

Vue.js介绍

2、按F12键打开Chrome控制台,在控制台中输入:MakeRibbon(MakeRing(5,12),-10,2,11,"mesh_ribbon")回车:

我是技术菜鸟,改底层我真做不到。叫我去重写这,重写那。代码的确开源了,可是我真看不懂。各位都是技术大佬都能直接改底层,我膜拜。

Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

图片 5

图片 6
后来问题没解决直接把我禁言了,我完全不知道自己犯了什么错误。普通程序员没能力去改底层,能有什么办法。

Vue.js安装

在场景中绘制了一个半径为5,曲面细分度为12,左端位于-10,每两个圆环间距2,共由11个圆环组成的圆柱面。

图片 7
没办法大佬不回答问题,只有自己建个小白群大家大论了。 不过群里朋友发个群推广,居然也被禁言了。

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入,官网链接:,

拉近查看:

还说小白群对任何人没帮助。难道一出生就直接是天才会写底层引擎。会开发的么。

Vue.js环境详细安装教程可参考

图片 8

 

声明式渲染第一个实例“helloword”

3、输入ShowNormals(mesh_origin)将用红色线段显示每个顶点的法线方向

发这篇文章我不是给LayaAir技术大佬看的,我希望管理人员能看到,我想用LayaAir可是我是小白。

无论学习哪一种语言,第一步都会是用“helloword”打开这门语言的大门,Vue.js也是一样,看看是如何在Vue.js中输出“helloword”的。

图片 9

这也许是小白的悲哀吧。

图片 10图片 11

输入DeleteMeshes([lines_normal])可以删除所有的法线,输入DeleteMeshes([mesh_origin])则删除圆柱面网格。

 

<div id="app">
  {{ message }}
</div>

4、鼠标移入网格上的三角形,会显示三角形的顶点信息:

我建议想学习开发小白可以去白鹭引擎看看,白鹭虽然也有很多坑,但是至少你提问题的时候,他们会接受。并且白鹭会在公众号说自己修复了哪些bug,感谢哪些开发者,laya就是藏着掖着(我们产品不会有问题的,一定是你代码有问题)——技术大佬直接改引擎的可以无视,用什么都一样。

helloword声明式渲染html部分

图片 12

图片 13图片 14

其中“1:2-5”表示这是三角形的第一个顶点,这个顶点位于索引是2的圆环上(第三个圆环),这个顶点在圆环中的索引是5(也就是第六个顶点)。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello word!'
  }
})

5、输入PickPoints([[2,5],[3,5],[2,6]],mesh_origin)可以选定这些顶点

helloword声明式渲染JS部分

图片 15

作用:简化字符串的拼接。

被选中顶点所影响的所有边框线标示为黄色,这个“选中”只是改变外观而已。

注意: 变化的部分使用{{}} 和Vue.js的v-text效果一样定义

6、输入TransVertex(mesh_origin,arr_ij,BABYLON.Matrix.Translation(0,0,-10))将所选的顶点向z轴负方向移动10,被移动的顶点和前面选中的顶点其实没有关系,其中arr_ij也可以直接用索引数组[[2,5],[3,5],[2,6]]代替。

 

图片 16

常用指令总结

另一类变形可以通过输入:TransVertex(mesh_origin,arr_ij,BABYLON.Matrix.RotationX(Math.PI/2))实现,这可以把被选中的顶点绕X中旋转90度。

1.将上面helloword中的div中的内容换做input框的话,可实现双向绑定,input框中的你输入的内容与JS部分中的data中的message绑定

输入DeleteMeshes([lines_inpicked])取消被选中的效果,输入ChangeMaterial(mesh_origin,mat_blue)将边框换成蓝色纹理:

eg:

图片 17

图片 18双向绑定v-model指令HTML部分

可以看到变形后的效果,接下来还可以继续选择顶点并变形

图片 19双向绑定v-model指令JS部分

7、输入ExportMesh("1",mat_blue),以txt格式导出babylon模型文件,文件名为“1.txt”

2.v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素;

图片 20

eg:

 8、将导出的txt改名为9.babylon后放入网站目录中,访问

图片 21图片 22

二、编程思路:

<div id="example01">
    <p v-if="male">Male</p>
    <p v-if="female">Female</p>
    <p v-if="age>25">Age:{{age}}</p>
    <p v-if="name.indexOf('lin')>0">Name:{{name}}</p>
</div>

1、首先要建立一个可以进行各种测试的基础场景,使用的代码如下:

v-if指令html部分

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>建立一个条带网格生成器,能够输入参数生成起始条带,然后通过命令行选取并修改pathArray,最后导出生成的条带</title>
  6     <link href="../CSS/newland.css" rel="stylesheet">
  7     <link href="../CSS/stat.css" rel="stylesheet">
  8     <script src="../JS/MYLIB/Events.js"></script>
  9     <script src="../JS/MYLIB/FileText.js"></script>
 10     <script src="../JS/MYLIB/View.js"></script>
 11     <script src="../JS/LIB/babylon.32.all.maxs.js"></script><!--V3.2的稳定版本-->
 12     <script src="../JS/MYLIB/newland.js"></script>
 13     <script src="../JS/LIB/stat.js"></script>
 14 </head>
 15 <body>
 16 <div id="div_allbase">
 17     <canvas id="renderCanvas"></canvas>
 18     <div id="fps" style="z-index: 301;"></div>
 19 </div>
 20 </body>
 21 <script>
 22     var VERSION=1.0,AUTHOR="lz_newland@163.com";
 23     var machine,canvas,engine,scene,gl,MyGame={};
 24     canvas = document.getElementById("renderCanvas");
 25     engine = new BABYLON.Engine(canvas, true);
 26     gl=engine._gl;//可以结合使用原生OpenGL和Babylon.js;
 27     scene = new BABYLON.Scene(engine);
 28     var divFps = document.getElementById("fps");
 29 
 30     window.onload=beforewebGL;
 31     function beforewebGL()
 32     {
 33         if(engine._webGLVersion==2.0)//输出ES版本
 34         {
 35             console.log("ES3.0");
 36         }
 37         else{
 38             console.log("ES2.0");
 39         }
 40         //MyGame=new Game(0,"first_pick","","http://127.0.0.1:8082/");
 41         /*0-startWebGL
 42          * */
 43         webGLStart();
 44     }
 45     //从下面开始分成简单测试和对象框架两种架构
 46     //简单测试
 47     //全局对象
 48     var light0//全局光源
 49             ,camera0//主相机
 50             ;
 51     //四种常用材质
 52     var mat_frame = new BABYLON.StandardMaterial("mat_frame", scene);
 53     mat_frame.wireframe = true;
 54     var mat_red = new BABYLON.StandardMaterial("mat_red", scene);
 55     mat_red.diffuseColor = new BABYLON.Color3(1, 0, 0);
 56     mat_red.backFaceCulling=false;
 57     var mat_green = new BABYLON.StandardMaterial("mat_green", scene);
 58     mat_green.diffuseColor = new BABYLON.Color3(0, 1, 0);
 59     mat_green.backFaceCulling=false;
 60     var mat_blue = new BABYLON.StandardMaterial("mat_blue", scene);
 61     mat_blue.diffuseColor = new BABYLON.Color3(0, 0, 1);
 62     mat_blue.backFaceCulling=false;
 63     var mesh_origin;
 64     var advancedTexture=BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("ui1");//全屏GUI
 65     function webGLStart()
 66     {
 67         window.addEventListener("resize", function () {//自动调整视口尺寸
 68             engine.resize();
 69         });
 70         camera0 =new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, -80), scene);
 71         camera0.attachControl(canvas, true);
 72         camera0.speed=0.5;//相机移动速度是默认速度的一半
 73         camera0.minZ=0.01;//相机位置距前视锥截面的距离,也就是说到相机距离小于0.01的图元都不会显示,这个值不能过小,否则Babylon.js内置的鼠标选取将失效
 74         camera0.layerMask=2;//相机的遮罩层次,这个相机将只能显示遮罩层次同为2的网格,如果不设置这个属性,似乎可以显示所有遮罩层次的网格
 75         scene.activeCameras.push(camera0);//将相机加入活跃相机列表,默认情况下Babylon.js只使用一个活跃相机,但是也可以强行使用多个
 76         light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);//半球光源
 77      //三个参照物,MeshBuilder是新版Babylon.js中使用的网格构建对象,之前翻译入门教程时还没有这个对象,它的特点是把一大堆参数统一整理到一个option参数中
 78         var mesh_base=new BABYLON.MeshBuilder.CreateSphere("mesh_base",{diameter:1},scene);
 79         mesh_base.material=mat_green;
 80         mesh_base.position.x=0;
 81         mesh_base.layerMask=2;
 82         var mesh_base1=new BABYLON.MeshBuilder.CreateSphere("mesh_base1",{diameter:1},scene);
 83         mesh_base1.position.y=10;
 84         mesh_base1.position.x=0;
 85         mesh_base1.material=mat_green;
 86         mesh_base1.layerMask=2;
 87         var mesh_base2=new BABYLON.MeshBuilder.CreateSphere("mesh_base2",{diameter:1},scene);
 88         mesh_base2.position.y=-10;
 89         mesh_base2.position.x=0;
 90         mesh_base2.material=mat_green;
 91         mesh_base2.layerMask=2;
 92       。
 93       。
 94       。
 95         MyBeforeRender();
 96     }
 97     function MyBeforeRender()
 98     {
 99         scene.registerBeforeRender(function() {
100             if(scene.isReady())
101             {
102                 。
103                 。
104                 。
105                 。
106                 。
107                 。
108             }
109         });
110         engine.runRenderLoop(function () {
111             engine.hideLoadingUI();
112             if (divFps) {
113                 // Fps
114                 divFps.innerHTML = engine.getFps().toFixed() + " fps";
115             }
116             scene.render();
117         });
118 
119     } 
120 </script>
121 </html>   

图片 23图片 24

这个3D场景包括了简单测试所需要的一些基本元素,这里使用的是包含全部组件的未压缩版Babylon.js库,在实际使用中考虑到节省带宽,可以使用Babylon.js官网提供的工具定制精简版或压缩版的Babylon.js库

var vm= new Vue({
        el:"#example01",
        data:{
            male:true,
            female: false,
            age:29,
            name:'colin'
        }
    })

2、建立一个基础网格

本文由金沙澳门官网网址发布于金沙澳门官网网址,转载请注明出处:js常用指令介绍,使用Chrome控制台进行3D模型编辑

关键词:

上一篇:布置之外你应当精晓的事,工具相关

下一篇:和煦做的叁个登录注册留言板的分界面未兑现效