fastmover
fastmover

Three.js 入门篇-制作3D 动漫角色欣赏

Three.js 入门篇-制作3D 动漫角色欣赏

    • 前言
    • 一、与卡通相关又与前端相关的主题及制作思路
    • 二、Three.js加载3D模型代码一般思路
    • 三、源码及关键注释
    • 参考引用
    • 交流与学习

作者最新发布文章：《Webgl / Three.js 从入门到“放弃”指南》
本文同步发布于：http://www.a4z.cn/fe/2019/09/12/three-js-3d-anime/

前言

废话不多说，先上一波炫酷前端效果展示，点我去欣赏。最近有个任务，刚搞完一个卡通网 kt5.cn，没有一点点流量。 如何为卡通网带来点人气呢？ ，于是就有了这篇《Three.js 制作3D 动漫角色欣赏篇》，顺便想带旺一下给卡通网。

一、与卡通相关又与前端相关的主题及制作思路

突发奇想，要不针对一些3d动漫的角色，搞个展示show的页面吧：

  1. 3D模型哪里来？ ，当然是去大名鼎鼎的3dwarehouse（https://3dwarehouse.sketchup.com/），大品牌，放心；谷歌出品、必是精品；
  2. 如何把3d模型展示出来了，当然是选择来自 **未来前端技术 **的Three.js，支持多种3D模型的加载，敲定AR/VR不在话下；
  3. 二话不说下载3D 模型撸代码开干。

二、Three.js加载3D模型代码一般思路

Three.js的代码经典思路：

  1. 创建一个场景Scene
  2. 给场景加个相机Camera
  3. 创建一个渲染器Renderer
  4. 把3D模型加载进来，添加到场景
  5. 渲染循环（动画）。如果3D模型自带动画就直接播放其动画、不然后就自己添加平移/缩放/旋转等效果动画

三、源码及关键注释

点击查看在线效果

DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>3D 动漫角色欣赏 : Centaur-Verttitle>
    <meta
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
      name="viewport"
    />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <link type="text/css" rel="stylesheet" href="main.css" />
    <style>
      body {
        font-family: Monospace;
        background-color: #000;
        color: #fff;
        margin: 0px;
        overflow: hidden;
      }
      #percent {
        color: #fff;
        position: absolute;
        top: 10px;
        right: 0;
        width: 400px;
        text-align: center;
        z-index: 100;
        display: block;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 3px;
      }
    style>
  head>
  <body>
    <div id="percent">0%div>
    <div id="container">div>
    <div id="info">div>
    <script src="https://threejs.org/build/three.js">script>
    <script src="./js/libs/stats.min.js">script>
    <script src="./js/loaders/ColladaLoader.js">script>
    <script src="./js/controls/OrbitControls.js">script>
    <script>
      var container, stats, clock, controls
      var camera, scene, renderer, mixer, avatar
      var loadingEl = document.getElementById('percent')

      init()
      animate()

      function init() {
        container = document.getElementById('container')
        // 创建一个透视相机Camera
        camera = new THREE.PerspectiveCamera(
          25,
          window.innerWidth / window.innerHeight,
          1,
          1000
        )
        camera.position.set(0, 10, 20)
        scene = new THREE.Scene()
        // 使用THREE.Clock来启动一个计时器
        clock = new THREE.Clock()

        // 加载collada 3d模型
        var loader = new THREE.ColladaLoader()
        loader.load(
          './models/centaur-vert/model.dae',
          function(collada) {
            loadingEl.remove()
            var animations = collada.animations
            avatar = collada.scene
            // 加载完之后按需调整一下3D模型的比例
            avatar.scale.x = 0.0025
            avatar.scale.y = 0.0025
            avatar.scale.z = 0.0025
            // console.log(avatar)

            avatar.traverse(function(node) {
              if (node.isSkinnedMesh) { // 有皮肤就不进行视锥采集
                node.frustumCulled = false
              }
            })
            if (animations.length > 0) {
              // 如果有动画就播放动画
              mixer = new THREE.AnimationMixer(avatar)
              mixer.clipAction(animations[0]).play()
            }
            scene.add(avatar) // 添加把3D模型添加到场景
          },
          function(event) { // 添加加载进度展示
            loadingEl.innerHTML =
              '3D模型加载进度：' +
              (((event.loaded * 100) / event.total) | 0) +
              '% 
操作方式：鼠标 + 加上下左右键'
          }
        )

        // 添加网格
        var gridHelper = new THREE.GridHelper(10, 20)
        scene.add(gridHelper)

        // 添加灯光（环境光源，白光）
        var ambientLight = new THREE.AmbientLight(0xffffff, 0.2)
        scene.add(ambientLight)

        // 添加灯光（点光源，白光）
        var pointLight = new THREE.PointLight(0xffffff, 0.8)
        scene.add(camera)
        camera.add(pointLight)

        // 创建渲染器
        renderer = new THREE.WebGLRenderer({ antialias: true }) // 抗锯齿
        renderer.setPixelRatio(window.devicePixelRatio) // 设置dpr
        renderer.setSize(window.innerWidth, window.innerHeight) // 设置比率
        container.appendChild(renderer.domElement)

        // 绑定鼠标/触屏操控事件
        controls = new THREE.OrbitControls(camera, renderer.domElement)
        controls.screenSpacePanning = true
        controls.minDistance = 5
        controls.maxDistance = 40
        controls.target.set(0, 2, 0)
        controls.update()

        // 添加左上角的渲染统计
        stats = new Stats()
        container.appendChild(stats.dom)

        // 监控屏幕大小变化事件
        window.addEventListener('resize', onWindowResize, false)
      }

      function onWindowResize() { // 监控屏幕大小变化进行适配渲染
        camera.aspect = window.innerWidth / window.innerHeight
        camera.updateProjectionMatrix()
        renderer.setSize(window.innerWidth, window.innerHeight)
      }

      // 动画代码，绕z轴旋转
      function animate() {
        avatar && avatar.rotation && (avatar.rotation.z += 0.005) 
        requestAnimationFrame(animate)

        render()
        stats.update()
      }

      function render() {
        var delta = clock.getDelta()

        if (mixer !== undefined) {
          mixer.update(delta)
        }

        renderer.render(scene, camera)
      }
    script>
  body>
html>
<script>script>

参考引用

1: https://threejs.org/
2: https://github.com/mrdoob/three.js/

交流与学习

  1. 本文作者：Nelson Kuang
  2. 版权声明：欢迎转载学习 => 请标注信息来源于https://blog.csdn.net/u012609766/article/details/100771979

你可能感兴趣的:(Three.js,webgl)

  • Three.js 实战：开启阴影、灯光旋转与阴影清晰度设置详解 技术需要沉淀gogo three.jsjavascript开发语言ecmascript
    在Three.js中，阴影效果是提升真实感的重要手段。本文将从以下三个方面进行系统讲解：如何启用阴影如何让灯光动态旋转以制造动态阴影如何设置阴影的清晰度（shadowmap分辨率）一、开启阴影的关键步骤1.渲染器启用阴影constrenderer=newTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,
  • BabylonJS/Spector.js 浏览器扩展使用完全指南 萧桔格Wilbur
    BabylonJS/Spector.js浏览器扩展使用完全指南什么是Spector.jsSpector.js是一款专为WebGL开发者设计的强大调试工具，它能够捕获并分析WebGL上下文中的所有操作。无论您使用的是Three.js、Babylon.js等流行引擎，还是原生WebGLAPI，Spector.js都能帮助您深入了解每一帧的渲染过程。核心功能完整的命令列表捕获：记录所有WebGL调用及其
  • Unity发布WebGL不显示中文字体问题 同灯花城 UnityWebGL不显示中文字体
    在Unity发布WebGL的时候中文不能够显示，主要在于字体的设置，Unity默认的字体是Arial字体首先想到的是字体类型不对，接下来更换字体解决方案：1.在Asset下创建文件夹，Font2.导入你从网上下载的或者本地字体3.更换字体，重新发布WebGL包更换的字体格式为.ttf格式，你可以从电脑本地字体找到这种字体格式的字体导入Unity也可以从网上下载字体，一下是提供的下载地址：1.htt
  • canvas入门教学（1）基本认识与了解 WebGIS小智 Canvas专题讲解htmljavascriptcanvaswebgl
    从本文章开始，笔者将带大家从0开始，一点一点慢慢的学习canvas。掌握webgl图形渲染的一些底层的原理和逻辑，方便大家后续更容易理解一些gis框架和原理。canvas本质上是一个html元素，和其他html元素一样，本质上也属于document。canvas翻译过来中文叫做画布，顾名思义canvas的设计者最初是希望人们能够在网页上也有绘画的能力。canvas的用途很广，例如游戏，签名类，地图
  • 《WebGL打造高性能3D粒子特效系统：从0到1的技术探秘》 程序猿阿伟 webgl3djava
    在游戏里，爆炸时四溅的火花、魔法释放时闪烁的光晕；在可视化项目中，数据流动时呈现的璀璨光河，这些令人惊叹的效果，背后离不开强大的技术支撑。而WebGL，作为在浏览器端实现硬件加速3D图形渲染的技术，为我们开启了构建高性能3D粒子特效系统的大门。WebGL的渲染管线是整个3D粒子特效系统的核心运转机制，它就像是一场精心编排的舞台剧，各个环节紧密配合，才能呈现出精彩的演出。当我们着手构建粒子特效时，首
  • 64. Three.js案例-创建并旋转多个立方体 MossGrower #ThreejsjavascriptThree.js旋转translateX
    64.Three.js案例-创建并旋转多个立方体实现效果在浏览器中，可以看到两个立方体分别位于场景的不同位置，并且一个立方体持续绕Y轴旋转。知识点THREE.WebGLRenderer用于创建渲染器实例，支持抗锯齿处理。构造器THREE.WebGLRenderer(parameters)参数类型描述parameters.antialiasBoolean是否启用抗锯齿，默认为false。方法setS
  • Agora_Unity_WebGL：实时互动的WebGL解决方案
    Agora_Unity_WebGL：实时互动的WebGL解决方案项目介绍Agora_Unity_WebGL是一个开源的UnityWebGL插件，它是对AgoraWebSDK4.x版本的封装。这个项目旨在为开发者提供一种在Unity中轻松集成实时音视频互动功能的方法，特别适用于需要在Web平台运行的Unity项目。通过这个插件，开发者可以快速地实现实时音频、视频通信以及直播等功能。项目技术分析Ago
  • Three.js入门：创建第一个3D场景 薯条说影 Three.js3D场景创建跨平台设置安全异常处理HTML骨架搭建
    背景简介Three.js是一个轻量级的3D图形库，它让Web开发者能够在浏览器中创建和显示3D图形。本章介绍如何设置环境以开始使用Three.js，包括不同操作系统下的安装步骤、安全异常处理以及基本的HTML骨架创建。安装与设置操作系统兼容性：Three.js的使用不仅限于Windows系统。对于其他操作系统，如Linux和MacOS，需要将可执行文件复制到目标目录，并通过命令行启动。无论是哪种操
  • Three.js入门第一步：两种方式搭建你的3D项目[特殊字符]️
    上一篇我们聊了学习Three.js前的“地基”知识，现在地基牢固，该正式动工了！在创造炫酷的3D世界之前，我们得先把开发环境给搭好。官方手册提供了两种主流的安装方式，分别适用于不同场景。选对方法，事半功倍！方式一：CDN+Importmap(极速上手)这是官方最为推荐的、也是最简单的入门方式，尤其适合学习、做小练习、或者快速验证一个想法。优点：无需安装任何东西！只需要一个能联网的浏览器。操作方法：
  • three前置课程知识
    学习中文网(1.threejs文件包下载和目录简介|Three.js中文网)threejs官方文件包所有版本：https://github.com/mrdoob/three.js/releases更新迭代较快，要选择对应版本使用---下载zip压缩包Threejs官网中文文档链接：https://threejs.org/docs/index.html#manual/zh/重要的内容docs包:文档
  • Three.js 实现导出模型文件（.glb,.gltf）功能 GLTFExporter
    Three.js提供了导出（.glb,.gltf）文件的APIGLTFExporter用于实现场景内容导出模型文件的功能导出模型文件主要使用parse方法，该方法接收三个参数：1.scene：要导出的场景对象。2.onComplete：解析完成后的回调函数，接收一个参数result，表示解析后的glTF数据。3.options：可选参数，用于配置导出的选项。下面是options的一些常用参数选项：
  • 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.js动画系统实现_（9）.Three.js中的骨骼动画实现 chenlz2007 游戏开发javascriptnginx开发语言vr性能优化ecmascript前端
    Three.js中的骨骼动画实现在上一节中，我们介绍了如何在Three.js中加载和显示3D模型。接下来，我们将深入探讨如何在Three.js中实现骨骼动画。骨骼动画是一种高级的动画技术，它通过控制模型的骨骼来驱动模型的动画，广泛应用于虚拟角色的动画制作。在本节中，我们将学习如何在Three.js中实现骨骼动画，包括骨骼动画的基本原理、如何加载带有骨骼的模型、如何创建和控制动画混合器（Animat
  • 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
  • vue 与 Three.js 结合
    打底：新建vue工程，引入Three.js及其相关插件一、使用vue-cli新建vue工程二、安装Three.js包依赖三、Three.js在vue中的引入方式一、使用vue-cli新建vue工程注意：这里是用vue-cli2.0建立的工程创建一个vue2.0项目，名称叫做vue-three-demo，这里一般创建之后，会自动将依赖包安装完成，若未完成，自己在执行一下npminstall即可。vu
  • Node.js 后台系统 - 基本增删改查实现
    个人简介‍‍个人主页：魔术师学习方向：主攻前端方向，正逐渐往全栈发展个人状态：研发工程师，现效力于政务服务网事业人生格言：“心有多大，舞台就有多大。”推荐学习：Vue2Vue3Vue2/3项目实战Node.js实战Three.js鸿蒙开发小程序使用备注：仅供学习交流严禁用于商业用途，若发现侵权内容请及时联系作者更新进度：持续更新内容个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加
  • 光伏发电园区管理系统 - Three.js + Django 实现方案 小赖同学啊 testTechnologyPreciousjavascriptdjango开发语言
    光伏发电园区管理系统-Three.js+Django实现方案我将设计一个基于Three.js和Django的光伏发电园区管理系统，包含3D可视化、实时监控和数据分析功能。系统架构设计API请求数据存储数据存储数据存储获取获取前端-Three.jsDjango后端数据库外部API光伏设备数据气象数据发电数据实时天气电价信息技术栈与依赖前端：Three.js(r128)-3D渲染Chart.js-数据
  • 【前端】【数字孪生】基础知识：数字孪生 3D 模型去哪里找？Three.js 辅助组件库有哪些？模型的动画是黑盒吗？怎么控制？ 患得患失949 数字孪生前端3djavascript
    前端数字孪生全解：Vue与Three.js的最佳实践、3D模型网站推荐、自带动画控制详解在数字孪生（DigitalTwin）和三维可视化逐渐成为前端热点的今天，很多开发者开始转向WebGL+前端框架的集成实践，最常见的组合包括：React+Three.js（通过@react-three/fiber与@react-three/drei）Vue+Three.js（本文重点）本文将从以下几个维度全面解析
  • FFmpeg、WebAssembly 和 WebGL 在 Web 端的结合应用 醉方休 ffmpegwasmwebgl
    FFmpeg、WebAssembly和WebGL在Web端的结合应用这三个技术组合可以创建强大的浏览器端多媒体处理解决方案，下面我将详细介绍它们如何协同工作。1.FFmpeg与WebAssemblyFFmpeg.wasm项目概念：将FFmpeg编译为WebAssembly在浏览器中运行特点：完全在浏览器中执行视频/音频处理无需服务器转码保护用户隐私（数据不离客户端）基本使用示例import{cre
  • Vue3高级-第二十六篇：Vue3 与 WebGL 的融合探索 程序员勇哥 前端全套教程vue.js前端javascript开发语言前端框架
    Vue3高级-第二十六篇：Vue3与WebGL的融合探索1.WebGL基础与Vue3集成准备深入了解WebGL的概念、功能与应用场景概念：WebGL（WebGraphicsLibrary）是一种用于在网页上进行2D和3D图形渲染的JavaScriptAPI。它基于OpenGLES2.0规范，允许开发者在浏览器环境中直接操作图形硬件，无需安装额外插件。WebGL通过在浏览器中创建一个绘图上下文，利用
  • 用WebGPU实现现代Web3D渲染——突破传统性能瓶颈的解决方案 桂月二二 wasmfastapi开发语言rust
    引言随着Web技术的不断发展，Web3D应用的需求不断增加。从游戏引擎到可视化工具，3D渲染技术正在被广泛地应用。然而，传统WebGL技术在性能、效率和灵活性上仍存在局限性。而WebGPU作为一种新兴的Web标准，为现代3D渲染提供了强大而高效的解决方案。本文将探讨如何使用WebGPU实现高效的Web3D渲染，逐步构建一个简单的渲染引擎，并介绍其在性能和功能上的优势。背景WebGPU是一种跨平台的
  • 掌握Three.js材质：从基础到自定义着色器 AWS云计算 Three.js材质着色器ShaderMaterial
    背景简介在Three.js中，材质是定义对象表面如何与光线交互并呈现给观察者的属性集。选择合适的材质对于创建真实感强的三维场景至关重要。本篇博客将探讨Three.js中不同类型的材质，以及如何利用它们来提升我们的三维模型质感。MeshLambertMaterial和MeshPhongMaterialMeshLambertMaterial是Three.js中用于创建具有柔和阴影的表面的一种材质。通过
  • Three.js引擎开发：Three.js渲染技术_（14）.Three.js环境与大气效果 chenlz2007 游戏开发javascript开发语言ecmascript交互前端
    Three.js环境与大气效果在虚拟现实游戏中，环境与大气效果对于提升游戏的真实感和沉浸感至关重要。Three.js提供了多种方法来实现这些效果，包括使用环境贴图、大气散射、雾化效果等。本节将详细介绍如何在Three.js中实现这些效果，并提供具体的代码示例。环境贴图环境贴图（EnvironmentMap）是一种用于模拟物体周围环境的技术，通常用于实现反射效果。Three.js支持多种类型的环境贴
  • OpenGL: OpenGL+Qt实现介绍 (一) 程序员小马兰 OpenGL+Qt计算机视觉图形渲染前端
    一、通过这个教程我们能学到什么？1、计算机图形学的基础知识。2、使用OpenGL在QT中进行编程。3、使用OpenGL做出一些很酷的效果。二、需要哪些预备知识？1、熟悉C++编程语言、Qt基本操作。2、数学基础知识(线性代数、几何、三角学)。三、为什么要学习OpenGL？各种三维图形引擎，原理都类似，几乎没什么差别，学好了OpenGL对Unity3D、虚幻引擎、OSG、webGL等的使用都会有巨大
  • 理解WebGL中的顶点着色器和片元着色器 程序猿全栈の董（董翔） webgl着色器
    WebGL是一种基于OpenGLES的JavaScriptAPI，它允许我们在网页上直接渲染3D图形而无需任何插件。WebGL的核心是着色器编程，它主要包含两种着色器：顶点着色器(VertexShader)和片元着色器(FragmentShader)。顶点着色器负责处理每个顶点的位置，它决定了顶点在屏幕上的最终位置。而片元着色器则负责计算每个像素的颜色值。这两个着色器共同工作，构成了WebGL渲染
  • 前端3D技术-3. Three.js 入门 程序员勇哥 前端全套教程前端3djavascripttypescriptreact.js开发语言
    前端3D技术-3.Three.js入门在前端3D开发领域，WebGL虽能实现高性能3D渲染，但直接使用其API开发门槛较高。而Three.js作为基于WebGL封装的JavaScript库，极大降低了3D开发难度，成为众多开发者的首选。下面就让我们走进Three.js的世界，开启3D开发的入门之旅。Three.js简介与安装Three.js的优势和特点Three.js最大的优势在于它对WebGL复
  • ThreeJS入门（153）：THREE.Texture 知识详解，示例代码 还是大剑师兰特 #ThreeJS综合教程500+大剑师threejs示例threejs教程
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第153篇入门文章文章目录构造函数属性方法使用示例注意事项总结THREE.Te
  • 让我们用流行的 3D 文件格式“glTF/glb”来增强 WebGL 的表现力吧！ 在下胡三汉 3dmaxfbx
    简介-什么是glTF-glTF（GL传输格式）是一种用于运行时应用程序的资产格式，它与类似OpenGL的API（WebGL、OpenGLES、OpenGL）具有高度相关性。特别是对于WebGL，它是不依赖于任何特定库的权威的成熟通用3D格式。最初，它是以COLLADA2jSON的名义开发的。这个名字出现在这里，但大约在10年前，也就是Playstation3时代，CG技术行业标准化组织Khrono
  • 理解WebGL中的顶点着色器和片元着色器 程序猿全栈の董（董翔） webgl着色器
    WebGL是一种基于OpenGLES的JavaScriptAPI，它允许我们在网页上直接渲染3D图形而无需任何插件。WebGL的核心是着色器编程，它主要包含两种着色器：顶点着色器(VertexShader)和片元着色器(FragmentShader)。顶点着色器负责处理每个顶点的位置，它决定了顶点在屏幕上的最终位置。而片元着色器则负责计算每个像素的颜色值。这两个着色器共同工作，构成了WebGL渲染
  • 基于 WebGL 与 GIS 的智慧垃圾分类三维可视化技术方案 图扑可视化 数字孪生三维可视化垃圾分类智慧环卫
    图扑自主研发的HT可视化引擎，基于HTML5的WebGL与Canvas技术构建，形成了完整的2D/3D图形渲染体系。该引擎无需依赖第三方插件，通过纯JavaScript脚本调用API，即可实现跨平台的可视化交互体验，支持PC端、移动端及大屏终端的多屏协同。在三维渲染技术层面，引擎深度集成WebGL底层图形接口，构建了高效的轻量化处理体系。HT还支持3DTiles格式航拍倾斜摄影实景数据、城市建筑群
  • 关于旗正规则引擎下载页面需要弹窗保存到本地目录的问题 何必如此 jsp超链接文件下载窗口
    生成下载页面是需要选择“录入提交页面”，生成之后默认的下载页面<a>标签超链接为：<a href="<%=root_stimage%>stimage/image.jsp?filename=<%=strfile234%>&attachname=<%=java.net.URLEncoder.encode(file234filesourc
  • 【Spark九十八】Standalone Cluster Mode下的资源调度源代码分析 bit1129 cluster
    在分析源代码之前，首先对Standalone Cluster Mode的资源调度有一个基本的认识： 首先，运行一个Application需要Driver进程和一组Executor进程。在Standalone Cluster Mode下，Driver和Executor都是在Master的监护下给Worker发消息创建(Driver进程和Executor进程都需要分配内存和CPU，这就需要Maste
  • linux上独立安装部署spark daizj linux安装spark1.4部署
    下面讲一下linux上安装spark，以 Standalone Mode 安装   1）首先安装JDK   下载JDK：jdk-7u79-linux-x64.tar.gz  ，版本是1.7以上都行，解压 tar -zxvf jdk-7u79-linux-x64.tar.gz     然后配置 ~/.bashrc&nb
  • Java 字节码之解析一 周凡杨 java字节码javap
        一： Java 字节代码的组织形式   类文件 {     OxCAFEBABE ，小版本号，大版本号，常量池大小，常量池数组，访问控制标记，当前类信息，父类信息，实现的接口个数，实现的接口信息数组，域个数，域信息数组，方法个数，方法信息数组，属性个数，属性信息数组 } &nbs
  • java各种小工具代码 g21121 java
    1.数组转换成List import java.util.Arrays; Arrays.asList(Object[] obj); 2.判断一个String型是否有值 import org.springframework.util.StringUtils; if (StringUtils.hasText(str)) 3.判断一个List是否有值 import org.spring
  • 加快FineReport报表设计的几个心得体会 老A不折腾 finereport
    一、从远程服务器大批量取数进行表样设计时，最好按“列顺序”取一个“空的SQL语句”，这样可提高设计速度。否则每次设计时模板均要从远程读取数据，速度相当慢！！ 二、找一个富文本编辑软件（如NOTEPAD+）编辑SQL语句，这样会很好地检查语法。有时候带参数较多检查语法复杂时，结合FineReport中生成的日志，再找一个第三方数据库访问软件（如PL/SQL）进行数据检索，可以很快定位语法错误。
  • mysql linux启动与停止 墙头上一根草
    如何启动/停止/重启MySQL一、启动方式1、使用 service 启动：service mysqld start2、使用 mysqld 脚本启动：/etc/inint.d/mysqld start3、使用 safe_mysqld 启动：safe_mysqld&二、停止1、使用 service 启动：service mysqld stop2、使用 mysqld 脚本启动：/etc/inin
  • Spring中事务管理浅谈 aijuans spring事务管理
    Spring中事务管理浅谈 By Tony Jiang@2012-1-20 Spring中对事务的声明式管理 拿一个XML举例 [html]  view plain copy print ? <?xml version="1.0" encoding="UTF-8"?>&nb
  • php中隐形字符65279（utf-8的BOM头）问题 alxw4616
    php中隐形字符65279（utf-8的BOM头）问题 今天遇到一个问题. php输出JSON 前端在解析时发生问题:parsererror.   调试: 1.仔细对比字符串发现字符串拼写正确.怀疑是 非打印字符的问题. 2.逐一将字符串还原为unicode编码. 发现在字符串头的位置出现了一个 65279的非打印字符.        
  • 调用对象是否需要传递对象(初学者一定要注意这个问题) 百合不是茶 对象的传递与调用技巧
        类和对象的简单的复习,在做项目的过程中有时候不知道怎样来调用类创建的对象,简单的几个类可以看清楚,一般在项目中创建十几个类往往就不知道怎么来看   为了以后能够看清楚,现在来回顾一下类和对象的创建,对象的调用和传递(前面写过一篇)   类和对象的基础概念:   JAVA中万事万物都是类 类有字段(属性),方法,嵌套类和嵌套接
  • JDK1.5 AtomicLong实例 bijian1013 javathreadjava多线程AtomicLong
    JDK1.5 AtomicLong实例 类 AtomicLong 可以用原子方式更新的 long 值。有关原子变量属性的描述，请参阅 java.util.concurrent.atomic 包规范。AtomicLong 可用在应用程序中（如以原子方式增加的序列号），并且不能用于替换 Long。但是，此类确实扩展了 Number，允许那些处理基于数字类的工具和实用工具进行统一访问。  
  • 自定义的RPC的Java实现 bijian1013 javarpc
            网上看到纯java实现的RPC，很不错。         RPC的全名Remote Process Call，即远程过程调用。使用RPC，可以像使用本地的程序一样使用远程服务器上的程序。下面是一个简单的RPC 调用实例，从中可以看到RPC如何
  • 【RPC框架Hessian一】Hessian RPC Hello World bit1129 Hello world
    什么是Hessian The Hessian binary web service protocol makes web services usable without requiring a large framework, and without learning yet another alphabet soup of protocols. Because it is a binary p
  • 【Spark九十五】Spark Shell操作Spark SQL bit1129 shell
    在Spark Shell上，通过创建HiveContext可以直接进行Hive操作   1. 操作Hive中已存在的表   [hadoop@hadoop bin]$ ./spark-shell Spark assembly has been built with Hive, including Datanucleus jars on classpath Welcom
  • F5　往header加入客户端的ip ronin47
    when HTTP_RESPONSE {if {[HTTP::is_redirect]}{         HTTP::header replace Location [string map {:port/ /} [HTTP::header value Location]]HTTP::header replace Lo
  • java-61-在数组中，数字减去它右边(注意是右边)的数字得到一个数对之差. 求所有数对之差的最大值。例如在数组{2, 4, 1, 16, 7, 5, bylijinnan java
    思路来自： http://zhedahht.blog.163.com/blog/static/2541117420116135376632/ 写了个java版的 public class GreatestLeftRightDiff { /** * Q61.在数组中，数字减去它右边(注意是右边)的数字得到一个数对之差。 * 求所有数对之差的最大值。例如在数组
  • mongoDB 索引 开窍的石头 mongoDB索引
    在这一节中我们讲讲在mongo中如何创建索引       得到当前查询的索引信息      db.user.find(_id:12).explain();        cursor: basicCoursor 指的是没有索引  &
  • [硬件和系统]迎峰度夏 comsci 系统
      从这几天的气温来看，今年夏天的高温天气可能会维持在一个比较长的时间内    所以，从现在开始准备渡过炎热的夏天。。。。    每间房屋要有一个落地电风扇，一个空调(空调的功率和房间的面积有密切的关系)    坐的，躺的地方要有凉垫，床上要有凉席       电脑的机箱
  • 基于ThinkPHP开发的公司官网 cuiyadll 行业系统
    后端基于ThinkPHP，前端基于jQuery和BootstrapCo.MZ 企业系统 轻量级企业网站管理系统 运行环境:PHP5.3+, MySQL5.0 系统预览 系统下载：http://www.tecmz.com 预览地址：http://co.tecmz.com 各种设备自适应 响应式的网站设计能够对用户产生友好度，并且对于
  • Transaction and redelivery in JMS (JMS的事务和失败消息重发机制) darrenzhu jms事务承认MQacknowledge
    JMS Message Delivery Reliability and Acknowledgement Patterns http://wso2.com/library/articles/2013/01/jms-message-delivery-reliability-acknowledgement-patterns/ Transaction and redelivery in
  • Centos添加硬盘完全教程 dcj3sjt126com linuxcentoshardware
    Linux的硬盘识别: sda        表示第1块SCSI硬盘 hda       表示第1块IDE硬盘 scd0      表示第1个USB光驱 一般使用“fdisk -l”命
  • yii2 restful web服务路由 dcj3sjt126com PHPyii2
    路由 随着资源和控制器类准备，您可以使用URL如 http://localhost/index.php?r=user/create访问资源，类似于你可以用正常的Web应用程序做法。 在实践中，你通常要用美观的URL并采取有优势的HTTP动词。 例如，请求POST /users意味着访问user/create动作。 这可以很容易地通过配置urlManager应用程序组件来完成 如下所示
  • MongoDB查询(4)——游标和分页[八] eksliang mongodbMongoDB游标MongoDB深分页
    转载请出自出处：http://eksliang.iteye.com/blog/2177567 一、游标         数据库使用游标返回find的执行结果。客户端对游标的实现通常能够对最终结果进行有效控制，从shell中定义一个游标非常简单，就是将查询结果分配给一个变量（用var声明的变量就是局部变量），便创建了一个游标，如下所示： > var
  • Activity的四种启动模式和onNewIntent() gundumw100 android
    Android中Activity启动模式详解 　　在Android中每个界面都是一个Activity，切换界面操作其实是多个不同Activity之间的实例化操作。在Android中Activity的启动模式决定了Activity的启动运行方式。 　　Android总Activity的启动模式分为四种： Activity启动模式设置： <acti
  • 攻城狮送女友的CSS3生日蛋糕 ini htmlWebhtml5csscss3
    在线预览：http://keleyi.com/keleyi/phtml/html5/29.htm   代码如下：   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>攻城狮送女友的CSS3生日蛋糕-柯乐义<
  • 读源码学Servlet（1）GenericServlet 源码分析 jzinfo tomcatWebservlet网络应用网络协议
    Servlet API的核心就是javax.servlet.Servlet接口，所有的Servlet 类（抽象的或者自己写的）都必须实现这个接口。在Servlet接口中定义了5个方法，其中有3个方法是由Servlet 容器在Servlet的生命周期的不同阶段来调用的特定方法。     先看javax.servlet.servlet接口源码：  package
  • JAVA进阶：VO(DTO)与PO(DAO)之间的转换 snoopy7713 javaVOHibernatepo
      PO即 Persistence Object　　VO即 Value Object 　VO和PO的主要区别在于：　　VO是独立的Java Object。　　PO是由Hibernate纳入其实体容器（Entity Map）的对象，它代表了与数据库中某条记录对应的Hibernate实体，PO的变化在事务提交时将反应到实际数据库中。 　实际上，这个VO被用作Data Transfer
  • mongodb group by date 聚合查询日期 统计每天数据（信息量） qiaolevip 每天进步一点点学习永无止境mongodb纵观千象
    /* 1 */ { "_id" : ObjectId("557ac1e2153c43c320393d9d"), "msgType" : "text", "sendTime" : ISODate("2015-06-12T11:26:26.000Z")
  • java之18天 常用的类(一) Luob. MathDateSystemRuntimeRundom
    System类 import java.util.Properties; /** * System: * out:标准输出,默认是控制台 * in:标准输入,默认是键盘 * * 描述系统的一些信息 * 获取系统的属性信息:Properties getProperties(); * * * */ public class Sy
  • maven wuai maven
    1、安装maven：解压缩、添加M2_HOME、添加环境变量path 2、创建maven_home文件夹，创建项目mvn_ch01,在其下面建立src、pom.xml，在src下面简历main、test、main下面建立java文件夹 3、编写类，在java文件夹下面依照类的包逐层创建文件夹，将此类放入最后一级文件夹 4、进入mvn_ch01 4.1、mvn compile ,执行后会在
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他