舌尖上的五香
舌尖上的五香

THREE.js学习记录（在网页上制作旋转立方体）

THREE.js学习记录

前言

一直自己没有学习做笔记的习惯，所以为了加强自己对知识的深入理解，决定将学习笔记写下来，希望向各位大牛们学习交流！

不当之处请斧正！在此感谢！

大牛们对此文可以忽略！

硬推：欢迎大家访问我的个人网站www.zsy.ink(不适合手机端访问)

three.js

什么是threejs，很简单，你将它理解成three + js就可以了。three表示3D的意思，js表示javascript的意思。那么合起来，three.js就是使用javascript 来写3D程序的意思。


源自:
github:https://github.com/mrdoob/three.js
官网:https://threejs.org/
ps:有些问题国内搜不到就去github/StackOverflow/google(需要番·羽·土·啬)

用three.js在网页上制作旋转立方体

效果如下：
THREE.js学习记录（在网页上制作旋转立方体）_第1张图片

实现代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>three.js</title>
  <style>
    body {
      margin: 0px;
      overflow: hidden;
    }
  </style>
  <script src="three.js-master/build/three.js"></script>
  <!-- 路径根据具体开发环境而定 -->
</head>
<body>

  <!-- three.js输出节点 -->
  <div id="three.js"></div>

  <!-- three.js代码 -->
  <script type="text/javascript">
        var scene, camera, render, cube; //声明全局变量

        init();    //调用函数
        animate(); //调用函数

        function init() {

          scene = new THREE.Scene(); //生成一个场景
          scene.background = new THREE.Color( 0x02547d ); //设置场景背景颜色

         //生成一个透视相机
         camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
         //                   相机参数分别为视角↑，            长宽比↑，             近面↑，远面↑
         //调整相机位置
         camera.position.x=0;
         camera.position.y=20;
         camera.position.z=40;
         camera.lookAt(scene.position); //相机镜头对准场景

        //生成一个WebGl渲染器
        render = new THREE.WebGLRenderer({antialias:true});  //参数：抗锯齿
        render.setSize(window.innerWidth,window.innerHeight);
        render.shadowMapEnabled=true;  //允许阴影映射，渲染阴影默认是关闭的，因为会消耗大量资源
        render.shadowMap.type = THREE.PCFSoftShadowMap; //使渲染阴影更精细，不然会马赛克
        
        
        var planeGeometry=new THREE.PlaneGeometry(200,200,10,10); //生成一个平面
        //生成一个材质
        var planeMaterial=new THREE.MeshLambertMaterial({color:0x0284a8});
        //生成一个网格，将平面和材质放在一个网格中，组合在一起，组成一个物体
        var plane=new THREE.Mesh(planeGeometry,planeMaterial);
        plane.rotation.x=-0.5*Math.PI; //将平面沿着x轴进行旋转
        plane.position.x=0;
        plane.position.y=0;
        plane.position.z=20;
        plane.receiveShadow=true; //平面进行接受阴影
        
        
        var cubeGeometry=new THREE.BoxGeometry(10,10,10); //生成一个立方体
        //生成一个材质
        var planeMaterial1=new THREE.MeshBasicMaterial({color:0x02bec4});
        cube = new THREE.Mesh(cubeGeometry,planeMaterial1);
        //plane1.rotation.x=-0.5*Math.PI;//将平面沿着x轴进行旋转
        cube.position.x=0;
        cube.position.y=6;
        cube.position.z=0;
        cube.castShadow=true; //需要阴影，方块进行投射阴影
        
        
        var spotLight=new THREE.SpotLight(0xffffff); //生成一个聚光灯光源
        spotLight.position.set(-10,30,-5);  //设置聚光灯光源位置
        spotLight.angle = 2;  //聚光灯角度
        spotLight.castShadow=true;   //聚光灯光源允许阴影映射
        spotLight.shadow.mapSize.width = 2048;   //设置阴影精度，不然会马赛克
        spotLight.shadow.mapSize.height = 2048;  //设置阴影精度，不然会马赛克
        //将相机，渲染器，平面，立方体，聚光灯光源都添加到场景中，然后对场景和相机进行渲染
        scene.add(camera);
        scene.add(render);
        scene.add(plane);
        scene.add(cube);
        scene.add(spotLight);
        render.render(scene,camera);
        document.getElementById("three.js").append(render.domElement);
      };


      //每一帧渲染一次画面,不然画面是静止
      function animate() {

        requestAnimationFrame(animate);  //回调函数
        cube.rotation.y += 0.01; //让立方体每一帧都旋转
        render.render(scene, camera); //渲染
        
      }


    </script>
  </body>
  </html>

你可能感兴趣的:(three.js)

  • Three.js学习笔记 癫狂de痴梦 前端javascript学习前端
    1.three.js的引入进入官网Three.js–JavaScript3DLibrary，下载文件解压文件，复制three.js-master\build\three.min.js文件在项目中，引入该文件。2.一个简单threeJs程序（1）创建场景constscene=newTHREE.Scene();（2）创建物体constgeomtry=newTHREE.BoxGeometry(1,1,1
  • Three.js实战项目01：vue3+three.js实现圣诞动画贺卡项目 叁拾舞 ThreeJsVue3three.js
    文章目录创建项目加载模型设置天空与水设置天空设置水纹添加点光源相机位置和文字切屏添加星星完整代码下载创建项目创建vue3项目【christmas-app】：npminitvite@latest安装两个库：[email protected]加载模型//导入three库import*
  • 【探索前端技术之 React Three.js—— 简单的人脸动捕与 3D 模型表情同步应用】 智界工具库 react.jsjavascript前端
    大家好，我是智界工具库，致力于分享好用实用且智能的软件以及在JAVA语言开发中遇到的问题，如果本篇文章对你有所帮助请帮我点个小赞小收藏吧，谢谢喲！简介：React是一个用于构建用户界面的JavaScript框架，以其组件化的设计和高效的更新机制而闻名。Three.js则是一个基于JavaScript的3D图形库，能够轻松创建和渲染复杂的3D场景。当React与Three.js相遇，ReactThr
  • threejs 复习笔记 three.js
    import*asTHREEfrom'https://unpkg.com/[email protected]/build/three.module.js'import{OrbitControls}from'https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js'import{OrbitCon
  • Three 场景（Scene） 灵魂清零 threeweb3前端
    场景（Scene）场景能够让你在什么地方、摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方。构造器Scene()创建一个新的场景对象。属性.autoUpdate:Boolean默认值为true，若设置了这个值，则渲染器会检查每一帧是否需要更新场景及其中物体的矩阵。当设为false时，你必须亲自手动维护场景中的矩阵。.background:Object若不为空，在渲染场景
  • three.js Canvas纹理（CanvasTexture）、压缩的纹理（CompressedTexture） 灵魂清零 threejavascript开发语言ecmascript前端
    从Canvas元素中创建纹理贴图。它几乎与其基类Texture相同，但它直接将needsUpdate（需要更新）设置为了true。构造函数CanvasTexture(canvas:HTMLElement,mapping:Constant,wrapS:Constant,wrapT:Constant,magFilter:Constant,minFilter:Constant,format:Consta
  • 使用npm创建three.js项目 ShawnWeasley npmjavascriptarcgis前端node.js
    1.安装Node.js和npm首先，需要在您的计算机上安装Node.js和npm。Node.js是一个JavaScript运行环境，而npm是一个JavaScript包管理器。npm会随Node.js一起安装，因此只需要安装Node.js即可。从Node.js的官方网站(https://nodejs.org)下载并安装适合您操作系统的版本。2.创建一个新的项目在您希望创建项目的目录下，手动创建一个
  • Canvas引擎：构建强大网页交互的利器 心之向往！ 交互编程
    Canvas引擎是一个功能强大的工具，用于在网页上创建动态和交互性的图形。它为开发人员提供了灵活的绘图功能，可以通过JavaScript代码控制和操作图形元素。本文将介绍几个常用的Canvas引擎，并提供相应的源代码示例。Three.js：精美3D渲染Three.js是一个流行的JavaScript库，提供了创建和渲染3D图形的功能。它建立在WebGL技术之上，并简化了使用WebGL的复杂性。下面
  • Three.js实现动态水泡效果逐步解析GLSL着色器 贵州数擎科技有限公司 javascript着色器开发语言
    大家好！我是[数擎AI]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！开发领域：前端开发|AI应用|Web3D|元宇宙技术栈：JavaScript、React、ThreeJs、WebGL、Go经验经验：6年+前端开发经验，专注于图形渲染和AI技术经验经验：演示地址开源项目：智简未来、晓智元宇宙、数字
  • 前端three.js的Sprite模拟下雪动画效果 qq_35430208 three.js前端javascript三维场景中下雪效果threejs实现下雪效果
    一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add
  • Three.js AnimationUtils 和 AnimationObjectGroup 灵魂清零 three前端web3javascript
    AnimationObjectGroup接收共享动画状态的一组对象。在使用手册的“下一步”章节中，“动画系统”一文对three.js动画系统中的不同元素作出了概述用法:将本来要作为根对象传入构造器或者动画混合器(AnimationMixer)的clipAction方法中的对象加入组中，并将这个组对象作为根对象传递。注意，这个类的实例作为混合器中的一个对象，因此，必须对组内的单个对象做缓存控制。限制
  • three.js AnimationClip 和 AnimationMixer 灵魂清零 threeweb3前端javascriptvue.js
    AnimationClip动画剪辑（AnimationClip）是一个可重用的关键帧轨道集，它代表动画。构造器AnimationClip(name:String,duration:Number,tracks:Array)name-此剪辑的名称duration-持续时间(单位秒).如果传入负数,持续时间将会从传入的数组中计算得到。tracks-一个由关键帧轨道（KeyframeTracks）组成的数
  • ThreeJS入门（001）：简介、下载安装、历史、应用场景、竞品 还是大剑师兰特 #ThreeJS综合教程200+webgl大剑师ThreeJS简介
    查看本专栏目录-本文是第001篇入门文章文章目录一、Three.js简介二、Three.js的历史与发展三、公司背景四、下载安装五、官方网站六、应用范围场景七、相关竞品一、Three.js简介Three.js是一个基于WebGL的JavaScript3D库，它使得在Web上创建和展示3D内容变得简单。Three.js提供了一系列抽象层，让开发者可以专注于设计和实现3D应用程序，而无需深入了解复杂的
  • three.js 加载STL模型补充遇到的问题 代码搬运工娃哈哈呀娃哈哈 前端
    旋转问题three.js在开发的时候找到的指导文档提到的都是场景相机渲染初始化，相机控制器默认是轨道控制器OrbitControls。在使用中若想各个方向都可以用鼠标旋转只有水平方向能够无限旋转，垂直方向有俯仰角±90°的限制，找了很久才知道TrackballControls轨迹球控制器，可以实现水平垂直旋转，但是也存在缺点，若是模型加载上下左右前后视图的时候，左右前后没有影响，但是在移动到上和下
  • react 中three.js 模型渲染 Mr_wuying reactjavascriptreact.js前端
    npminstallthreeimport*asTHREEfrom"three";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";constmountRef=useRef(null);useEffect(()=>{//创建渲染器constrenderer=newTHREE.WebGLRenderer();constw
  • 4. 第一个3D案例—创建3D场景 小彭努力中 Three.js3d前端
    入门Three.js的第一步，就是认识场景Scene、相机Camera、渲染器Renderer三个基本概念，接下来，咱们通过三小节课，大家演示“第一个3D案例”完成实现过程。学习建议：只要你能把第一个3D案例搞明白，后面学习就会非常顺利了。本节课先完成第一个3D案例的一部分，也就是3D场景Scene的创建。三维场景Scene你可以把三维场景Scene(opensnewwindow)对象理解为虚拟的
  • Three.js Cesium.js 案例聚集地 优雅永不过时· javascript3d低代码智慧城市threejscesiumjs
    对于大多数的开发者来言，看了很多文档可能遇见不到什么有用的，就算有用从文档上看，把代码复制到自己的本地大多数也是不能用的，非常浪费时间和学习成本，尤其是three.js，cesium.js这种难度较高，想要实现一个功能可能会查阅很多博客，进行很多错误尝试，费时费力。集成了相关友情站所以，话不多说为了给各位造福利，我搭建了在线查看代码且可的调试系统，所有案例可直接访问，让你欣赏什么叫做-优雅永不过时
  • three.js 着色器， cesium 热力图，聚合点位，大量点线面， 图层，主题，文字 优雅永不过时· 着色器javascript3dwebgl前端cesium.jsthreejs
    对于大多数的开发者来言，看了很多文档可能遇见不到什么有用的，就算有用从文档上看，把代码复制到自己的本地大多数也是不能用的，非常浪费时间和学习成本，尤其是three.js，cesium.js这种难度较高，想要实现一个功能可能会查阅很多博客，进行很多错误尝试，费时费力。所以，话不多说为了给各位造福利，我搭建了在线查看代码且可的调试系统，所有案例可直接访问，让你欣赏什么叫做-优雅永不过时-写最优雅的代码
  • three.js 编辑器，动画，着色器， cesium 热力图，聚合点位，大量点线面， 图层，主题，文字，等众多案例中心 优雅永不过时· 着色器智慧城市人工智能javascript前端3d
    对于大多数的开发者来言，看了很多文档可能遇见不到什么有用的，就算有用从文档上看，把代码复制到自己的本地大多数也是不能用的，非常浪费时间和学习成本，尤其是three.js，cesium.js这种难度较高，想要实现一个功能可能会查阅很多博客，进行很多错误尝试，费时费力。所以，话不多说为了给各位造福利，我搭建了在线查看代码且可的调试系统，所有案例可直接访问，让你欣赏什么叫做-优雅永不过时-写最优雅的代码
  • 微信小程序xr-frame图层与显示(五种方法) 牧羊人_sj xr微信小程序图层
    前言：控制小程序隐藏与显示有五种方法，感兴趣的可以参考这个文档，但是本文只赘述两种方法。1.通过visible属性(详见：Three.js模型隐藏或显示)visible:作用就是控制绑定该材质的模型对象是否可见，默认值是true，LineBasicMaterial、SpriteMaterial、MeshBasicMaterial等材质都会继承基类Material的可见性；注意：(链接)1).vis
  • 【Three.js基础学习】19.Custom models with Blender 蚕食我的耐心 three.js基础学习学习blender
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档前言blender模型资源:【blender】一个汉堡包-CSDN博客一、代码import'./style.css'import*asTHREEfrom'three'import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js'import{GLTFLoa
  • three.js低代码 编辑器 ，和 相应 3d 功能案例 ，cesium 优雅永不过时· three.jscesium.jswebgljavascript前端
    开发历程低代码的开发是非常曲折的，尤其是早期根本没有任何参考作品或者相关的一些知识博客去引领我们去做，会经历多次的推到再到重头再来，又需要开发者有很高的知识储备，举步维艰。以下是我的一些的功能分布，希望能对你有一些启发，让你少走一些弯路。预览查看https://z2586300277.github.io/three-editor/dist/#/editor开源地址https://github.co
  • three.js 实现 3D地图 优雅永不过时· 3djavascript低代码npm智慧城市前端threejs
    three.js实现仿照echarts3d地图。由于three.js目前比较依赖写代码，而一个美的地图需要大量的three.js组合，我建议先做three.js基础层的低代码编辑器，随后各种项目和效果配置起来都会很方便。https://z2586300277.github.io/three-editor/dist/#/codeMirror?example_path=threeEditor&exam
  • Three.js CSS3D、CSS2D及精灵的区别 阿星小栈 前端threeCSS2DCSS3Dthree.js
    在Three.js中，这三种API都可以用来制作标签，那么有什么区别呢，本文进行解惑。首先，CSS3D和CSS2D都是DOM下的元素，而精灵使用Canvas作为纹理显示。DOM下的元素，意思就是可以通过CSS或JS这些去获取ID控制样式，更新时调整元素的值就可以了，精灵的只能去Canvas画，包括更新时也如此。主要区别如下：CSS3D不面向摄像机，场景缩放时，缩小放大跟随着，不被模型遮挡，通过DO
  • threejs 创建CSS3DSprite精灵标签, 可以更新位置及内容(封装) zsd_666 Web前端css3前端css
    threejs创建CSS3DSprite精灵标签,可以更新位置及内容(封装)ThreeCss3dSprite.js工具类import{CSS3DRenderer,CSS3DSprite}from"../js/three.js/examples/jsm/renderers/CSS3DRenderer.js";classThreeCss3dSprite{constructor(){this.sprit
  • 更新到死得原生 three.js 和 cesium 得案例 优雅永不过时· three.jscesium.jsshaderjavascript3d前端
    纯原生threecesium案例由于前端得发展，three.js和cesium.js越来越被越来越多得前端接触到，由于其学习路线比较复杂，且官网案例覆盖不全，因此在今年我**联合了业界得一些大佬**共同搭建了一个免费得three和cesium案例学习平台，未来将免费逐步的更新案例。主要侧重于开发者的技术交流，每个开发者可以将自己拿手案例上传，大家之间可以互相学习借鉴,以此减少大家在工作中的学习成本
  • CSS2DRenderer的使用 qq_39672409 threejs前端
    具体参照https://github.com/mrdoob/three.js/blob/master/examples/css2d_label.html；CSS2DRenderer的使用import{CSS2DObject，CSS2DRenderer}from‘three/examples/jsm/renderers/CSS2DRenderer’;const{position,zIndex}=da
  • three.js记录一下实现模型放大缩小的限制 一只理智恩 javascript开发语言webgl前端
    限制模型的最大放大倍数和最小缩小倍数，可以使用three.js中的缩放操作scale和事件监听器首先，为了使模型可以缩放，需要将缩放属性设置为需要的初始值。例如，将模型的初始缩放设置为1倍：model.scale.set(1,1,1);//model就是加载的模型添加一个事件监听器来响应用户的放大和缩小操作。在监听器函数中，可以通过修改模型的缩放来实现放大和缩小效果。//监听鼠标滚轮事件docum
  • WebGL开发的应用领域 super_Dev_OP 信息可视化
    WebGL是一种基于JavaScript的3D图形库，用于在浏览器中创建交互式和动态的3D图形应用。以下是一些可以使用WebGL开发的应用领域，希望对大家有所帮助。北京木奇移动技术有限公司，专业的软件外包开发公司，欢迎交流合作。1.游戏开发：利用WebGL创建3D游戏，提供更沉浸式的游戏体验。许多游戏引擎，如Three.js、Babylon.js，都基于WebGL。2.虚拟现实（VR）和增强现实（
  • WebGL开发数据可视化应用 super_Dev_OP 信息可视化数据分析数据挖掘
    使用WebGL进行数据可视化可以创造出令人印象深刻的交互式和动态图形。以下是一些在WebGL中开发数据可视化应用时需要考虑的步骤和技术，希望对大家有所帮助。1.选择合适的WebGL框架或库：使用现有的WebGL框架或库，如Three.js、Babylon.js、regl等，以简化开发过程并提供强大的3D图形功能。2.数据准备：准备要可视化的数据，确保数据是结构化的，并考虑使用JSON、CSV等格式
  • jdk tomcat 环境变量配置 Array_06 javajdktomcat
    Win7 下如何配置java环境变量 1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 3。分别配置高级环境变量。   电脑-->右击属性-->高级环境变量-->环境变量。 分别配置 : path    &nbs
  • Spring调SDK包报java.lang.NoSuchFieldError错误 bijian1013 javaspring
            在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
  • LeetCode[位运算] - #136 数组中的单一数 Cwind java题解位运算LeetCodeAlgorithm
    原题链接：#136 Single Number 要求： 给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 难度：中等 分析： 题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
  • qq登陆界面开发 15700786134 qq
    今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： public class First {         public void initul(){        jf=ne
  • Linux的程序包管理器RPM 被触发 linux
    在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
  • socket通信遇到EOFException 肆无忌惮_ EOFException
    java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
  • 基于spring的web项目定时操作 知了ing javaWeb
    废话不多说，直接上代码，很简单 配置一下项目启动就行 1，web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="h
  • 树形结构的数据库表Schema设计 矮蛋蛋 schema
    原文地址： http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488     程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
  • maven将jar包和源码一起打包到本地仓库 alleni123 maven
    http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository <project> ... <build> <plugins> <plugin> <groupI
  • java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！ 百合不是茶
    类 File File是指文件和目录路径名的抽象表示形式。 1，何为文件： 标准文件（txt doc mp3...） 目录文件（文件夹） 虚拟内存文件   2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
  • Spring注入有继承关系的类（2） bijian1013 javaspring
    被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 package com.bijian.spring.test4; public class AClass { private String a; private String b; public String getA() { retu
  • 30岁转型期你能否成为成功人士 bijian1013 成长励志
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • 【Velocity四】Velocity与Java互操作 bit1129 velocity
    Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础，      POJO    package com.tom.servlets; public
  • 【Hive十一】Hive数据倾斜优化 bit1129 hive
    什么是Hive数据倾斜问题   操作：join,group by,count distinct 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 原因：key分布不均匀 倾斜度衡量：平均记录数超过50w且
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua csrf
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-3.求子数组的最大和 bylijinnan java
    package beautyOfCoding; public class MaxSubArraySum { /** * 3.求子数组的最大和 题目描述： 输入一个整形数组，数组里有正数也有负数。 数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。 求所有子数组的和的最大值。要求时间复杂度为O(n)。 例如输入的数组为1, -2, 3, 10, -4,
  • Netty源码学习-FileRegion bylijinnan javanetty
    今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： //pipeline（没有诸如“FileRegionEncoder”的handler）： public ChannelPipeline ge
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题 cngolon 跨浏览器复制到粘贴板Zero Clipboard
    Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js
  • 单例模式 cuishikuan 单例模式
    第一种（懒汉，线程不安全）： public class Singleton {   2     private static Singleton instance;   3     pri
  • spring+websocket的使用 dalan_123
    一、spring配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or
  • 细节问题：ZEROFILL的用法范围。 dcj3sjt126com mysql
    1、zerofill把月份中的一位数字比如1，2，3等加前导0 mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day
  • Android开发10——Activity的跳转与传值 dcj3sjt126com Android开发
    Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。   一、Activity跳转 方法一Intent intent = new Intent(A.this, B.class); startActivity(intent)   方法二Intent intent = new Intent();intent.setCla
  • jdbc 得到表结构、主键 eksliang jdbc 得到表结构、主键
    转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
  • Android 应用程序开关GPS gqdy365 android
    要在应用程序中操作GPS开关需要权限： <uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" /> 但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 1、方法一：将项目放到Android源码中编译； 2、方法二：网上有人说cl
  • Windows上调试MapReduce zhiquanliu mapreduce
    1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
  • 如何看待一些知名博客推广软文的行为？ justjavac 博客
    本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 互联网上的两种典型心态： 当初求种像条狗，如今撸完嫌人丑 当初搜贴像条犬，如今读完嫌人软 你为啥感觉不舒服呢？ 难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 就如同 Google 关闭了 Gooled Reader，那是
  • sql优化总结 macroli sql
    为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！   要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。   一、简单的统计语句执行时间 declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
  • Linux Oracle中常遇到的一些问题及命令总结 超声波 oraclelinux
    1.linux更改主机名   (1)#hostname oracledb　　　　临时修改主机名 (2) vi /etc/sysconfig/network 　　修改hostname (3) vi /etc/hosts　　　　　　　　修改IP对应的主机名   2.linux重启oracle实例及监听的各种方法 （注意操作的顺序应该是先监听，后数据库实例） &nbs
  • hive函数大全及使用示例 superlxw1234 hadoophive函数
      具体说明及示例参 见附件文档。     文档目录：   目录 一、关系运算： 4 1. 等值比较: = 4 2. 不等值比较: <> 4 3. 小于比较: < 4 4. 小于等于比较: <= 4 5. 大于比较: > 5 6. 大于等于比较: >= 5 7. 空值判断: IS NULL 5
  • Spring 4.2新特性-使用@Order调整配置类加载顺序 wiselyman spring 4
    4.1 @Order Spring 4.2 利用@Order控制配置类的加载顺序 4.2 演示 两个演示bean package com.wisely.spring4_2.order; public class Demo1Service { } package com.wisely.spring4_2.order; public class
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他