这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历。(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~)

----------------------------------------------------------------分界线------------------------------------------------------------------

(顺便请教一下,分界线应该怎么弄才好看,每次调半天才合适!!!)

工程开始:

  1、目标:利用WebGL的第三方js库,three.js写一个简单的网页版“我的世界小游戏”。

    (当时定了这个题目之后我就后悔了,我这个菜鸟做一个这个还是有点难度的。)

  2、准备工作:

    1)首先了解一下three.js,其次你要了解一个最简单的demo的生成方式,这里我就转载一篇我们博客园博友的文章:【three.js详解之一】入门篇

       (我不知道能不能转载博友的文章,我私信他了,但还是没回,我相信他还是应该能接受的吧。)

      2)参考一下官方给出的一些three.js的例子,有些还是挺有意思的,【官方例子】

      3)其实还是要求一定的web基础的,懂一些html,JavaScript。

  3、进行时:

    1)html部分我就不详细讲解了,我就讲解一下重点的部分,首先我们需要引入两个js文件,three.js和Detector.js,第二个js文件的作用:Detector是一个探测器,用来探测WebGL的支持情况。

 <script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
</script>

     2)我们需要搭建一个场景,在我转载的博友的文章中,有详细的说明,这里我也简单的提一下。

      我把我的渲染器定义成了一个函数,然后通过函数的调用实现场景的布置。函数代码如下:

      (很多的代码我原来都不懂什么意思,注释都是我百度每一条什么意思然后添加上去的,希望可以帮助到大家)

      这里有几点需要注意:

      ①这里不是通过常规的添加html标签进行网页的设计,而是通过createElement的方法添加标签。

      ②渲染器、相机camera、场景scene、光源light、物体object是基本的五个部分。

      ③对于我添加的五个button按钮,他对应的有五个onclick事件,通过button的内容大家也不难看出来,其实每个事件对应的一个图形,玩过我的世界的人都应该知道,里面的工具很多,但是我就简单的添加了四个不一样的形状,因此我将五个method()函数封装了起来,然后通过统一的onclick点击调用实现形状的切换。

      ④最下面有四个分别对鼠标和shift按键的监听事件,字面意思很好理解,大家可以看一下,实现的函数将会在下面展示出来。

 <script>
function init(){ container = document.createElement( 'div' );//使用createElement创建一个div,就是整个页面
document.body.appendChild( container );//添加子节点 var info = document.createElement( 'div' );//在大的div中创建第一个div,表示head部分,名字为info
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '计算机图形学作业:简单模拟我的世界<br><strong>shift + click</strong>:移除图形<br>' +
'<button class="btn1" onclick="method1()">正方体</button><button class="btn2" onclick="method2()">球体</button>' +
'<button class="btn3" onclick="method3()">长方体</button><button class="btn4" onclick="method4()">圆柱体</button>' +
'<br><button class="btn5" onclick="method5()">预览</button>';
container.appendChild( info );//将创建的info添加到大的div中 camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );//设置透视投影的相机
camera.position.set( 500, 800, 1300 );//设置相机坐标
camera.lookAt( new THREE.Vector3() );//设置视野的中心坐标 scene = new THREE.Scene();//设置场景,场景是一个三维空间,用Scene类声明一个对象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, transparent: true } );
//创建一个线条材质,线条颜色黑色,透明度0.2
var line = new THREE.LineSegments( geometry, material );
scene.add( line );
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
geometry.rotateX( - Math.PI / 2 );
plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
scene.add( plane );
objects.push( plane );
// 创建环境光为灰色
var ambientLight = new THREE.AmbientLight( 0x606060 );
scene.add( ambientLight );
//创建平行光为白色
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
scene.add( directionalLight ); renderer = new THREE.WebGLRenderer( { antialias: true } );//生成渲染器对象,锯齿效果为true
renderer.setClearColor( 0xf0f0f0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );//鼠标移动事件
document.addEventListener( 'mousedown', onDocumentMouseDown, false );//鼠标点击事件
document.addEventListener( 'keydown', onDocumentKeyDown, false );//对shift按键的控制
document.addEventListener( 'keyup', onDocumentKeyUp, false );//对shift按键的控制
window.addEventListener( 'resize', onWindowResize, false );//窗口改变事件
} </script>

    可以先给大家看一看整个场景布置出来的效果:(很普通的一个格子状)

    

     3)这里引出一个问题,我们在点击选择了图形之后,我们需要一个选择的图形的预览,就跟随在你鼠标的左上方,时刻的提醒着你选择的是什么图形,说的有点抽象,我们看个实际图形吧!旁边那个虚虚的就是跟随在鼠标左右的,左边那个是实体,你的鼠标移动到那里,那个虚虚的就会跟随到那里。现在我们就实现一个功能,就以正方体为例子吧!

      

    代码如下:

 <script>
function methodfollow1(){
// 这个几何对象是鼠标在移动时候,跟随鼠标显示的几何对象
rollOverGeo = new THREE.BoxGeometry( 50, 50, 50 );//创建一个盒状几何对象
rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
//创建一个色彩为红色的材料,透明度为半透明
rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
//通过mesh方法把颜色应用到几何对象上
scene.add( rollOverMesh );
//最后把该立方体对象添加到场景scene中
}
</script>

    4)现在我们的跟随预览实现了,那么下面需要实现的就是我们添加到画布格子中的一个个图形了,还是以正方体为例子吧!直接看代码吧。

      注意:里面引用了methodfollow1()函数,很好理解,每个图形对应不同的实体和不同的跟随预览。还有一点需要注意是这个函数是你点击了button出发的click事件(两个)。

 <script>
function method1(){
methodfollow1();
// 实体对象,就是鼠标点击确定之后的实体对象,并且实体对象的图片引入
cubeGeo = new THREE.BoxGeometry( 50, 50, 50 );
cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c, map: new THREE.TextureLoader().load( "textures/square-outline-textured.png" ) } );
}
</script>

     5)正方体的实体和跟随预览的函数都写好了,这里需要讲两点:

       ①实体的四个函数和跟随预览的四个函数(当然你有多少个形状就写多少个函数,也可以统一封装成类进行调用),定义函数的方法是一样的,就像高中的同理可得。但是用到的图形函数不一样,我给大家简单列举几个吧,大家也可以去看看这个:点击我,关于函数的参数,大家可以自己去百度一下,这样自己理解的更快一点而且深刻。

 <script>
THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)//立方体
THREE.PlaneGeometry(width, height, widthSegments, heightSegments)//平面
THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength)//球体
THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)//圆形
THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)//圆柱体
THREE.TetrahedronGeometry(radius, detail)//正四面体
THREE.OctahedronGeometry(radius, detail)//正八面体
THREE.IcosahedronGeometry(radius, detail)//正二十面体
THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)//圆环面
</script>

      ②每一个button的click事件对应的method函数都需要先进行调用methodfollow函数,因为创建跟随预览是在创建实体之先。

     6)接下来讲一讲前面留下的四个监听事件。功能分别如下:

 onDocumentMouseMove:鼠标移动时发生的事件,主要是跟随预览
onDocumentMouseDown:鼠标点击确定发生的事件,主要是实体
onDocumentKeyDown
onDocumentKeyUp :这两个函数是对shift的控制,在我们添加错了图形之后,可以按下shift键来进行错误图形的删除

       实现的代码如下(实现的方法很多种,大家可以自由发挥):

 <script>
function onDocumentMouseMove( event ) {
event.preventDefault();//取消事件的默认动作
mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
var intersect = intersects[ 0 ];
rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
rollOverMesh.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
}
render();
}
function onDocumentMouseDown( event ) {
event.preventDefault();
mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
var intersect = intersects[ 0 ];
// delete cube
if ( isShiftDown ) {
if ( intersect.object != plane ) {
scene.remove( intersect.object );
objects.splice( objects.indexOf( intersect.object ), 1 );
}
// create cube
} else {
var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
voxel.position.copy( intersect.point ).add( intersect.face.normal );
voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
scene.add( voxel );
objects.push( voxel );
}
render();
}
}
function onDocumentKeyDown( event ) {
switch( event.keyCode ) {
case 16: isShiftDown = true; break;
}
}
function onDocumentKeyUp( event ) {
switch ( event.keyCode ) {
case 16: isShiftDown = false; break;
}
}
</script>

    7)这样一来,我们基本的大模块都已经完成了,那么接下来我们就看看我们的成果吧,很激动!(左边的四个形状的预览,是我后面添加的,利用几个html标签就行了)

 4、结束总结

    1、我把我的源代码贴出来吧!(可千万不要问我:我复制了源代码为什么预览不出来啊!!)

 <!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - interactive - voxel painter</title>
<meta charset="utf-8">
<title>opengl实现我的世界</title>
<meta name="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;
}
#aa{
font-size: 10px;
} #oldie { background-color: #ddd !important }
</style>
</head>
<body>
<a id="aa">正方体</a>
<img src="textures/zhengfangti.png">
<a id="aa">球体</a>
<img src="textures/qiuti.png">
<a id="aa">长方体</a>
<img src="textures/changfangti.png">
<a id="aa">圆柱体</a>
<img src="textures/yuanzhuti.png">
<script src="../build/three.js"></script>
<script src="js/Detector.js"></script>
<script src="js/jquery-2.2.4.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
//detector是一个探测器,引用了detector.js,用来探测webgl的支持情况 var container;
var camera, scene, renderer;
var plane, cube;
var mouse, raycaster, isShiftDown = false; var rollOverMesh, rollOverMaterial;
var cubeGeo, cubeMaterial; var objects = []; init();
render();//渲染 function init(){ container = document.createElement( 'div' );//使用createElement创建一个div,就是整个页面
document.body.appendChild( container );//添加子节点 var info = document.createElement( 'div' );//在大的div中创建第一个div,表示head部分,名字为info
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '计算机图形学作业:简单模拟我的世界<br><strong>shift + click</strong>:移除图形<br>' +
'<button class="btn1" onclick="method1()">正方体</button><button class="btn2" onclick="method2()">球体</button>' +
'<button class="btn3" onclick="method3()">长方体</button><button class="btn4" onclick="method4()">圆柱体</button>' +
'<br><button class="btn5" onclick="method5()">预览</button>';
container.appendChild( info );//将创建的info添加到大的div中 camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );//设置透视投影的相机
camera.position.set( 500, 800, 1300 );//设置相机坐标
camera.lookAt( new THREE.Vector3() );//设置视野的中心坐标 scene = new THREE.Scene();//设置场景,场景是一个三维空间,用Scene类声明一个对象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, transparent: true } );
//创建一个线条材质,线条颜色黑色,透明度0.2
var line = new THREE.LineSegments( geometry, material );
scene.add( line );
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
geometry.rotateX( - Math.PI / 2 );
plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
scene.add( plane );
objects.push( plane );
// 创建环境光为灰色
var ambientLight = new THREE.AmbientLight( 0x606060 );
scene.add( ambientLight );
//创建平行光为白色
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
scene.add( directionalLight ); renderer = new THREE.WebGLRenderer( { antialias: true } );//生成渲染器对象,锯齿效果为true
renderer.setClearColor( 0xf0f0f0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );//鼠标移动事件
document.addEventListener( 'mousedown', onDocumentMouseDown, false );//鼠标点击事件
document.addEventListener( 'keydown', onDocumentKeyDown, false );//对shift按键的控制
document.addEventListener( 'keyup', onDocumentKeyUp, false );//对shift按键的控制
window.addEventListener( 'resize', onWindowResize, false );//窗口改变事件
} //把创建鼠标跟随几何图形和实体图形都抽象成函数,通过点击事件进行调用
function method1(){
methodfollow1();
// 实体对象,就是鼠标点击确定之后的实体对象,并且实体对象的图片引入
cubeGeo = new THREE.BoxGeometry( 50, 50, 50 );
cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c, map: new THREE.TextureLoader().load( "textures/square-outline-textured.png" ) } );
}
function method2(){
methodfollow2();
// 实体对象,就是鼠标点击确定之后的实体对象,并且实体对象的图片引入
cubeGeo = new THREE.SphereGeometry( 50, 10, 10 );
cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x4D662D/*, map: new THREE.TextureLoader().load( "textures/square-outline-textured.png" )*/ } );
}
function method3(){
methodfollow3();
// 实体对象,就是鼠标点击确定之后的实体对象,并且实体对象的图片引入
cubeGeo = new THREE.CubeGeometry( 50, 100, 50 );
cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x4D662D, map: new THREE.TextureLoader().load( "textures/square-outline-textured.png" ) } );
}
function method4(){
methodfollow4();
// 实体对象,就是鼠标点击确定之后的实体对象,并且实体对象的图片引入
cubeGeo = new THREE.CylinderBufferGeometry( 25,25, 100, 50 ,50);
cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x4D662D, map: new THREE.TextureLoader().load( "textures/square-outline-textured.png" ) } );
}
function method5(){
window.open("newwindows.html","_blank","resizable=yes,scrollbars=yes,titlebar=yes,windth=800,height=800");
} function methodfollow1(){
// 这个几何对象是鼠标在移动时候,跟随鼠标显示的几何对象
rollOverGeo = new THREE.BoxGeometry( 50, 50, 50 );//创建一个盒状几何对象
rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
//创建一个色彩为红色的材料,透明度为半透明
rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
//通过mesh方法把颜色应用到几何对象上
scene.add( rollOverMesh );
//最后把该立方体对象添加到场景scene中
}
function methodfollow2(){
// 这个几何对象是鼠标在移动时候,跟随鼠标显示的几何对象
rollOverGeo = new THREE.SphereGeometry( 50, 10, 10 );//创建一个盒状几何对象
rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
//创建一个色彩为红色的材料,透明度为半透明
rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
//通过mesh方法把颜色应用到几何对象上
scene.add( rollOverMesh );
//最后把该立方体对象添加到场景scene中
}
function methodfollow3(){
// 这个几何对象是鼠标在移动时候,跟随鼠标显示的几何对象
rollOverGeo = new THREE.CubeGeometry( 50, 100, 50 );//创建一个盒状几何对象
rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
//创建一个色彩为红色的材料,透明度为半透明
rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
//通过mesh方法把颜色应用到几何对象上
scene.add( rollOverMesh );
//最后把该立方体对象添加到场景scene中
}
function methodfollow4(){
// 这个几何对象是鼠标在移动时候,跟随鼠标显示的几何对象
rollOverGeo = new THREE.CylinderGeometry( 25,25 ,100, 50,50 );//创建一个盒状几何对象
rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
//创建一个色彩为红色的材料,透明度为半透明
rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
//通过mesh方法把颜色应用到几何对象上
scene.add( rollOverMesh );
//最后把该立方体对象添加到场景scene中
} function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function onDocumentMouseMove( event ) {
event.preventDefault();//取消事件的默认动作
mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
var intersect = intersects[ 0 ];
rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
rollOverMesh.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
}
render();
}
function onDocumentMouseDown( event ) {
event.preventDefault();
mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
var intersect = intersects[ 0 ];
// delete cube
if ( isShiftDown ) {
if ( intersect.object != plane ) {
scene.remove( intersect.object );
objects.splice( objects.indexOf( intersect.object ), 1 );
}
// create cube
} else {
var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
voxel.position.copy( intersect.point ).add( intersect.face.normal );
voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
scene.add( voxel );
objects.push( voxel );
}
render();
}
}
function onDocumentKeyDown( event ) {
switch( event.keyCode ) {
case 16: isShiftDown = true; break;
}
}
function onDocumentKeyUp( event ) {
switch ( event.keyCode ) {
case 16: isShiftDown = false; break;
}
}
function render() { renderer.render( scene, camera ); } </script>
</body>
</html>

源代码

    2、其实这个小程序没什么多大的难度,主要是娱乐一下,可能有些大神能做出更好的,当然,我要是做的很好,我为什么还在上学呢,哈哈!

    3、这里又一个小小的私心,每次看到博客园的很多大牛,都是粉丝很多很多,我看了看我自己的只有3个,额,我的意思是希望大家相互关注一下,以后有什么好的博客,大家也能及时的看到!嘿嘿,不过这不是打广告,只是我感觉每次有个人关注我之后,我都兴奋了好几个小时,然后我也会关注他。

    4、大家有什么好的建议和意见都可以提出来,我都虚心接受的,我接触的东西肯定没有广大的博友多,希望大家相互照顾!谢谢。看了看时间:2016年6月25日凌晨3:34,从11点多开始写,改了很多地方,怕自己的东西大家看了不喜欢,我会努力的!该睡觉了,10点钟还有课呢,头疼/(ㄒoㄒ)/~~

分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”的更多相关文章

  1. [置顶] android利用jni调用第三方库——第三篇——编写库android程序整合第三方库libhello.so到自己的库libhelloword.so

    0:前言: 在第二篇中,我们主要介绍了丙方android公司利用乙方C++公司给的动态库,直接调用库中的方法,但是这样方式受限于: 乙方C++公司开发的动态库是否符合jni的规范,如果不规范,则不能直 ...

  2. [置顶] android利用jni调用第三方库——第二篇——编写库android程序直接调用第三方库libhello.so

    0:前言 1:本文主要作为丙方android公司的身份来写 2:作者有不对的地方,请指出,谢谢 [第一篇:android利用jni调用第三方库——编写库libhello.so] [第二篇:androi ...

  3. 利用SpringBoot+Logback手写一个简单的链路追踪

    目录 一.实现原理 二.代码实战 三.测试 最近线上排查问题时候,发现请求太多导致日志错综复杂,没办法把用户在一次或多次请求的日志关联在一起,所以就利用SpringBoot+Logback手写了一个简 ...

  4. 利用生产者消费者模型和MQ模型写一个自己的日志系统-并发设计里一定会用到的手段

    一:前言 写这个程序主要是用来理解生产者消费者模型,以及通过这个Demo来理解Redis的单线程取原子任务是怎么实现的和巩固一下并发相关的知识:这个虽然是个Demo,但是只要稍加改下Appender部 ...

  5. CS184.1X 计算机图形学导论 作业0

    1.框架下载 在网站上下载了VS2012版本的作业0的框架,由于我的电脑上的VS是2017版的,根据提示安装好C++的版本,并框架的解决方案 重定解决方案目标为2017版本. 点击运行,可以出来界面. ...

  6. linux内核分析作业:操作系统是如何工作的进行:完成一个简单的时间片轮转多道程序内核代码

    计算机如何工作 三个法宝:存储程序计算机.函数调用堆栈.中断机制. 堆栈 函数调用框架 传递参数 保存返回地址 提供局部变量空间 堆栈相关的寄存器 Esp 堆栈指针  (stack pointer) ...

  7. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

  8. 利用matlab写一个简单的拉普拉斯变换提取图像边缘

    可以证明,最简单的各向同性微分算子是拉普拉斯算子.一个二维图像函数 f(x,y) 的拉普拉斯算子定义为 ​ 其中,在 x 方向可近似为 ​ 同理,在 y 方向上可近似为 ​ 于是 我们得到满足以上三个 ...

  9. 转--利用函数模板技术,写一个简单高效的 JSON 查询器

    http://www.cnblogs.com/index-html/archive/2012/07/18/js_select.html http://www.ibm.com/developerwork ...

随机推荐

  1. Learning The Bash Shell读书笔记(整理)

    最近搞了一本书 Learning Bash Shell,发现有人已经写了阅读笔记,我就在这边整理一下 来自blog:http://blog.sina.com.cn/n4mine Learning Th ...

  2. 一次进程hang住问题分析。。。

    这两天有同学使用数据校验工具时发现进程hang住了,也不知道什么原因,我简单看了看进程堆栈,问题虽然很简单,但能导致程序hang住,也一定不是小问题.简单说明下程序组件的结构,程序由两部分构成,dbc ...

  3. 【JSP】JSP基础学习记录(二)—— JSP的7个动作指令

    2.JSP的7个动作指令: 动作指令与编译指令不同,编译指令是通知Servlet引擎的处理消息,而动作指令只是运行时的动作.编译指令在将JSP编译成Servlet时起作用:而处理指令通常可替换成JSP ...

  4. JavaScript日期控件,用select实现

    <!doctype html> <html> <head> <title>年月日</title> </head> <bod ...

  5. C++浅析——虚函数的动态和静态绑定

    源自一道面试题,觉得很有意思 class CBase { public: virtual void PrintData(int nData = 111); }; void CBase::PrintDa ...

  6. Java设计模式之代理模式

    代理模式的定义:为其他对象提供一种代理以控制对这个对象的访问.在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 代理模式: 人如其名,代理相 ...

  7. c++整型->字符型转换

    有itoa(),atoi(),sprintf()三个函数 使用字符串流: #include<iostream> #include<string> #include<sst ...

  8. 高级c++头文件bits/stdc++.h

    用这种方法声明头文件只需两行代码 #include<bits/stdc++.h> using namespace std; 这个头文件包含以下等等C++中包含的所有头文件: #includ ...

  9. pyenv 使用简介

    pyenv 是一个 python 版本管理工具,可以方便用户在不同的 python 版本间切换,例如我的电脑里默认的 python 是 2.6, 但我还想装 2.7 3.5 等.另有一个名为 pyen ...

  10. FFT,NTT 专题

    学习傅里叶的基本性质及其代码,可以参考大神理解 还有 ACdream 的博客 贴一下NTT的模板: using namespace std; typedef long long ll; int n; ...