分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试，所以一直没有更新我的博客，今天刚把我的期末作业完成了，心情澎湃，所以晚上不管怎么样，我也要写一篇博客纪念一下我上课都没有听，还是通过强大的度娘完成了我的作业的经历。（当然作业不是百度来的，我只是百度了一些示例代码的意思，怎么用！算了，越解释万一越黑呢！哈哈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写一个简单的网页版“我的世界小游戏”的更多相关文章
- [置顶] android利用jni调用第三方库——第三篇——编写库android程序整合第三方库libhello.so到自己的库libhelloword.so
0:前言: 在第二篇中,我们主要介绍了丙方android公司利用乙方C++公司给的动态库,直接调用库中的方法,但是这样方式受限于: 乙方C++公司开发的动态库是否符合jni的规范,如果不规范,则不能直 ...
- [置顶] android利用jni调用第三方库——第二篇——编写库android程序直接调用第三方库libhello.so
0:前言 1:本文主要作为丙方android公司的身份来写 2:作者有不对的地方,请指出,谢谢 ［第一篇:android利用jni调用第三方库——编写库libhello.so］ ［第二篇:androi ...
- 利用SpringBoot+Logback手写一个简单的链路追踪
目录 一.实现原理 二.代码实战 三.测试 最近线上排查问题时候,发现请求太多导致日志错综复杂,没办法把用户在一次或多次请求的日志关联在一起,所以就利用SpringBoot+Logback手写了一个简 ...
- 利用生产者消费者模型和MQ模型写一个自己的日志系统-并发设计里一定会用到的手段
一:前言 写这个程序主要是用来理解生产者消费者模型,以及通过这个Demo来理解Redis的单线程取原子任务是怎么实现的和巩固一下并发相关的知识:这个虽然是个Demo,但是只要稍加改下Appender部 ...
- CS184.1X 计算机图形学导论 作业0
1.框架下载 在网站上下载了VS2012版本的作业0的框架,由于我的电脑上的VS是2017版的,根据提示安装好C++的版本,并框架的解决方案 重定解决方案目标为2017版本. 点击运行,可以出来界面. ...
- linux内核分析作业：操作系统是如何工作的进行:完成一个简单的时间片轮转多道程序内核代码
计算机如何工作 三个法宝:存储程序计算机.函数调用堆栈.中断机制. 堆栈 函数调用框架 传递参数 保存返回地址 提供局部变量空间 堆栈相关的寄存器 Esp 堆栈指针 (stack pointer) ...
- 利用JS实现一个简单的二级联动菜单
前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...
- 利用matlab写一个简单的拉普拉斯变换提取图像边缘
可以证明,最简单的各向同性微分算子是拉普拉斯算子.一个二维图像函数 f(x,y) 的拉普拉斯算子定义为 其中,在 x 方向可近似为 同理,在 y 方向上可近似为 于是 我们得到满足以上三个 ...
- 转--利用函数模板技术，写一个简单高效的 JSON 查询器
http://www.cnblogs.com/index-html/archive/2012/07/18/js_select.html http://www.ibm.com/developerwork ...
随机推荐
- Java集合分组
public class Data { private Long id ; private Long courseId ; private String content ; public Long g ...
- SQL Server（六）——索引、视图和SQL编程
1.索引 添加索引,设计界面,在任何一列前右键--索引/键--点击进入添加某一列为索引 2.视图 视图就是我们查询出来的虚拟表 创建视图:create view 视图名 as SQL查询语句,分组,排 ...
- 树莓派搭建安装mysql
最近刚入手了一枚树莓派,突发奇想打算做一个小型的家用服务器,在家7*24小时一直挂着. 真的是非常小,只有巴掌大,给树莓派买了一些配件,外壳.小风扇.2片散热片.32G SD卡.HDMI线,组装之后的 ...
- shell编程入门
背景知识 Shell 是用户与内核进行交互操作的一种接口,是 Linux 最重要的软件之一.目前最流行的 Shell 称为 bash Shell,bash Shell 脚本编程以其简洁.高效而著称,多 ...
- Fitbit Flex 智能手环佩戴心得 主要说说过敏
参杂一篇杂文. 也是因为体重飙升,所以去年下半年的时候入手了一个Fitbit flex. 当时相比Jawbone up,nfc和ble的特性,以及防水性还是更吸引我一点.所以就入手了. 佩带了如此长的 ...
- CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]
一.前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...
- 报表引擎API开发入门—简单程序数据集
小编最近接的项目是有关报表开发的,很想把这部分知识分享出来.希望大家能够支持我!不多说,马上进入我们今天的话题. API基本知识 小编最近项目所做的是关于一个报表软件—FineReport报表开发的一 ...
- css3 border-radius
前缀对应浏览器 前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera border-radius: <style type=&quo ...
- .Net程序员之Python基础教程学习----字典的使用 [Third Day]
今天学习了字典的使用, 所谓的字典其实就是键值对数据, 一个字典里面有唯一的Key对应一个value,Key是唯一的,Value不唯一. 在.net添加相同的Key会报错,在Python,若出现相 ...
- 如何用ZBrush做人体造型雕刻
之前我们用ZBrush®中的Curves和Insert笔刷快速创建模型的躯干.四肢以及手指.经过老师耐心的讲解我们也收获了很多,知道了创建模型的流程和雕刻技巧.今天的ZBrush教程将结合一些新的雕刻 ...