开心就是最好
开心就是最好

Three.js之渲染器和前端UI界面

参考资料

  • three.js Canvas画布布局
  • …
  • 模型加载进度条

知识点

注：基于Three.jsv0.155.0

  • three.js Canvas画布布局
  • UI交互界面与Canvas画布叠加
  • UI交互按钮与3D场景交互
  • Three.js背景透明度：.setClearAlpha()方法、背景透明alpha: true、.setClearColor()方法
  • Three.js渲染结果保存为图片：preserveDrawingBuffer:true、Cavnas方法.toDataURL()
  • 深度冲突(模型闪烁)：logarithmicDepthBuffer: true
  • 模型加载进度条

代码实现

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Three.jstitle>
head>
  <body>
    <div style="position:absolute; left: 10px; top: 10px">
      <button id="btnChangeBgColor">切换背景色button>
      <button id="btnDownloadPhoto">下载图片button>
    div>
  body>
  
  <script type="importmap">
    {
      "imports": {
        "three": "./js/three.module.js",
        "three/addons/": "../three.js/examples/jsm/"
      }
    }
  script>
  <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    const width = 800
    const height = 500

    // 场景
    const scene = new THREE.Scene();
    // 几何体
    const geometry = new THREE.PlaneGeometry(100, 100);
    // 材质 
    // MeshBasicMaterial：不受光
    // MeshLambertMaterial：受光
    const material = new THREE.MeshLambertMaterial({
      color:0x0000ff,
      side: THREE.DoubleSide
    });
    // 网格模型：物体
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
    scene.add(mesh);

    const mesh1 = mesh.clone();
    mesh1.material = mesh.material.clone();
    mesh1.material.color.set(0xff0000);
    // 设置模型宽度、高度
    mesh1.scale.set(2, 2, 2);
    mesh1.position.z = 0.01;
    scene.add(mesh1);

    // 坐标系
    const axes = new THREE.AxesHelper(200);
    scene.add(axes);

    // // 点光源
    // const pointLight = new THREE.PointLight( 0xffffff, 1.0, 0, 0);
    // pointLight.position.set(-200, 200, 200 );
    // scene.add( pointLight );

    // // 辅助点光源
    // const pointLightHelper = new THREE.PointLightHelper( pointLight, 10 );
    // scene.add( pointLightHelper );

    // 环境光
    const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);
    scene.add( ambientLight );

    // 平行光
    const directionalLight = new THREE.DirectionalLight( 0xffffff, 1, 0, 0);
    // directionalLight.position.set(100, 0, 0);
    // directionalLight.position.set(0, 100, 0);
    // directionalLight.position.set(100, 100, 100);
    directionalLight.position.set(100, 60, 50);
    directionalLight.target = mesh;
    scene.add( directionalLight );

    // 辅助平行光
    const directionalLightHelper = new THREE.DirectionalLightHelper( directionalLight, 10 );
    scene.add( directionalLightHelper );

    // 相机
    const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
    camera.position.set(200, 200, 200);
    camera.lookAt(scene.position);

    // 渲染器
    const renderer = new THREE.WebGLRenderer({
      // 背景透明
      // alpha: true
      // 想把canvas画布上内容下载到本地，需要设置为true
      preserveDrawingBuffer: true,
      // 设置对数深度缓冲区，优化深度冲突问题
      logarithmicDepthBuffer: true
    });
    renderer.setSize(width, height);
    renderer.render(scene, camera);
    document.body.appendChild(renderer.domElement);

    // 控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', () => {
      renderer.render(scene, camera);
    });

    document.getElementById('btnChangeBgColor').addEventListener('click',function(){
      renderer.setClearColor(0xff0000, 0.5);
      renderer.render(scene, camera);
    })

    document.getElementById('btnDownloadPhoto').addEventListener('click',function(){
      // 创建一个a链接
      var link = document.createElement('a');
      link.href = renderer.domElement.toDataURL('image/png');
      link.download = 'threejs.png'; //下载文件名
      link.click();
    })
  script>
html>

你可能感兴趣的:(Web3D,Web3D,threejs)

  • three前置课程知识
    学习中文网(1.threejs文件包下载和目录简介|Three.js中文网)threejs官方文件包所有版本：https://github.com/mrdoob/three.js/releases更新迭代较快，要选择对应版本使用---下载zip压缩包Threejs官网中文文档链接：https://threejs.org/docs/index.html#manual/zh/重要的内容docs包:文档
  • 学习threejs，使用自定义GLSL 着色器，生成漂流的3D能量球 gis分享者 gis工程师threejsthreejsGLSLShaderMaterial3D能量球着色器
    ‍⚕️主页：gis分享者‍⚕️感谢各位大佬点赞收藏⭐留言加关注✅!‍⚕️收录于专栏：threejsgis工程师文章目录一、前言1.1☘️GLSL着色器1.1.1☘️着色器类型1.1.2☘️工作原理1.1.3☘️核心特点1.1.4☘️应用场景1.1.5☘️实战示例二、使用自定义GLSL着色器，生成漂流的3D能量球1.☘️实现思路2.☘️代码样例一、前言本文详细介绍如何基于threejs在三维场景中自
  • threejs的transformControls拖拽结束的异常
    transformControls拖拽结束以后会以结束点的射线拾取重新选中新的模型，这里发现是监听事件的问题//创建TransformControlsconsttransformControls=newTransformControls(camera,renderer.domElement);consttransformControlsHelper=transformControls.getHel
  • Three.js实现海洋与天空
    Three.js实现海洋与天空https://threehub.cn/#/codeMirror?navigation=ThreeJS&classify=shader&id=waterSkyimport*asTHREEfrom"three";import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js'constDOM=
  • Three.js（three入门）
    theme:condensed-night-purpleThree.js学习指南：在响应式世界里玩转三维魔法第一章：Three.js突破次元壁指南Three.js简介three.js官网：https://threejs.org/three.js中文官网https://threejs.org/docs/index.html#manual/zh/1.什么是Three.js?Three.js是用Java
  • 用WebGPU实现现代Web3D渲染——突破传统性能瓶颈的解决方案 桂月二二 wasmfastapi开发语言rust
    引言随着Web技术的不断发展，Web3D应用的需求不断增加。从游戏引擎到可视化工具，3D渲染技术正在被广泛地应用。然而，传统WebGL技术在性能、效率和灵活性上仍存在局限性。而WebGPU作为一种新兴的Web标准，为现代3D渲染提供了强大而高效的解决方案。本文将探讨如何使用WebGPU实现高效的Web3D渲染，逐步构建一个简单的渲染引擎，并介绍其在性能和功能上的优势。背景WebGPU是一种跨平台的
  • ThreeJS—自定义着色器
    ThreeJS自定义着色器说起着色器的学习，强烈推荐康玉之编写的《GPU编程与CG语言之阳春白雪下里巴人》，尤其是此书的序言部分针砭时弊毫无隐晦的指出了当今学术现状的问题，更是发出了“开天辟地，日月重光”的愤慨。着色器的编程语言的根是CG（CForGraphics），语言风格类似C语言或者说就是；在ThreeJS当中，着色器的编程风格也是类似C语言的，引擎最终会通过字符串解析将着色器解析成正常的G
  • 学习threejs，使用自定义GLSL 着色器，生成艺术作品 gis分享者 threejsgis工程师threejsGLSLglsl着色器ShaderMaterialPlaneGeometry
    ‍⚕️主页：gis分享者‍⚕️感谢各位大佬点赞收藏⭐留言加关注✅!‍⚕️收录于专栏：threejsgis工程师文章目录一、前言1.1☘️GLSL着色器1.1.1☘️着色器类型1.1.2☘️工作原理1.1.3☘️核心特点1.1.4☘️应用场景1.1.5☘️实战示例二、使用自定义GLSL着色器，生成艺术作品1.☘️实现思路2.☘️代码样例一、前言本文详细介绍如何基于threejs在三维场景中使用自定义
  • ThreeJS入门（153）：THREE.Texture 知识详解，示例代码 还是大剑师兰特 #ThreeJS综合教程500+大剑师threejs示例threejs教程
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第153篇入门文章文章目录构造函数属性方法使用示例注意事项总结THREE.Te
  • .gltf不同文件形式(.glb、贴图、.bin) Threejs可视化 Three.jsThreejs
    参考资料：threejs中文网threejsqq交流群：814702116.gltf不同文件形式(.glb、贴图、.bin).gltf格式模型文件，有不同的组织形式。单独.gltf文件单独.glb文件.gltf+.bin+贴图文件这些不同形式的gltf模型，加载代码其实没啥区别。//单独.gltf文件loader.load("../../工厂.gltf",function(gltf){scene.
  • Vue3 首款 3D 数字孪生编辑器 ❀͜͡傀儡师 3d编辑器
    对于多数前端开发者而言，用ThreeJS打造炫酷的数字孪生场景并不容易，需掌握大量专业知识。现在这个基于Vue3、ThreeJS和NaiveUI的数字孪生开发框架——Astral3DEditor正式开源，为Web3D开发带来新转机。Astral3DEditor的在这里插入图片描述1.优势功能丰富：支持多种3D模型格式，可导入导出多类型模型，方便资源整合。它还提供插件系统，可扩展更多功能。同时，支持
  • threejs-夜景
    记录threejs实现夜景光照、投影、阴影、反射、材质颜色编码的效果主要是光源设置了shadow、encodingThree.jsScenebody{margin:0;}canvas{width:100%;height:100%}{"imports":{"three":"./three172/build/three.module.js","three/addons/":"./three172/ex
  • CORS 问题解决--threejs 相关01
    CORS问题解决–threejs相关01解决方法"C:\ProgramFiles\Google\Chrome\Application\chrome.exe"–disable-web-security--user-data-dir=C:\ProgramFiles\Google\Chrome\Application注：C:\ProgramFiles\Google\Chrome\Application为
  • 06-three.js 创建自己的缓冲几何体 四喜花露水 Threejavascript前端开发语言
    Three.jsJourney—LearnWebGLwithThree.jsTheultimateThree.jscoursewhetheryouareabeginneroramoreadvanceddeveloperhttps://threejs-journey.com/?c=p3关键点：1.newFloat32Array()2.newTHREE.BufferAttribute()3.geome
  • 跟着感觉走 threejs 第一篇
    引言在实际开发的过程中，你是否经常遇到这样一种情形。需要用到一个组件，这个组件你抑或者其他小伙伴之前已经实现了，你内心窃喜，又可以使出拿来主义大法了。打开一看，发现之前的组件代码其中包含了很多强耦合的代码逻辑，导致不能够完全为你所用，不香不臭，弃之可惜食之无味。这个时候，聪明的你，很快的想到了使出必杀技copy大法。但过来人的我相信，你内心深处是处于极度抗拒的，一方面又想赶快实现业务功能开发，另一
  • Three.js学习10：几何体（1）-平面几何体 stones4zd three.js学习
    -----------------------------华丽的分割线---------------------相关代码均已上传到gitee中：myThree:学习Three.js，努力加油~！Gitee静态演示地址：ThreeJS演示页面-----------------------------华丽的分割线---------------------一、几何体GeometryThree.js中物体
  • 【threejs教程9】threejs加载360全景图（VR）的两种方法 有只老羊在发呆 three.js教程前端web3dwebgljavascriptvr
    目录前言1.Equirectangular映射背景实现步骤1.初始化TextureLoader2.加载Equirectangular纹理3.配置映射类型和颜色空间4.应用背景完整代码如下2.立方体贴图背景实现步骤1.创建CubeTextureLoader2.加载立方体贴图3.应用背景完整代码如下总结前言在3D应用开发中，为场景设置引人入胜的背景是提升视觉效果的关键一环。Three.js，作为一款强
  • threejs 简单的点到点闪电或电流效果 ~在水一方 three.js
    文章目录效果一、实现原理二、实现步骤1.根据起点和终点计算对齐到X轴的矩阵2.生成基础拐点3、生成Curve并采样点4、将采样点进行小范围抖动偏移5、变换回原始位置6、增加逐帧显示的动效请添加图片描述核心代码效果threejs中简单的点到点闪电效果，也可以作为电流效果一、实现原理1、将起点和终点连线对齐到X轴上并且起点与原点重合，方便后续计算2、在起点和终点之间均匀的获取数个点（如5个）作为基础的
  • threejs基于视觉空间的选中效果 ~在水一方 three.js
    效果如下所示说明仿照光辉城市软件中材质修改面板选中模型的效果，基于视觉空间，不受模型本身大小旋转的影。代码包含两个函数（一个选中替换shader，一个取消选中还原shader）代码如下/***取消选中mesh*/cancleSelect(){if(this.selectMat){//去掉材质的选中效果（阵列黑点）this.selectMat.onBeforeCompile=(shader)=>{/
  • threejs webVR获取相机正前方向量 ~在水一方 three.jsvr
    通常获取相机正前方可以使用camera.getWorldDirection(newVector3())函数来得到，但是在threejs0.139.2版本中进入VR后使用上面函数获取的数据是固定不变的，不管是否旋转了头盔，经过一番研究发现必须使用renderer.xr.getCamera()此函数获取的相机才是VR中实际使用的，获取相机正前方也是得使用此函数获取的相机，完整代码就是renderer.
  • UE/Unity/Webgl云渲染推流网址，如何与外部网页嵌套和交互？
    需求分析：用threejs开发的数字孪生模型，但是通过webgl技术网页中使用，因为模型数据量大，加载比较慢，且需要和其他的业务系统进行网页嵌套和交互，使用云渲染技术形成的推流网址，如何与外部网页嵌套和交互？有可能会跨域以上实时云渲染技术应用中询问比较多的，其实不论是webgl还是UE或者Unity应用，推流后都可以和网布网页嵌套以及交互，我们分两种情况来明确。云渲染推流后的网址中，如何和应用做实
  • 学习threejs，三维汽车模拟器，场景有树、云、山等 gis分享者 gis工程师threejsthreejs汽车模拟器山树云
    ‍⚕️主页：gis分享者‍⚕️感谢各位大佬点赞收藏⭐留言加关注✅!‍⚕️收录于专栏：threejsgis工程师文章目录一、前言1.1☘️THREE.BoxGeometry1.1.1☘️构造函数1.1.2☘️属性1.1.3☘️方法1.2☘️THREE.CylinderGeometry1.2.1☘️构造函数1.2.2☘️属性1.2.3☘️方法1.3☘️THREE.ConeGeometry1.3.1☘️
  • 一文详解5 大 Web3D 渲染引擎！ 前端小崔 three.jsweb3前端javascript面试3dwebgl
    一文详解主流Web3D引擎：优缺点、使用场景与核心差异Web3D技术通过浏览器实现了无需插件的三维可视化与交互，广泛应用于游戏、教育、地理信息、电商等领域。本文深入解析主流Web3D引擎的技术特点、适用场景及选型建议。一、Web3D技术核心与优势Web3D基于WebGL（基于OpenGLES的Web图形库）实现浏览器内3D渲染，其核心优势包括：跨平台性：支持桌面/移动端浏览器，无需安装插件交互性：
  • 【Three.js】机器人管线包模拟 饺子大魔王12138 three.jsweb前端机器人javascript
    机器人管线包模拟背景技术选型效果视频效果截图最近在工业数字化项目中尝试用Three.js实现了一个机器人管线包的3D可视化模拟系统，记录一下开发过程和技术要点，希望能给同样在探索Web3D技术的同学一些灵感。背景管线包（DressPack）是工业机器人外围电缆管理的核心部件，传统2D图纸难以直观展示其空间运动轨迹。通过Three.js构建的3D模拟系统，可以实现机器人多轴联动时的管线包动态模拟，超
  • C# WebAssembly革命：用C#打造《赛博朋克2077》级Web3D游戏引擎 墨夶 C#学习资料2c#wasm游戏引擎
    1.环境搭建：C#与WebAssembly的“基础设施”核心场景：工具链整合：.NETSDK+Emscripten+VSCode的完美配合编译参数的“黑科技”：-sWASM=1与-sSIDE_MODULE=1的协同作用代码示例：环境配置与编译流程#安装.NETSDKdotnetinstall-sdk-v7.0.406#安装Emscripten（Windows示例）gitclonehttps://g
  • Threejs实现物理运动模拟
    一、物理运动原理在Three.js中实现物理运动的核心思想是：Three.js负责渲染：Three.js是一个图形库，用于创建和渲染3D场景。物理引擎负责计算：物理引擎（如Cannon.js或Ammo.js，本文用的是前一种）模拟现实世界的物理规则，例如重力、碰撞、反弹等。数据同步：在每一帧中，将物理引擎计算的结果（如物体的位置、速度、旋转等）同步到Three.js的对象上。二、实现步骤详解1.初
  • 线上展厅博览会对于社会发展的意义 云展科技 vr3d虚拟现实人工智能
    在互联网与3D技术的迅猛发展和广泛应用的当下，全球范围内正掀起一股搭建3D虚拟数字化展馆与虚拟博览会的浪潮。这一趋势给传统的线下会展行业带来了前所未有的挑战与机遇。云展数字化展馆正积极探索信息化时代下会展行业的发展道路，充分利用3D建模技术和Web3D互联网技术，为会展行业注入了新的活力与时代意义。一、线上展会虚拟博览会与VR数字化展馆的优势企业可以通过重复使用线上展厅，实现24小时不间断的互联网
  • threejs 源码解析_threejs海面模拟 weixin_39875675 threejs源码解析
    源码：作者：johnhollen最终效果不是特别漂亮，但作者给出了详细的笔记，这就是收录这项源码的原因。记笔记：TNM084，是LinköpingUniversity的图像处理课程，github上有20有关多个项目，容易学习。以下是对原作者笔记的翻译。项目介绍该项目由JohnHollén(johho982)在LinköpingUniversity的TNM084-图像处理课程中完成。最初的计划是创建
  • 在 Three.js 中实现自定义 Shader 效果 贵州数擎科技有限公司 javascript开发语言ecmascript
    大家好！我是[数擎AI]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！开发领域：前端开发|AI应用|Web3D|元宇宙技术栈：JavaScript、React、ThreeJs、WebGL、Go经验经验：6年+前端开发经验，专注于图形渲染和AI技术经验经验：演示地址开源项目：AI智简未来、晓智元宇宙、
  • Web 3D协作平台开发案例：构建制造业远程设计与可视化协作 工业3D_大熊 3DCAD开发工具3d3D模型可视化3D模型格式转换3D数据格式转换CAD格式转换3DWEB可视化Web协同
    HOOPSCommunicator为开发者提供了丰富的定制化能力，助力他们在实现强大Web3D可视化功能的同时，灵活构建符合特定业务需求的工程应用。对于希望构建在线协同设计工具的企业而言，如何在保障性能与用户体验的前提下实现高效开发，成为选择技术平台时的重要考量。为更具体展示HOOPSCommunicator在实际应用场景中的价值，本文将介绍我们的合作伙伴CoLab如何基于该SDK构建其创新的3D
  • java解析APK 3213213333332132 javaapklinux解析APK
    解析apk有两种方法 1、结合安卓提供apktool工具，用java执行cmd解析命令获取apk信息 2、利用相关jar包里的集成方法解析apk 这里只给出第二种方法，因为第一种方法在linux服务器下会出现不在控制范围之内的结果。 public class ApkUtil { /** * 日志对象 */ private static Logger
  • nginx自定义ip访问N种方法 ronin47 nginx 禁止ip访问
    　　　因业务需要，禁止一部分内网访问接口，　由于前端架了F5，直接用deny或allow是不行的，这是因为直接获取的前端Ｆ５的地址。 　　　所以开始思考有哪些主案可以实现这样的需求，目前可实施的是三种： 　　　一：把ip段放在redis里，写一段lua           二：利用geo传递变量，写一段
  • mysql timestamp类型字段的CURRENT_TIMESTAMP与ON UPDATE CURRENT_TIMESTAMP属性 dcj3sjt126com mysql
    timestamp有两个属性，分别是CURRENT_TIMESTAMP 和ON UPDATE CURRENT_TIMESTAMP两种，使用情况分别如下：   1.   CURRENT_TIMESTAMP    当要向数据库执行insert操作时，如果有个timestamp字段属性设为   CURRENT_TIMESTAMP，则无论这
  • struts2+spring+hibernate分页显示 171815164 Hibernate
    分页显示一直是web开发中一大烦琐的难题，传统的网页设计只在一个JSP或者ASP页面中书写所有关于数据库操作的代码，那样做分页可能简单一点，但当把网站分层开发后，分页就比较困难了，下面是我做Spring+Hibernate+Struts2项目时设计的分页代码，与大家分享交流。 　　1、DAO层接口的设计，在MemberDao接口中定义了如下两个方法： public in
  • 构建自己的Wrapper应用 g21121 rap
            我们已经了解Wrapper的目录结构，下面可是正式利用Wrapper来包装我们自己的应用，这里假设Wrapper的安装目录为:/usr/local/wrapper。           首先，创建项目应用   &nb
  • [简单]工作记录_多线程相关 53873039oycg 多线程
         最近遇到多线程的问题,原来使用异步请求多个接口(n*3次请求)     方案一 使用多线程一次返回数据,最开始是使用5个线程,一个线程顺序请求3个接口,超时终止返回     缺点       测试发现必须3个接
  • 调试jdk中的源码，查看jdk局部变量 程序员是怎么炼成的 jdk 源码
    转自：http://www.douban.com/note/211369821/    学习jdk源码时使用--   学习java最好的办法就是看jdk源代码，面对浩瀚的jdk（光源码就有40M多，比一个大型网站的源码都多）从何入手呢，要是能单步调试跟进到jdk源码里并且能查看其中的局部变量最好了。 可惜的是sun提供的jdk并不能查看运行中的局部变量
  • Oracle RAC Failover 详解 aijuans oracle
    Oracle RAC 同时具备HA(High Availiablity) 和LB(LoadBalance). 而其高可用性的基础就是Failover(故障转移). 它指集群中任何一个节点的故障都不会影响用户的使用，连接到故障节点的用户会被自动转移到健康节点，从用户感受而言， 是感觉不到这种切换。 Oracle 10g RAC 的Failover 可以分为3种： 1. Client-Si
  • form表单提交数据编码方式及tomcat的接受编码方式 antonyup_2006 JavaScripttomcat浏览器互联网servlet
    原帖地址：http://www.iteye.com/topic/266705 form有2中方法把数据提交给服务器，get和post,分别说下吧。 （一）get提交 1.首先说下客户端（浏览器）的form表单用get方法是如何将数据编码后提交给服务器端的吧。    对于get方法来说，都是把数据串联在请求的url后面作为参数，如：http://localhost:
  • JS初学者必知的基础 百合不是茶 js函数js入门基础
    JavaScript是网页的交互语言,实现网页的各种效果, JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 HTML 页面增加交互性。 许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的
  • iBatis的分页分析与详解 bijian1013 javaibatis
            分页是操作数据库型系统常遇到的问题。分页实现方法很多，但效率的差异就很大了。iBatis是通过什么方式来实现这个分页的了。查看它的实现部分，发现返回的PaginatedList实际上是个接口，实现这个接口的是PaginatedDataList类的对象，查看PaginatedDataList类发现，每次翻页的时候最
  • 精通Oracle10编程SQL(15)使用对象类型 bijian1013 oracle数据库plsql
    /* *使用对象类型 */ --建立和使用简单对象类型 --对象类型包括对象类型规范和对象类型体两部分。 --建立和使用不包含任何方法的对象类型 CREATE OR REPLACE TYPE person_typ1 as OBJECT( name varchar2(10),gender varchar2(4),birthdate date ); drop type p
  • 【Linux命令二】文本处理命令awk bit1129 linux命令
    awk是Linux用来进行文本处理的命令，在日常工作中，广泛应用于日志分析。awk是一门解释型编程语言，包含变量，数组，循环控制结构，条件控制结构等。它的语法采用类C语言的语法。   awk命令用来做什么？ 1.awk适用于具有一定结构的文本行，对其中的列进行提取信息 2.awk可以把当前正在处理的文本行提交给Linux的其它命令处理，然后把直接结构返回给awk 3.awk实际工
  • JAVA(ssh2框架)+Flex实现权限控制方案分析 白糖_ java
      目前项目使用的是Struts2+Hibernate+Spring的架构模式，目前已经有一套针对SSH2的权限系统，运行良好。但是项目有了新需求：在目前系统的基础上使用Flex逐步取代JSP，在取代JSP过程中可能存在Flex与JSP并存的情况，所以权限系统需要进行修改。 【SSH2权限系统的实现机制】 权限控制分为页面和后台两块：不同类型用户的帐号分配的访问权限是不同的，用户使
  • angular.forEach boyitech AngularJSAngularJS APIangular.forEach
    angular.forEach 描述: 循环对obj对象的每个元素调用iterator, obj对象可以是一个Object或一个Array. Iterator函数调用方法: iterator(value, key, obj), 其中obj是被迭代对象，key是obj的property key或者是数组的index，value就是相应的值啦. (此函数不能够迭代继承的属性.)
  • java-谷歌面试题-给定一个排序数组，如何构造一个二叉排序树 bylijinnan 二叉排序树
    import java.util.LinkedList; public class CreateBSTfromSortedArray { /** * 题目:给定一个排序数组，如何构造一个二叉排序树 * 递归 */ public static void main(String[] args) { int[] data = { 1, 2, 3, 4,
  • action执行2次 Chen.H JavaScriptjspXHTMLcssWebwork
    xwork 写道 <action name="userTypeAction" class="com.ekangcount.website.system.view.action.UserTypeAction"> <result name="ssss" type="dispatcher">
  • [时空与能量]逆转时空需要消耗大量能源 comsci 能源
            无论如何,人类始终都想摆脱时间和空间的限制....但是受到质量与能量关系的限制,我们人类在目前和今后很长一段时间内,都无法获得大量廉价的能源来进行时空跨越.....         在进行时空穿梭的实验中,消耗超大规模的能源是必然
  • oracle的正则表达式(regular expression)详细介绍 daizj oracle正则表达式
        正则表达式是很多编程语言中都有的。可惜oracle8i、oracle9i中一直迟迟不肯加入，好在oracle10g中终于增加了期盼已久的正则表达式功能。你可以在oracle10g中使用正则表达式肆意地匹配你想匹配的任何字符串了。 正则表达式中常用到的元数据(metacharacter)如下： ^ 匹配字符串的开头位置。 $ 匹配支付传的结尾位置。 *
  • 报表工具与报表性能的关系 datamachine 报表工具birt报表性能润乾报表
    在选择报表工具时，性能一直是用户关心的指标，但是，报表工具的性能和整个报表系统的性能有多大关系呢？ 要回答这个问题，首先要分析一下报表的处理过程包含哪些环节，哪些环节容易出现性能瓶颈，如何优化这些环节。   一、报表处理的一般过程分析 1、用户选择报表输入参数后，报表引擎会根据报表模板和输入参数来解析报表，并将数据计算和读取请求以SQL的方式发送给数据库。   2、
  • 初一上学期难记忆单词背诵第一课 dcj3sjt126com wordenglish
    what 什么  your 你 name 名字 my 我的 am 是 one 一 two 二 three 三 four 四 five 五 class 班级，课   six 六 seven 七 eight 八 nince 九 ten 十 zero 零 how 怎样 old 老的 eleven 十一 twelve 十二 thirteen
  • 我学过和准备学的各种技术 dcj3sjt126com 技术
    语言VB https://msdn.microsoft.com/zh-cn/library/2x7h1hfk.aspxJava http://docs.oracle.com/javase/8/C# https://msdn.microsoft.com/library/vstudioPHP http://php.net/manual/en/Html 
  • struts2中token防止重复提交表单 蕃薯耀 重复提交表单struts2中token
    struts2中token防止重复提交表单   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月12日 11:52:32 星期日 ht
  • 线性查找二维数组 hao3100590 二维数组
    1.算法描述 有序（行有序，列有序，且每行从左至右递增，列从上至下递增）二维数组查找，要求复杂度O(n)   2.使用到的相关知识： 结构体定义和使用，二维数组传递（http://blog.csdn.net/yzhhmhm/article/details/2045816）   3.使用数组名传递 这个的不便之处很明显，一旦确定就是不能设置列值 //使
  • spring security 3中推荐使用BCrypt算法加密密码 jackyrong Spring Security
    spring security 3中推荐使用BCrypt算法加密密码了，以前使用的是md5， Md5PasswordEncoder 和 ShaPasswordEncoder，现在不推荐了，推荐用bcrpt Bcrpt中的salt可以是随机的，比如： int i = 0; while (i < 10) { String password = "1234
  • 学习编程并不难,做到以下几点即可! lampcy javahtml编程语言
    不论你是想自己设计游戏，还是开发iPhone或安卓手机上的应用，还是仅仅为了娱乐，学习编程语言都是一条必经之路。编程语言种类繁多，用途各 异，然而一旦掌握其中之一，其他的也就迎刃而解。作为初学者，你可能要先从Java或HTML开始学，一旦掌握了一门编程语言，你就发挥无穷的想象，开发 各种神奇的软件啦。 1、确定目标 学习编程语言既充满乐趣，又充满挑战。有些花费多年时间学习一门编程语言的大学生到
  • 架构师之mysql----------------用group+inner join,left join ,right join 查重复数据（替代in) nannan408 right join
    1.前言。   如题。 2.代码 (1)单表查重复数据,根据a分组   SELECT m.a,m.b, INNER JOIN （select a,b,COUNT(*) AS rank FROM test.`A` A GROUP BY a HAVING rank>1 )k ON m.a=k.a （2）多表查询 ， 使用改为le
  • jQuery选择器小结 VS 节点查找（附css的一些东西） Everyday都不同 jquerycssname选择器追加元素查找节点
    最近做前端页面，频繁用到一些jQuery的选择器，所以特意来总结一下：   测试页面： <html> <head> <script src="jquery-1.7.2.min.js"></script> <script> /*$(function() { $(documen
  • 关于EXT tntxia ext
      ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用 javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。       ExtJs最开始基于YUI技术，由开发人员Jack
  • 一个MIT计算机博士对数学的思考 xjnine Math
     在过去的一年中，我一直在数学的海洋中游荡，research进展不多，对于数学世界的阅历算是有了一些长进。为什么要深入数学的世界？作为计算机的学生，我没有任何企图要成为一个数学家。我学习数学的目的，是要想爬上巨人的肩膀，希望站在更高的高度，能把我自己研究的东西看得更深广一些。说起来，我在刚来这个学校的时候，并没有预料到我将会有一个深入数学的旅程。我的导师最初希望我去做的题目，是对appe
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他