菜单

JS实现三维场景_javascript技巧_脚本之家www.2138.com

2020年3月18日 - www.2138.com

www.2138.com,正文实例为大家享受了jQuery
Pagination分页插件的具体代码,供我们参照他事他说加以调查,具体内容如下

新近在看一些Web3D的从头到尾的经过,感到只要用纯openGLes写七个简约的3D场景太难了;不过幸而,有那多少个现存的库能够应用。

一、引用CSS和JS:

:小编清楚的平常的是Three.JS和SceneJS。认为Three.JS资料相当多,貌似好学一些吗;另一个是ScenenJS,认为官方介绍对比好,切合做一些工程和医术上的模拟,实时性相比好,然而普通话资料以为比少之甚少,不太好学习。笔者个人看的是Three.JS

二、HTML:

上学中用到的有的工具和库:学习中用到一些库,也费了成都百货上千日子去收拾,下载;
用到的工具:WebStorm,个人以为幸亏,即使说,发轫学不提议IDE,可是至少有代码提醒,会有函数的粗略表达,最少知道您输入的代码是或不是正确,假若智能提醒有,那么起码表明您输入的代码是正确的。

三、JS:

sublimeText
:三个文本工具,配置了也能够对代码有些提醒,不过,提醒成效不比正式IDE。速度很好;
工具不上传了,太大,能够团结去官方网址下载。

$ { var total = parseInt; var page = parseInt - 1; var pageSize = parseInt"); $.pagination(total, { callback: function  { window.location = "BoardList?page=" + page_id + "&pageSize=" + this.items_per_page; }, //PageCallback() 为翻页调用次函数。 prev_text: " 上一页", next_text: "下一页 ", items_per_page: 10, //每页的数据个数 num_display_entries: 1, //两侧首尾分页条目数 current_page: page, //当前页码 num_edge_entries: 11 //连续分页主体部分分页条目数 });});

Three.JS: JQuery-1.9.0.JS: JQuery-3.2.1.JS: stats.JS: dat.GUI.JS:
controlKit.JS: SceneJS.js:

四、后台代码:

私家也是初学,工具用的是WebStorm,上面是three.JS的首先个例子,代码中增加了很详细的降解,照着写,留心看看注释。学习的时候,个人提出把下载到库改良下名字,和您写的HTML文件统一置于多个文书夹中,那样像上边包车型地铁例子中,增多援用的库就足以了,要不就要钦命引用库的全路线。

public ActionResult BoardList(){ PagerModel pager = new PagerModel(); if (Request["page"] == null) { pager.page = 1; pager.rows = 10; pager.sort = "Id"; pager.order = "desc"; } else { pager.page = int.Parse + 1; pager.rows = int.Parse; pager.sort = "Id"; pager.order = "desc"; } boardManageService.GetList; List boardList = pager.result as List; ViewData["BoardModelList"] = boardList; ViewBag.page = pager.page; ViewBag.total = pager.totalRows; ViewBag.pageSize = pager.rows; return View();}#endregion
 Three.js 第一章学习        body{ margin: 0; overflow: hidden; } $ { <!--构建场景--> var scene = new THREE.Scene(); <!--建立相机,查看场景,透视相机--> var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); <!--构建渲染器,进行渲染--> var renderer = new THREE.WebGLRenderer(); <!--渲染背景色,不知道为什么在此学习过程中,该函数setClearColorHex()老是提示错误?--> // renderer.setClearColorHex; renderer.setClearColor; <!--渲染尺寸--> renderer.setSize(window.innerWidth,window.innerHeight); <!--添加一个辅助坐标轴--> var axes = new THREE.AxisHelper; <!--构建一个平面,物体将会放置在这个平面上--> <!--平面尺寸,100x60,宽度方向平分几分,高度方向平分几分,如果参数最后2位不是,平面会显示为网格平面--> var planeGeometry = new THREE.PlaneGeometry; <!--平面材质,仅仅指定颜色 0xcccccc--> var planeMaterial = new THREE.MeshBasicMaterial; <!--有尺寸和材质构建一个平面--> var plane = new THREE.Mesh(planeGeometry,planeMaterial); <!--把平面选择-90°,方便观察--> plane.rotation.x = -0.5*Math.PI; <!--指定平面的位置--> plane.position.x = 15; plane.position.y = 0; plane.position.z = 0; <!--把平面加入到场景中--> scene.add; <!--建立物体,一个立方体,一个球体--> <!--建立一个立方体--> <!--指定立方体的几何尺寸,长宽高,不包括位置--> var cubeGeometry = new THREE.CubeGeometry; <!--指定立方体的材质,仅仅指定颜色:0xFF0000,是否使用线框模式显示:是--> var cubeMaterial = new THREE.MeshBasicMaterial({color:0xFF0000,wireframe:true}); <!--以给定的几何尺寸和材质构建一个立方体--> var cube = new THREE.Mesh(cubeGeometry,cubeMaterial); <!--指定立方体的具体位置xyz--> cube.position.x =-4; cube.position.y =3; cube.position.z = 0; <!--把建立的立方体放入场景--> scene.add; <!--建立一个球体sphere--> <!--指定球体的几何尺寸,不包括位置;最后2个参数感觉是指定网格密度--> var sphereGeometry = new THREE.SphereGeometry; <!--指定球体材质,仅仅指定颜色:0xFF0000,是否以线框形式显示:是--> var sphereMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true}); <!--以给定的几何尺寸和材质,建立一个球体--> var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial); <!--指定球体的位置 X Y Z--> sphere.position.x =20; sphere.position.y=4; sphere.position.z = 0; <!--把建立的球体加入到场景中--> scene.add; <!--指定相机的位置和方向,决定我们在场景中如何看,能看到什么--> camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt; <!--利用JQuery查找到ID为WebGL-output的DIV,并把渲染到的东西输出到该DIV--> $.append; <!--利用渲染器以给定的相机去渲染场景--> renderer.render ;

越多精粹内容请点击:jquery分页功用汇总进行学习。

如上正是本文的全部内容,希望对我们的学习抱有助于,也可望我们多都赐教脚本之家。

如上正是本文的全体内容,希望对大家的读书抱有助于,也期待大家多都赐教脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图