WebGL three.js学习笔记 6种类型的纹理介绍及应用

nsytsqdtn 2019-05-15 22:39:00 阅读数:25 评论数:0 收藏数:0

WebGL three.js学习笔记 6种类型的纹理介绍及应用

本文所使用到的demo演示:

高光贴图Demo演示

反光效果Demo演示(因为是加载的模型,所以速度会慢)

(一)普通纹理

计算机图形学中的纹理既包括通常意义上物体表面的纹理即使物体表面呈现凹凸不平的沟纹,同时也包括在物体的光滑表面上的彩色图案,所谓的纹理映射就是在物体的表面上绘制彩色的图案。

在three.js中使用纹理可以实现很多不同的效果,但是最基本的就是为网格体的每个像素指定颜色。等同于将一张纹理图片应用在一个几何体的材质上。

使用的方式很简单,只需要设置
material.map = 需要设置的纹理对象
纹理对象的获得方式也很简单,只需要使用THREE.TextureLoader().load(url)函数就可以为url指定路径的纹理图片创建一个对象。具体的使用方式如下:

        let texture = new THREE.TextureLoader().load("../../../Image/metal-rust.jpg");
        let material = new THREE.MeshBasicMaterial();
        material.map = texture;
        let geometry = new THREE.BoxGeometry(10,10,10);
        let cube = new THREE.Mesh(geometry,material);
        scene.add(cube);

其中,"../../../Image/metal-rust.jpg"是我使用的纹理的路径,图片就是下面这一张
纹理贴图1
创建出来的带有上图纹理的cube就是这样的
普通纹理
除了THREE.TextureLoader()这个加载器以为,three.js还为我们提供了其他自定义的加载器,如dds格式,pvr格式,tga格式。

就拿tga格式举例,我们要加载tga格式的纹理,首先需要引用TGALoader.js这个文件,然后创建一个tga格式的加载器
let loader = new THREE.TGALoader();
我们就可以使用loader这个加载器,像上面一样的加载tga格式的纹理了。
具体代码如下:

        let loader = new THREE.TGALoader();
        let texture = loader.load("../../../Image/crate_color8.tga");
        let material = new THREE.MeshBasicMaterial();
        material.map = texture;
        let geometry = new THREE.BoxGeometry(10,10,10);
        let cube = new THREE.Mesh(geometry,material);
        scene.add(cube);

下面是我使用的tga格式的纹理图片(只能上传截图,tga格式图片的这里上传不了)
tga纹理图片
运行出来是这个样子的
tga纹理
其他格式的加载也是和tga格式加载方法一样的,只需要引入相应的js文件就可以使用了。

(二)凹凸贴图

凹凸纹理用于为材质添加厚度与深度,如字面意思一样,可以让材质看上去是凹凸不平的。凹凸贴图只包含像素的相对高度,像素的密集程度定义凹凸的高度,所以想要让物体好看,首先还是应该设置一个普通的纹理,再在这个基础上添加一个凹凸纹理,就可以实现凹凸不平的物体效果。
凹凸贴图的创建方法很简单,和普通纹理类似,只是我们设置的不是map,而是bumpMap
material.bumpMap = 需要设置的纹理对象

特别需要注意的是,这里的材质只能使用MeshPhongMaterial,凹凸贴图才会有效果。
具体的设置方法如下:

        let geom = new THREE.BoxGeometry(10, 10, 10);
        
        //创建普通纹理材质
        let texture = new THREE.TextureLoader().load("../../../Image/stone.jpg");
        let material = new THREE.MeshPhongMaterial({
            map:texture
        });
        cube = new THREE.Mesh(geom,material);
        cube.position.set(-7,0,0);
        scene.add(cube);

        //创建凹凸纹理材质
        let bumpTexture = new THREE.TextureLoader().load("../../../Image/stone-bump.jpg");
        let bumpMaterial = new THREE.MeshPhongMaterial({
            map:texture,
            bumpMap:bumpTexture,
            bumpScale:2
        });
        bumpCube = new THREE.Mesh(geom,bumpMaterial);
        bumpCube.position.set(7,0,0);
        scene.add(bumpCube);

其中material.bumpScale可以设置凹凸的高度,如果为负值,则表示的是深度。

运行程序截图如下:
左边材质的是普通的纹理贴图,右边的材质是带有凹凸纹理的,当前bumpScale设置的是2,两者看上去有比较明显的不同
凹凸纹理
使用的纹理图片如下:
纹理2
凹凸纹理图片:
凹凸纹理

我们可以发现,凹凸图只包含了像素的相对高度,没有任何的倾斜的方向信息,所以使用凹凸纹理能表达的深度信息有限,如果想用实现更多的细节可以使用下面介绍的法向贴图。

(三)法向贴图

法向贴图保存的不是高度的信息,而是法向量的信息,我们使用法向贴图,只需要很少的顶点和面就可以实现很丰富的细节。
同样的,实现法向贴图和凹凸贴图也很类似,只需要设置
material.normalMap = 需要设置的纹理对象

同样也是在MeshPhongMaterial材质中才有效果,还要注意的一点是设置normalScale指定材质的凹凸程度时,normalScale需要接受的是一个THREE.Vector2类型

具体的代码如下:

        let geom = new THREE.BoxGeometry(10, 10, 10);

        //创建普通纹理材质
        let texture = new THREE.TextureLoader().load("../../../Image/plaster.jpg");
        let material = new THREE.MeshPhongMaterial({
            map:texture
        });
        cube = new THREE.Mesh(geom,material);
        cube.position.set(-7,0,0);
        scene.add(cube);

        //创建凹凸纹理材质
        let normalTexture = new THREE.TextureLoader().load("../../../Image/plaster-normal.jpg");
        let normalMaterial = new THREE.MeshPhongMaterial({
            map:texture,
            normalMap:normalTexture,
            normalScale:new THREE.Vector2(1,1)
        });
        normalCube = new THREE.Mesh(geom,normalMaterial);
        normalCube.position.set(7,0,0);
        scene.add(normalCube);

场景如下图,右边的是带有法向纹理的物体,明显感觉出材质的细节多出来了很多。
法向贴图
用到的纹理图
plaster
法向纹理图:
plaster-normal
虽然法向纹理能带给物体更逼真的效果,但是想要创建法向纹理图,本身就比较困难,需要ps或者blender这样的特殊工具。

(四)光照贴图

如果我们想在场景中添加阴影,three.js给我们提供了renderer.shadowMapEnabled = true这个办法,但是这对于资源的消耗是很大的。如果我们只是需要对静态的物体添加阴影效果,我们就有一种开销很小的办法,那就是光照贴图。
光照贴图是预先渲染好的阴影贴图,可以用来模拟真实的阴影。我们能使用这种技术创建出分辨率很高的阴影,并且不会损耗渲染的性能。因为是提前根据场景渲染好的,所以只对静态的场景有效。

比如下面这张光照贴图:
光照贴图
设置光照贴图的方式很简单,只需要设置
material.lightMap = 需要设置的纹理对象
和前面两个没什么太大的区别。当纹理设置好以后,我们还需要把我们的物体摆放在正确的位置,这样阴影效果才会真实的显现出来。

        let lightMap = new THREE.TextureLoader().load("../../../Image/lm-1.png");
        let map =  new THREE.TextureLoader().load("../../../Image/floor-wood.jpg");
        //创建地板
        let planeGeo = new THREE.PlaneGeometry(95,95,1,1);
        planeGeo.faceVertexUvs[1] = planeGeo.faceVertexUvs[0];
        let planeMat = new THREE.MeshBasicMaterial({
            color:0x999999,
            lightMap:lightMap,//在地板的材质上添加光照贴图
            map:map//地板的普通纹理材质
        });
        let plane = new THREE.Mesh(planeGeo,planeMat);
        plane.rotation.x = -Math.PI / 2;
        plane.position.y = 0;
        scene.add(plane);

        //创建大的cube
        var boxGeo = new THREE.BoxGeometry(12,12,12);
        var material = new THREE.MeshBasicMaterial();
        material.map = new THREE.TextureLoader().load("../../../Image/stone.jpg");
        var box = new THREE.Mesh(boxGeo,material);
        box.position.set(0.9,6,-12);
        scene.add(box);

        //创建小的cube
        var boxGeo = new THREE.BoxGeometry(6, 6, 6);
        var material = new THREE.MeshBasicMaterial();
        material.map = new THREE.TextureLoader().load("../../../Image/stone.jpg");
        var box = new THREE.Mesh(boxGeo,material);
        box.position.set(-13.2, 3, -6);
        scene.add(box);

其中,planeGeo.faceVertexUvs[1] = planeGeo.faceVertexUvs[0] 这句话是我们需要明确的指定光照贴图的uv映射(将纹理的哪一部分应用在物体表面)这样才能将光照贴图的使用和其他的纹理分别开来。
planeGeo.faceVertexUvs保存的就是几何体面的uv映射信息,我们将faceVertexUvs[0]层的信息保存到faceVertexUvs[1]层

faceVertexUvs的官方文档解释:

.faceVertexUvs : Array
Array of face UV layers, used for mapping
textures onto the geometry. Each UV layer is an array of UVs matching
the order and number of vertices in faces.

运行结果如图:
光照贴图

(五)高光贴图

高光是光源照射到物体然后反射到人的眼睛里时,物体上最亮的那个点就是高光,高光不是光,而是物体上最亮的部分。
而高光贴图就是高光贴图是反应光线照射在物体表面的高光区域时所产生的环境反射,它的作用是反映物体高光区域效果。

通过高光贴图,我们可以为材质创建一个闪亮的、色彩明快的贴图。高光贴图的黑色部分会暗淡,而白色的部分会比较的亮。
创建高光贴图的方法也和前面差不多
material.specularMap= 需要设置的纹理对象

具体的代码如下:

        let map = new THREE.TextureLoader().load("../../../Image/Earth.png");
        let specularMap = new THREE.TextureLoader().load("../../../Image/EarthSpec.png");
        let normalMap = new THREE.TextureLoader().load("../../../Image/EarthNormal.png");
        let sphereMaterial = new THREE.MeshPhongMaterial({
            map:map,
            specularMap:specularMap,
            normalMap:normalMap,
            normalScale:THREE.Vector2(2,2),
            specular:0x0000ff,
            shininess:2
        });
        let sphereGeometry = new THREE.SphereGeometry(30,30,30);
        let sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
        scene.add(sphere);

这段代码创建了一个球体,并为球体的材质贴上了普通纹理,法向纹理和高光纹理,其中specular属性可以决定反光的颜色,shininess可以决定发光的亮度。

运行出来的样子如下:
可以看到,海洋的地方比较亮,而大陆的的颜色相对较暗。
高光贴图

高光贴图Demo演示

用到的几张纹理图:
纹理
高光纹理:
高光纹理
法向纹理:
法向纹理

(六)环境贴图

如果我们想要在场景中创建反光的物体,通常会使用光线追踪的算法,但是这对cpu的消耗是巨大的,但是环境贴图就给我们创造了更容易的方法,我们只需要使用给物体的材质贴上环境贴图,就可以模拟反光的效果。

首先我们的场景需要有一个环境,这个环境我们可以使用CubeTextureLoader()来创建。在前面的文章里曾经介绍过如何创建360度全景的环境,这个CubeTextureLoader()和那里面用到的其实是一样的,只是版本的更替,现在更多使用这个函数。
具体用法是:

        let cubeMap = new THREE.CubeTextureLoader().setPath(
        "../../../Image/MapCube/Bridge2/").load(
            [
                'posx.jpg',
                'negx.jpg',
                'posy.jpg',
                'negy.jpg',
                'posz.jpg',
                'negz.jpg'
            ]);
        scene = new THREE.Scene();
        scene.background = cubeMap;

在前面的文章已经介绍过,这里就不再赘述。
创建cubeMap所用到的图片在http://www.humus.name/index.php?page=Textures可以直接下载。

我们有了一个可以反射的环境以后,就可以开始为我们的物体创建材质贴图了。
创建材质贴图的方式和前面还是差不多
material.envMap = scene.background;

scene.background就是我们刚刚所创建的场景的背景,这样材质的环境贴图就相当于贴上了周围环境,从摄像机去看物体的话,看上去就是对环境有一个反射的效果了。

创建的代码如下:

       function initObject()
       {
       let material = new THREE.MeshPhongMaterial();
       material.envMap = scene.background;
       let boxGeometry = new THREE.BoxGeometry(5,50,50);
       let box = new THREE.Mesh(boxGeometry,material);
       box.position.set(-70,0,-10);
       box.rotation.y-=Math.PI/2;
       scene.add(box);
       let sphereGeometry = new THREE.SphereGeometry(30,30,30);
       let sphere = new THREE.Mesh(sphereGeometry,material);
       sphere.position.set(70,0,-10);
       scene.add(sphere);
       }

和前面的代码没有太大的区别,这里主要是创建了两个物体,都使用的相同环境贴图的材质。

运行的结果:
环境贴图
可以看到,这两个物体都对环境有反射的效果。

值得注意的是,我们使用环境贴图创建的材质仅仅静态的环境贴图。我们只能看到物体上面有周围环境的反射,看不到物体对其他物体的反射。

如果我们要看到物体对其他物体的反射,我们可以使用一个新的对象——cubeCamera
创建cubeCamera的方法很简单.
let cubeCamera = new THREE.CubeCamera(0.1, 2000, 2048);
scene.add(cubeCamera);

其中:
第一个参数0.1是相机的近裁剪距离
第二个参数2000是相机远裁剪距离
第三个参数2048是相机分辨率

使用THREE.CubeCamera可以为场景中所要渲染的物体创建快照,并使用这些快照创建CubeMap对象。但是需要确保摄像机被放置在THREE.Mesh网格上你所想显示反射的位置上。例如,我们想在球体的中心显示反射,由于球体所处的位置是(0, 0, 0),所以我们没有显示的指定THREE.CubeCamera的位置。我们只是将动态反射应用于球体上,所以把它的envMap设置为cubeCamera.renderTarget
即material.envMap = cubeCamera.renderTarget;

简单来说,就是把我们所要显示反射的“镜子”的material.envMap设置为cubeCamera.renderTarget,同时还要把cubeCamera的位置设置到镜子的位置,cubeCamera.position.copy(镜子.position);

代码如下:

        let loader = new THREE.STLLoader();
        loader.load("../../../asset/LibertStatue.obj.stl",function (bufferGeometry)
        {
            let material = new THREE.MeshBasicMaterial();
            material.envMap=scene.background;
            obj = new THREE.Mesh(bufferGeometry,material);
            obj.scale.set(50,50,50);
            scene.add(obj);
        });//加载stl模型
       
        let cubeMaterial = new THREE.MeshPhongMaterial();
        cubeMaterial.envMap = cubeCamera.renderTarget;
        let boxGeometry = new THREE.BoxGeometry(3, 400, 400);
        let box = new THREE.Mesh(boxGeometry, cubeMaterial);
        box.position.set(0, 0, -300);
        box.rotation.y -= Math.PI / 2;
        scene.add(box);
        cubeCamera.position.copy(box.position);

这段代码中,我们从外部加载了一个stl格式的模型,也可以就使用简单的几何体来演示。下面的一部分代码就创建了可以反射的镜子。

最后,我们还需要在render()中添加cubeCamera.update(renderer, scene)用cubeCamera进行渲染

function render()
    {
        if(obj) obj.rotation.y+=0.02;
        cubeCamera.update(renderer, scene);
        stats.update();
        renderer.clear();
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }

运行后的情况如下:
cubeCamera
我们可以看到我们加载的stl模型在我们创建的镜子中反射出来了,并且会根据模型的移动,镜子的反射也会自动变化。

反光效果Demo演示

以上就是介绍的全部类型的纹理。

反光效果demo的完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Environment Map</title>
    <script src="../../../import/three.js"></script>
    <script src="../../../import/stats.js"></script>
    <script src="../../../import/Setting.js"></script>
    <script src="../../../import/OrbitControls.js"></script>
    <script src="../../../import/STLLoader.js"></script>
    <style type="text/css">
        body {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 1000px;
            /*全屏显示的设置*/
            margin: 0;
            overflow: hidden; /*消除浏览器的滚动条*/

        }

        /*加载动画*/
        #loading {
            width: 100%;
            height: 850px;
            background-color: #333333;
        }

        #spinner {
            width: 100px;
            height: 100px;
            position: fixed;
            top: 50%;
            left: 50%;
        }

        .double-bounce1, .double-bounce2 {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #67CF22;
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-animation: bounce 2.0s infinite ease-in-out;
            animation: bounce 2.0s infinite ease-in-out;
        }

        .double-bounce2 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }

        @-webkit-keyframes bounce {
            0%, 100% {
                -webkit-transform: scale(0.0)
            }
            50% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes bounce {
            0%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            50% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }
    </style>
</head>
<body onload="Start()">
<!--加载动画的div-->
<div id="loading">
    <div id="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>
<script>
    let camera, renderer, scene, cubeCamera, light;
    let controller;

    function initThree()
    {
        //渲染器初始化
        renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x333333);
        document.body.appendChild(renderer.domElement);//将渲染添加到body中
        //初始化摄像机,这里使用透视投影摄像机
        camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 10000);
        camera.position.set(20, 15, 200);
        camera.up.x = 0;//设置摄像机的上方向为哪个方向,这里定义摄像的上方为Y轴正方向
        camera.up.y = 1;
        camera.up.z = 0;
        camera.lookAt(0, 0, 0);

        let cubeMap = new THREE.CubeTextureLoader().setPath("../../../Image/MapCube/Bridge2/").load(
            [
                'posx.jpg',
                'negx.jpg',
                'posy.jpg',
                'negy.jpg',
                'posz.jpg',
                'negz.jpg'
            ]);
        scene = new THREE.Scene();
        scene.background = cubeMap;

        cubeCamera = new THREE.CubeCamera(0.1, 1000, 2048);
        scene.add(cubeCamera);
        //相机的移动
        controller = new THREE.OrbitControls(camera, renderer.domElement);
        controller.target = new THREE.Vector3(0, 0, 0);

        light = new THREE.AmbientLight(0xffffff);
        light.position.set(-50, -50, -50);
        scene.add(light);
    }
    
     let obj;
    function initObject()
    {
        let loader = new THREE.STLLoader();
        loader.load("../../../asset/LibertStatue.obj.stl",function (bufferGeometry)
        {
            let material = new THREE.MeshBasicMaterial();
            material.envMap=scene.background;
            obj = new THREE.Mesh(bufferGeometry,material);
            obj.scale.set(50,50,50);
            scene.add(obj);
            console.log(obj);
        });
        let cubeMaterial = new THREE.MeshPhongMaterial();
        cubeMaterial.envMap = cubeCamera.renderTarget;
        let boxGeometry = new THREE.BoxGeometry(3, 400, 400);
        let box = new THREE.Mesh(boxGeometry, cubeMaterial);
        box.position.set(0, 0, -300);
        box.rotation.y -= Math.PI / 2;
        scene.add(box);
        cubeCamera.position.copy(box.position);
        document.getElementById('loading').style.display = 'none';
    }
    //渲染函数
    function render()
    {
        if(obj) obj.rotation.y+=0.02;
        cubeCamera.update(renderer, scene);
        stats.update();
        renderer.clear();
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }

    //功能函数
    function setting()
    {
        loadFullScreen();
        loadAutoScreen(camera, renderer);
        loadStats();
    }

    //运行主函数
    function Start()
    {
        initThree();
        initObject();
        setting();
        render();
    }
</script>
</body>
</html>

版权声明:本文为[nsytsqdtn]原创文章
转载请带上:http://copyfuture.com/blogs-details/883fd5116d75d75e4a95d199cdb166ed
或:https://www.cnblogs.com/nsytsqdtn/p/10872682.html


  1. 假设你加速到了光速或接近光速,你朝前开一枪,子弹会超光速吗?
  2. 不想让孩子成为败家子,财商教育必不可少
  3. 一朵被两座7000米级雪山守护的圣莲
  4. 从前车马太慢 书信往来太久 一生只能够爱一个人
  5. 美国驻马店之殇!雷霆被打压害惨威少,1.37亿巨星或步杜兰特后尘
  6. 他白手起家,成江苏省首富身家430亿,学霸儿子毕业于清华大学
  7. 在试管婴儿中这五个“为什么”您了解嘛?
  8. FB首席AI科学家Yann LeCun:没错,我们决定自己开发AI芯片
  9. 完全没主权玻利瓦尔什么事!在大停电后委内瑞拉美元化已是事实
  10. 从门票“小账”到旅游“大账” 门票降价,“故地重游”多起来
  11. python基础day2
  12. Redmi波轮洗衣机发布丨MIUI搞个投票有意思丨小米印度再下血本
  13. 肾脏病吃豆腐是服“砒霜”?医生提醒:1类患者吃了反而有利康复
  14. 9102年了,你还在用for循环操作集合?
  15. “超新星”是恒星生命的起点吗,超新星爆发与黑洞有什么关系?
  16. P2P技术详解(一):NAT详解——详细原理、P2P简介
  17. 张扣扣故意杀人案二审开庭,现场直击庭审前后
  18. 《瑯琊榜》配角演员都红了!盘点8位变熟悉的他们
  19. 代码精进之路读后感(二)
  20. Windows Phone 项目实战之账户助手
  21. 李世民发动玄武门之变的深层原因
  22. DNF活动送哈林史诗优先选哪些?这3件可以忽略,新活动送“毕业”
  23. 电脑病毒竟然被程序员当宠物养!网友:病毒可以这么可爱?
  24. 【超详细教程】使用Windows Live Writer 2012和Office Word 2013 发布文章到博客园全面总结
  25. 2选1!杜兰特最新伤情出炉,火勇大战再添变数,科尔或将重启奇阵
  26. 预防骨质疏松吃什么?补肾、健脾胃,双管齐下
  27. 为什么汽车厂商还没全面倒向OTA升级?
  28. 10年Java开发经验亲自笔述Java开发学习路线
  29. 要砸多少钱才能读哈佛?
  30. 董明珠:要倡导利他思想 会确保格力员工都有房
  31. 带你入门 Docker
  32. 迪士尼正式收购21世纪福克斯
  33. 出道即巅峰,有哪些昙花一现的职业选手让你觉得惋惜?
  34. Data Lake Analytics的Geospatial分析函数
  35. 里根号航母被瑞典鱼雷“击沉”:航母反潜系统吃干饭的?
  36. 富士康郑州厂区春节后招募5万人 台媒称获华为订单
  37. Doinb直播自曝:找丈母娘要钱的时候紧张
  38. 模仿王菲像哪吒闹海?那英全程憋笑,要被沈腾的美貌醉倒了
  39. Perl一行式:处理行号和单词数
  40. 美军新航母全电力推进(1)——全电推进有啥好处?
  41. 沾血、带药水的输液瓶,变成孩子嘴里的玩具!说了你都不敢信
  42. 博士不唯论文只是前进一小步
  43. Spring Boot入门(三):使用Scheduled注解实现定时任务
  44. 五个历史上最大投资失误:股神巴菲特也有失策时!
  45. 水原法院批准警方拘留朴有天
  46. 双语阅读(37):林书豪用实力重新定义“不可能”
  47. 泰达主帅坦言U23球员差距太大,恒大小胜泰达赛后各方声音汇总
  48. 插座一哥公牛集团上市遭到“狙击”,揭秘国内插座企业“暗战”!
  49. 部署kubernetes-dashboard
  50. 欧冠十年两茫茫,天让梅罗再对决?梅西C罗终极之战谁不想看!
  51. 此人和李鸿章齐名,权倾一时,没想到晚年竟遭人如此羞辱
  52. 腾讯CSIG事业群测试开发二面
  53. 实用丨口红断了、粉饼碎了、粉底用完……还有救吗?
  54. 2018年经典摘抄
  55. 如何做才能使受损的糖耐量恢复正常?
  56. 剑网3一张月卡60,真能赚钱吗?郭炜炜的经商之道,你可能不知道
  57. 做游戏的也来造汽车? 法拉第与九城合资生产豪华电动车
  58. 亚马逊大肆扩张物流与航运能力 拟打造物流业巨头
  59. 华山秘密之黑龙潭的秘密~
  60. 全国人大代表孔涛建议:尽快制定法规政策保护红领巾标识
  61. 全新雪佛兰科鲁泽实车正式亮相!车长4630mm 配英朗发动机
  62. 飞行基本知识:飞机的驾驶特性与飞行控制
  63. 阴差阳错登基当皇帝,却毁了一生
  64. 81For全栈技术网
  65. 川航国内线99元还有第2波!全国多城往返198元起!多线小神价!
  66. 真空不空(三)——空间的证据
  67. 职场上,这4个真相越早知道越好
  68. 澜溪机场街拍,看起来像路人,却很实用
  69. NBA最强防守球员回来了!哈登被防到15中3!保罗这一盖都值4000万
  70. 【人脑只用了不到 5%】的说法是否确有科学依据?
  71. 政府工作报告中的这些概念,你一定要知道!
  72. 从 docker 到 runC
  73. 京东求变:除了业务创新 许多问题待时间解答
  74. 当年张艺谋因为超生被罚款748万,如今子女各个成了人中龙凤
  75. 微软押注5G杀手级应用 “全互联PC”或许是个错误
  76. Epic:与腾讯是竞争关系不听他们指挥,注册用户已达8500万
  77. 王源在最新文章中提到父母,和龙应台的《目送》很相似,粉丝泪奔
  78. 《都挺好》苏大强:被倪大红演活的中国小男人,观众盼他早领盒饭
  79. element-tree-grid(表格树)的使用
  80. 阿根廷输球的当天,前主帅带队首秀击败南美冠军
  81. 我的博客园css模板美化的经验分享
  82. 数据可视化工具调研和选型
  83. 张嘉倪说出不跳伞原因,被章子怡质问,张嘉倪无地自容!
  84. 华为和阿里巴巴到底谁的实力更强大?
  85. 逆天了!49岁“雪姨”王琳跟儿子酷似姐弟?看完我哭了!
  86. 一种奇怪的船舶全向推进器,又有谁看懂了它的原理呢?
  87. 多走路、多喝水…以为养生?可能是养病!国医大师道出长寿智慧
  88. 穆里尼奥执教条件曝光!愿接受新挑战,坚信姆巴佩会“超越”梅罗
  89. 朗读者“精选”85句语录!
  90. 中国最狠销售:一年搞定1000亿,马化腾都服气!
  91. 戴尔被AMD征服:霄龙服务器增至三倍 快入引入7nm二代
  92. 江西一老太打.麻.将没有输过,临死前告诉儿子,记住"3不要"
  93. JDK下载与安装、 Eclipse下载与使用的总结心得_20173311118_牛明旺
  94. Google 纪念万维网 30 年:没有 HTTP 协议就没有互联网
  95. Visual Studio Code 1.31.1发布
  96. 稀有元素镅发电实验首获成功
  97. 观察纳米世界的眼睛,复杂到可怕的大型精密仪器!
  98. 日本机场现神秘包裹,大批记者围观,内藏物品让中国网友炸锅
  99. 这年头做开源项目,被冷嘲热讽,FreeSql 0.0.4
  100. 电动超跑上市半年,后补贴时代前途将何去何从?

  1. Python开发:部分第三方库无法在线安装解决方法(947)
  2. [Swift]LeetCode325. 最大子数组之和为k $ Maximum Size Subarray Sum Equals k(779)
  3. Matlab 2019a 安装包下载以及安装和激活(718)
  4. 仅限Edge和Chrome访问 全新网页端Skype应用上线(685)
  5. 前端笔记之NodeJS(一)初识NodeJS&内置模块&特点(683)
  6. C#读取excel文件提示未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序(663)
  7. 【预警通告】Weblogic反序列化远程代码执行漏洞(640)
  8. Visual Studio 2019 正式发布,重磅更新,支持live share(599)
  9. 【预警通告】Apache Tomcat远程代码执行漏洞CVE-2019-0232(573)
  10. 网上赌博平台维护审核提不了款怎么办?(535)
  11. React 与 React-Native 使用同一个 meteor 后台(527)
  12. Sublime Text3 最新版3207 安装及破解(458)
  13. Visual Studio 2019 正式发布(389)
  14. [翻译] Visual Studio 2019: 极速编码. 智能工作. 创造未来.(388)
  15. 刘强东身边的CXO还有谁“幸存”(373)
  16. 舍命生子产妇吴梦丈夫怒斥:没抢肺源不是精神分裂,网友断章取义(371)
  17. Confluence SSRF及远程代码执行漏洞处置手册(370)
  18. 机器学习 ML.NET 发布 1.0 RC(369)
  19. 阿里巴巴2018年纳税516亿元 同比增40%(368)
  20. K8s集群安装--最新版 Kubernetes 1.14.1(336)
  21. 雷军清华演讲实录:小米9年的创新、变革与未来(333)
  22. 小米手机卖不动了?(327)
  23. F#周报2019年第14期(317)
  24. 积分一样却选手下败将出战国际赛,《最强大脑》云队选手被坑了?(300)
  25. 《最强大脑》要垮?桑洁魏坤琳出轨细节被扒,戚薇才是神助攻(257)
  26. 华电教授孙玉兵被指与昔日同学共同学术造假,多所高校调查(250)
  27. F#周报2019年第15期(249)
  28. 日本明仁天皇退位,日本“平成”年代结束(246)
  29. linux系统安装cdcfordb2udb(241)
  30. Oracle甲骨文大规模裁员,你背离时代就会被淘汰(240)
  31. 他联系叙恐怖分子“卖军火”,称能搞到2000枚导弹,关键时刻中国警察出手(237)
  32. 魔兽世界:8.15搏击俱乐部坐骑获取流程 鳄鱼布鲁斯坐骑(236)
  33. 针对django2.2报错:UnicodeDecodeError: 'gbk' codec can't decode byte 0xa6 in position 9737: ill....(235)
  34. 女友被曝插足许志安郑秀文婚姻 知情人透露马国明已下定决心分手(232)
  35. SQL简介及MySQL的安装目录详解(229)
  36. 视觉中国深夜道歉:全面配合监管部门彻底积极整改(228)
  37. 为什么国内汽车用沥青阻尼片,而欧洲主机厂却用树脂?(228)
  38. 谁是苏小明饭局爆粗偷拍者?知情人称另有其人(223)
  39. NodeJs之邮件(email)发送(222)
  40. 迪玛希好惨!昨晚《歌手》为声入人心男团帮帮唱,却再被指控侵权(222)
  41. 市值暴跌90%,世界零售巨头申请破产战胜了所有对手却输时代(221)
  42. 函数防抖,与函数节流(219)
  43. 机器学习基石笔记:01 The Learning Problem(217)
  44. 深度学习python的配置(Windows)(215)
  45. [深度应用]·实战掌握Dlib人脸识别开发教程(213)
  46. 许志安出轨视频系蓄谋偷拍?司机被曝收40万装红外摄像头(210)
  47. Google AI 系统 DeepMind 高中数学考试不及格(210)
  48. 干货!21部漫威电影观影顺序指南,在《复联4》之前赶紧补齐!(208)
  49. 赌命生子九个月后,吴梦离世:前半辈子任性了,我用生命买单(206)
  50. 威廉王子出轨凯特王妃闺蜜? 外媒称婚外情致兄弟反目(203)
  51. spring-cloud-sleuth+zipkin源码探究(203)
  52. WebGL three.js学习笔记 纹理贴图模拟太阳系运转(201)
  53. 新更新kb4493472导致无法正常开机(195)
  54. 杜敬谦死因疑曝光!或因他这一特殊的训练方式,泳迷高呼孙杨退役(190)
  55. AntDesign Form表单字段校验的三种方式(189)
  56. 韦杰落网,金诚集团终局(188)
  57. 华为推出方舟编译器 称可提升安卓系统效率(185)
  58. 山东庆云民企3000亩土地被贱卖 国企接盘拟转性(185)
  59. 《权力的游戏》龙妈有那么多爱她的人,为什么最终会选择琼恩雪诺(182)
  60. 张无忌为什么爱上她?陈钰琪版赵敏终于给答案了(181)
  61. “国防”靠美国? 韩国瑜=马英九2.0? 走着瞧(180)
  62. Python破解Wifi密码思路(180)
  63. 直认与老公感情淡了!27岁TVB上位女星:我们不是好熟(179)
  64. CUBA Studio 8.0 发布,企业级应用开发平台(179)
  65. 张丹峰出轨最新锤来了!毕滢的朋友圈简直刷新下限啊!(177)
  66. Github 上 Star 最多的个人 Spring Boot 开源学习项目(176)
  67. 使用 C 语言实现一个 HTTP GET 连接(175)
  68. 拿着普通员工超300倍的工资裁员800人,这家游戏公司CEO引发员工不满|一周新闻(175)
  69. AntD框架的upload组件上传图片时遇到的一些坑(175)
  70. 币安称 4000 万美元比特币被盗(174)
  71. 不要996!程序员创建955.WLB不加班公司名单,GitHub周榜第二(174)
  72. 《跃迁-成为高手的技术》之联机学习(173)
  73. Weblogic CVE-2019-2647等相关XXE漏洞分析(173)
  74. Codejam Qualification Round 2019(173)
  75. python爬虫重定向次数过多问题(172)
  76. simulink创建简单模型(172)
  77. 强大的jQGrid的傻瓜式使用方法。以及一些注意事项,备有相应的引入文件。(170)
  78. [NewLife.XCode]高级查询(168)
  79. Algolia使用教程 , 超详细傻子看都会(166)
  80. 核心算法缺位,人工智能发展面临“卡脖子”窘境(165)
  81. Delphi 开发微信公众平台 (二) 用户管理(164)
  82. 只需知道电话号码 即可监控任意一部手机,获取位置,太可怕(163)
  83. 范斯晶对祖母的称呼很意外,范志毅很心疼,缺少母爱的孩子不容易(162)
  84. 如何定位前端线上问题(如何排查前端生产问题)(162)
  85. 告诉你去越南芽庄必带回的好东西(161)
  86. 双双出轨!许志安劈腿马国明港姐女友,二人被拍16分钟激吻超20次(160)
  87. 数学家发现完美的乘法(160)
  88. 百度网盘下载神器 PanDownload v2.0.9(破解版、不限速)(159)
  89. 高管被警方带走背后:巧达科技操盘2亿人简历生意(159)
  90. 定义工作,解读自我——IT帮2019年2月线下活动回顾(159)
  91. 吹爆惠英红,《铁探》这位霸道总警司超带感!真乃港剧罕见大女主(156)
  92. vue生成图片验证码(155)
  93. 三国正史第一猛将:一人单挑数千人,不是吕布也不是关羽(154)
  94. 从0到1上线一个微信小程序(154)
  95. FreeSql 如何现实 Sqlite 跨库查询(154)
  96. 向佐的弟弟叫向佑,网友:那郭碧婷生的孩子叫什么?(153)
  97. spring-boot-2.0.3不一样系列之源码篇 - pageHelper分页,绝对有值得你看的地方(153)
  98. TensorFlow从1到2(十)带注意力机制的神经网络机器翻译(152)
  99. [Node.js] 3、搭建hexo博客(152)
  100. java基础(十五)----- Java 最全异常详解 ——Java高级开发必须懂的(152)

  1. [NOI2006] 网络收费
  2. 线性基的小证明...
  3. 从语言设计的角度探究Java中hashCode()和equals()的关系
  4. C# 多线程小试牛刀
  5. Python基础:输入与输出(I/O)
  6. link-1-STL 标准模板库
  7. mysql--浅谈多表查询1
  8. 进击JavaScript核心 --- (1)基本数据类型
  9. 大数据技术之_24_电影推荐系统项目_07_工具环境搭建(具体实操)
  10. 前端限制显示的文本字数的几种方法——不换行与换行
  11. 【实验吧】该题不简单——writeup
  12. 反向传播算法
  13. =、==、===、equals()的区别
  14. GitHub 推出开发者赞助项目
  15. 剑指Offer的学习笔记(C#篇)-- 从上往下打印二叉树
  16. argparse 在深度学习中的应用
  17. 张云雷复出?西城区文旅局:德云社在辖区内演出未发现违法违规问题
  18. Maven安装与配置
  19. acWing 825. 排队购物
  20. ajax&&jquery
  21. 苏联攻击机的悲壮行动,明知德军战机拦截,仍在无护航状态下出击
  22. 华为的5G技术,源于这种数学方法
  23. 一站式自动化测试平台 http://www.Autotestplat.com
  24. RabbitMQ总结
  25. 第九组 通信3班 063 自反ACL
  26. 短线还有最后一跌?大V们表示:反弹近了!(5月23日)
  27. 第九组 通信3班 063 OSPFv2与OSPFv3综合实验
  28. C# IE选项 - 重置IE
  29. Spring_数据校验和自定义检验规则
  30. 谈谈Java的string为什么是不可变的
  31. OFFICE 365 A1 Plus账号注册
  32. 初学python—做一个数组的增删改查操作
  33. oc工程中oc、swift混编代码打包成静态framework踩坑笔记
  34. 阿里云推“智能秒停系统”:50秒内短信通知 再不怕吃罚单
  35. 今天购买了一个云服务器
  36. 神奇!乌鸦竟然会传达悲观和怀疑情绪 还会对同伴“冷嘲热讽”
  37. 数字IC设计入门必备——VIM自定义模板调用与VCS基本仿真操作示例
  38. 点击事件的坐标计算(client || offset) +(X || Width || Left) 各种排列组合别绕晕
  39. windows下dubbo-admin2.6.x之后版本的安装
  40. linux 之基本命令学习总结
  41. 传祺难续“传奇”?销量暴跌超4成 加价卖车被“断裂门”尽毁
  42. 香港豪门后宫持续曝光:他用选美比赛“选妃”,与几万女星交往
  43. 小窥React360——用React创建360全景VR体验
  44. Spring Boot 2 快速教程:WebFlux 集成 Mongodb(四)
  45. .Net Core下使用RabbitMQ比较完备的两种方案(虽然代码有点惨淡,不过我会完善)
  46. “80后”女博士已任团中央书记处书记
  47. 杨元庆:现在是联想的最好时刻 我们四大战役全部打了胜仗
  48. Java开发环境的搭建(JDK和Eclipse的安装)
  49. oracle学习笔记(十四) 数据库对象 索引 视图 序列 同义词
  50. 机构风向标:外资出逃超500亿 美的集团等白马股表现欠佳
  51. 跟踪记录ABAP对外部系统的RFC通信
  52. c++11多线程详解(一)
  53. 小蓝杯,跌破发行价了
  54. [NewLife.XCode]百亿级性能
  55. 33岁何洁商场走穴被曝光,路人镜头下的她与精修图差别好大
  56. 途牛第一季度净亏损2240万美元 同比亏损幅度扩大
  57. 00 | Two Sum
  58. 智能威胁分析之图数据构建
  59. 快速掌握RabbitMQ(二)——四种Exchange介绍及代码演示
  60. Neo4j 第六篇:Cypher语法
  61. Java微信公众平台开发(三)--接收消息的分类及实体的创建
  62. Java8 中的 Optional
  63. 如何显示超大图像(3)
  64. 贵州检察机关依法对袁仁国决定逮捕
  65. 有关xerospolit运行报错问题的有效解决方案
  66. ADO学途 one day
  67. Linux 中 ip netns 命令
  68. Python爬虫之设置selenium webdriver等待
  69. BSOJ1040 -- 【练习题目】美元DOLLARS
  70. 外媒:稀土是中国手中的一张王牌
  71. sql server添加sa用户和密码
  72. 深入理解JVM的类加载
  73. querySelector和getElementById之间的区别
  74. 简说设计模式——观察者模式
  75. 扰动函数和拉链法模拟HashMap的存储结构
  76. 东芝中国:“上海东芝公司”不存在 未停止与华为的合作
  77. 彭于晏马思纯主演张爱玲这部小说,却被说更适合演《骆驼祥子》?
  78. 停止向华为供货?东芝辟谣回应
  79. 云米第一季度净利润5310万元 同比增长68%
  80. 贪吃的古蛙,古生物学家发现亿年前两栖动物之间战争
  81. APICloud发布低代码开发平台 效率提升30%至60%
  82. Golang 读写锁RWMutex 互斥锁Mutex 源码详解
  83. shell初级-----数据呈现方式
  84. 白玉兰入围名单公布!《知否》《都挺好》上榜,还有这部豆瓣3分剧
  85. 深网 | 京东618接入快手、抖音 实现“即看即买”
  86. 解决 APP启动白屏黑屏问题
  87. Spring Cloud Hystrix理解与实践(一):搭建简单监控集群
  88. 浏览器与服务器通信技术——jsonp
  89. 【刷题笔记】LeetCode 606. Construct String from Binary Tree
  90. 央行副行长刘国强:应对汇率波动经验丰富,政策工具储备充足
  91. 部署Azure Log Analytics
  92. 计算机基础--http的基础整理和巩固
  93. 章子怡:女人四十,不止表面风光
  94. 直击|对话杨元庆:希望今年创最好盈利 要震慑住谣言
  95. 微软通过合作为美国270万农村退伍军人提供高速宽带服务
  96. Java进程占用内存过高,排查解决方法
  97. Go语言中使用切片(slice)实现一个Vector容器
  98. 商务部回应美宣布对13个中国企业或个人实施制裁:反对“长臂管辖”
  99. 优酷土豆的Redis服务平台化之路
  100. shell初级-----处理用户输入