谢厂节_编程圈
谢厂节_编程圈

Three.JS提升学习1：创建场景并渲染三维对象

本系列学习内容来自《Three.js开发指南：WebGL的JavaScript 3D库》

创建场景并渲染三维对象

代码示例：


<html>
    <head>
        <title>title>
        <script src="../libs/three.js">script>
        <style>
        body{margin:0;overflow:hidden;}
        style>
    head>
    <body>
        <div id="WebGL-output">div>
        <script>
            function init(){
                // 定义场景
                var scene = new THREE.Scene();
                // 定义摄像机
                var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
                // 定义基于WebGL的渲染器
                var renderer = new THREE.WebGLRenderer();
                // 设置场景背景色
                renderer.setClearColorHex(0xEEEEEE);
                // 设置场景大小
                renderer.setSize(window.innerWidth,window.innerHeight);

                // 创建轴对象
                var axes = new THREE.AxisHelper(20);
                // 添加到场景中
                scene.add(axes);

                // 创建平面
                var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
                // 平面颜色，创建基本材质
                var planeMaterial = new THREE.MeshBasicMaterial({color:0xcccccc});
                // 合并到网格对象中
                var plane = new THREE.Mesh(planeGeometry,planeMaterial);

                // 平面绕x轴旋转90度
                plane.rotation.x = -0.5*Math.PI;
                // 网格对象位置
                plane.position.x = 15;
                plane.position.y = 0;
                plane.position.z = 0;

                scene.add(plane);

                // 添加立方体
                var cubeGeometry = new THREE.BoxGeometry(4,4,4);
                var cubeMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true});
                var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);

                cube.position.x = -4;
                cube.position.y = 3;
                cube.position.z = 0;

                scene.add(cube);

                // 添加球体
                var sphereGeometry = new THREE.SphereGeometry(4,20,20);
                var sphereMaterial = new THREE.MeshBasicMaterial({color:0x7777ff,wireframe:true});
                var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

                sphere.position.x = 20;
                sphere.position.y = 4;
                sphere.position.z = 2;

                scene.add(sphere);

                camera.position.x = -30;
                camera.position.y = 40;
                camera.position.z= 30;
                // 摄像机指向场景中心
                camera.lookAt(scene.position);

                document.getElementById("WebGL-output").appendChild(renderer.domElement);
                renderer.render(scene,camera);
            };
            window.onload=init;
        script>
    body>
html>

代码中有完整注释。

Three.JS提升学习1：创建场景并渲染三维对象_第1张图片

添加材质、光源

基本材质对光源是没有反应的，要对光源有反映，要改变物体的材质。
如：给平面MeshLambertMaterail材质：

                // 创建平面
                var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
                // 平面颜色，创建基本材质
                var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});
                // 合并到网格对象中
                var plane = new THREE.Mesh(planeGeometry,planeMaterial);

添加光源：

                // 定义光源
                var spotLight = new THREE.SpotLight(0xffffff);
                spotLight.position.set(-40,60,-10);
                scene.add(spotLight);

Three.JS提升学习1：创建场景并渲染三维对象_第2张图片
同样方法可以给立方体和球体修改材质。

Three.JS提升学习1：创建场景并渲染三维对象_第3张图片

添加阴影效果

  1. 修改渲染器，添加shadowMapEnabled=true属性
  2. 给平面加receiveShadow=true
  3. 给球体立方体加 cube.castShadow=true;
  4. 给光源添加spotLight.castShadow=true;

完整代码：


<html>
    <head>
        <title>title>
        <script src="../libs/three.js">script>
        <style>
        body{margin:0;overflow:hidden;}
        style>
    head>
    <body>
        <div id="WebGL-output">div>
        <script>
            function init(){
                // 定义场景
                var scene = new THREE.Scene();
                // 定义摄像机
                var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
                // 定义基于WebGL的渲染器
                var renderer = new THREE.WebGLRenderer();
                // 设置场景背景色
                renderer.setClearColorHex(new THREE.Color(0xeeeeee,1.0));
                // 设置场景大小
                renderer.setSize(window.innerWidth,window.innerHeight);
                renderer.shadowMapEnabled = true;

                // 创建轴对象
                var axes = new THREE.AxisHelper(20);
                // 添加到场景中
                scene.add(axes);

                // 创建平面
                var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
                // 平面颜色，创建基本材质
                var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});
                // 合并到网格对象中
                var plane = new THREE.Mesh(planeGeometry,planeMaterial);

                // 平面绕x轴旋转90度
                plane.rotation.x = -0.5*Math.PI;
                // 网格对象位置
                plane.position.x = 15;
                plane.position.y = 0;
                plane.position.z = 0;
                plane.receiveShadow=true;
                scene.add(plane);

                // 添加立方体
                var cubeGeometry = new THREE.BoxGeometry(4,4,4);
                var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000});
                var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);

                cube.position.x = -4;
                cube.position.y = 3;
                cube.position.z = 0;
                cube.castShadow=true;
                scene.add(cube);

                // 添加球体
                var sphereGeometry = new THREE.SphereGeometry(4,20,20);
                var sphereMaterial = new THREE.MeshLambertMaterial({color:0x7777ff});
                var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

                sphere.position.x = 20;
                sphere.position.y = 4;
                sphere.position.z = 2;
                sphere.castShadow=true;
                scene.add(sphere);

                // 定义光源
                var spotLight = new THREE.SpotLight(0xffffff);
                spotLight.position.set(-40,60,-10);
                spotLight.castShadow=true;
                scene.add(spotLight);

                camera.position.x = -30;
                camera.position.y = 40;
                camera.position.z= 30;
                // 摄像机指向场景中心
                camera.lookAt(scene.position);


                document.getElementById("WebGL-output").appendChild(renderer.domElement);
                renderer.render(scene,camera);
            };
            window.onload=init;
        script>
    body>
html>

Three.JS提升学习1：创建场景并渲染三维对象_第4张图片

你可能感兴趣的:(Canvas,WebGL,ThreeJS)

  • Python爬虫【三十四章】爬虫高阶：动态页面处理与Playwright增强控制深度解析 程序员_CLUB Python入门到进阶python爬虫开发语言
    目录一、技术演进背景与行业挑战二、核心技术栈深度解析2.1动态渲染双引擎架构2.2浏览器指纹伪装方案2.3BeautifulSoup集成实践三、进阶应用场景突破3.1电商价格监控系统3.1.1技术架构创新3.1.2实现效果3.2社交媒体舆情分析3.2.1无限滚动模拟3.2.2WebSocket监控3.2.3Canvas指纹防护四、性能优化与合规方案4.1资源消耗对比测试4.2反爬对抗升级方案五、总
  • 前端面试题 大大。 前端vue.jsjavascript
    HTML5的新特性和CSS3的新特性引入了一系列语义化标签使文档结构更加清晰(header,nav,aside,article,footer,section)，多媒体支持video,audio，Canvas绘图div上下居中对齐的几种方式第一种：flex布局display:flex;justify-content:center;/*水平居中/align-items:center;/垂直居中/第二种
  • 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
  • PostGIS面试题及详细答案120道之 （021-030 ） 还是大剑师兰特 大剑师postgis面试题
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录21.为什么要在PostGIS中使用空间索引？22.PostGIS支持哪些类型的
  • Java面试题及详细答案120道之（081-100） 还是大剑师兰特 前后端面试题大剑师java面试题
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录81.Java中的`ConcurrentHashMap`与`HashMap`在并
  • Openlayers 面试题及答案180道（41-60） 还是大剑师兰特 #前后端面试题大剑师Openlayers面试题Openlayers示例Openlayers教程
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录41.如何在OpenLayers中加载WFS数据？42.在OpenLayers中
  • CSS面试题及详细答案140道之（41-60） 还是大剑师兰特 前后端面试题css前端大剑师CSS面试CSS示例
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录41.如何在不使用额外标记的情况下隐藏文本但保留其可访问性？42.解释`text
  • canvas入门教学（1）基本认识与了解 WebGIS小智 Canvas专题讲解htmljavascriptcanvaswebgl
    从本文章开始，笔者将带大家从0开始，一点一点慢慢的学习canvas。掌握webgl图形渲染的一些底层的原理和逻辑，方便大家后续更容易理解一些gis框架和原理。canvas本质上是一个html元素，和其他html元素一样，本质上也属于document。canvas翻译过来中文叫做画布，顾名思义canvas的设计者最初是希望人们能够在网页上也有绘画的能力。canvas的用途很广，例如游戏，签名类，地图
  • 【高中数学之函数】四种幂函数图线（二次、三次、开方、开立方） 土门子拉马努金 高中数学之函数高中数学函数
    【图像】【代码】UNASSIGNED.centerlize{margin:0auto;border:0pxsolidred;width:1200px;height:600px;}如果看到这段文字说您的浏览器尚不支持HTML5Canvas，请更换浏览器再试.retval.max){retval.max=y;retval.max_x=cds[i].x;}if(yarr.length){index=in
  • Java面试题及详细答案120道之（041-060） 还是大剑师兰特 前后端面试题大剑师java面试题
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录41.什么是工厂模式？简单工厂、工厂方法、抽象工厂的区别？42.Java中的泛型
  • 微信小程序 环形进度条_微信小程序：实时圆形进度条实现 武奘 微信小程序环形进度条
    第九程序给大家带来微信小程序：实时圆形进度条实现，希望大家在开发小程序过程中能够帮助大家解决。废话不多说，先上一张效果图！实现思路建立两个canvas标签，先绘制底层的浅灰色圆圈背景，再绘制上层的红色进度条。WXML代码开始动态绘制WXSS代码特别注意：底层的canvas最好使用z-index:-99；放置于底层page{width:100%;height:100%;background-colo
  • 像素风格超级玛丽HTML游戏
    像素风格超级玛丽HTML游戏创建一个像素风格的HTML5小游戏，模仿超级玛丽的经典玩法。游戏包含移动、跳跃、收集金币、躲避敌人和到达终点等核心机制。设计思路使用纯HTML5Canvas实现游戏渲染像素风格美术设计(16x16像素元素)实现物理引擎(重力、碰撞检测)键盘控制移动和跳跃添加经典超级玛丽元素(砖块、水管、蘑菇敌人)下面是完整的实现代码：像素超级玛丽*{margin:0;padding:0
  • 像素风格坦克大战游戏 代码改变世界10086 游戏像素游戏游戏csscss3
    像素风格坦克大战游戏下面我将实现一个基于HTML5Canvas的像素风格坦克大战游戏，玩法类似经典的FC坦克大战。设计思路使用像素风格渲染游戏元素玩家控制坦克移动和射击敌方AI坦克自动移动和攻击可破坏的砖墙和不可破坏的钢墙基地保护机制计分系统和生命值显示实现代码像素坦克大战*{margin:0;padding:0;box-sizing:border-box;font-family:'PressSt
  • 像素世界：回合制角色扮演游戏
    像素世界：回合制角色扮演游戏我将设计一个原创的像素风格回合制RPG游戏，包含角色移动、战斗系统、物品收集等核心功能。设计思路使用Canvas创建像素风格的游戏世界实现角色移动和地图探索设计回合制战斗系统添加物品收集和角色成长元素采用复古像素艺术风格下面是完整的实现代码：像素世界：回合制RPG*{margin:0;padding:0;box-sizing:border-box;font-family
  • 《WebGL打造高性能3D粒子特效系统：从0到1的技术探秘》 程序猿阿伟 webgl3djava
    在游戏里，爆炸时四溅的火花、魔法释放时闪烁的光晕；在可视化项目中，数据流动时呈现的璀璨光河，这些令人惊叹的效果，背后离不开强大的技术支撑。而WebGL，作为在浏览器端实现硬件加速3D图形渲染的技术，为我们开启了构建高性能3D粒子特效系统的大门。WebGL的渲染管线是整个3D粒子特效系统的核心运转机制，它就像是一场精心编排的舞台剧，各个环节紧密配合，才能呈现出精彩的演出。当我们着手构建粒子特效时，首
  • canvas使用 CDwenhuohuo canva可画
    是HTML5引入的一个新标签，它首次出现在2004年的Safari浏览器中，由Apple提出，并在后来的HTML5标准中被正式采纳。IE8及以下❌不支持Canvas的基本用法-WebAPI|MDNvue3import{onMounted}from'vue';onMounted(()=>{constcanvas=document.getElementById('myCanvas');constctx
  • Java面试题及详细答案120道之（021-040） 还是大剑师兰特 前后端面试题大剑师java面试题
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录21.对象在java中如何序列化？22.Java中的try…catch是用于异常
  • HTML5和SVG篝火动画实战：月亮下的野营炊烟效果 申增浩
    本文还有配套的精品资源，点击获取简介：HTML5是网页标记语言的最新标准，支持更加动态和丰富的用户体验。本项目源码展示了如何使用HTML5的SVG来绘制篝火和炊烟动画，通过CSS3动画、JavaScript交互、Canvas与SVG的选择以及Web动画性能优化，实现了一个月亮下的篝火和野营炊烟效果。项目还考虑了响应式设计和数据结构的使用，为开发者提供了一个学习Web前端开发的实践案例。1.HTML
  • canvas使用滑杆交互_如何使用JavaScript和Canvas开发交互式文件上传器 cukw6666 jsjavascriptcssvuepythonViewUI
    canvas使用滑杆交互介绍(Introduction)Howniceorfuncanwemaketheinteractionsonawebsiteorwebapplication?Thetruthisthatmostcouldbebetterthanwedotoday.Forexample,whowouldnotwanttouseanapplicationlikethis:我们可以在网站或Web
  • 使用JavaScript和Canvas开发广告素材上载互动 culiu9261 javascriptjscsshtmlvueViewUI
    Howniceorfuncanwedotheinteractionsonawebsiteorwebapplication?Thetruthisthatmostcouldbebetterthanwedotoday.Forexample,whowouldnotwanttouseanapplicationlikethis?我们可以在网站或Web应用程序上进行互动有多有趣？事实是，大多数情况可能会比今天更
  • Vue3 面试题及详细答案120道（91-105 ）
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录91.Vue3中如何使用`v-once`优化性能？92.请解释Vue3中`toR
  • 常见的漏洞利用框架整理 网安导师小李 编程网络安全程序员node.jsweb安全网络安全tomcatpythonjava
    一、常见的漏洞利用框架MetasploitFramework：一个广泛使用的开源漏洞利用框架，用于测试和评估系统的安全性。ExploitDB：一个在线漏洞利用数据库，包含各种漏洞的利用代码。Canvas：由Immunity开发的商业漏洞利用框架，提供高级的漏洞利用技术和功能，用于渗透测试和漏洞研究。CoreImpact：一款商业漏洞利用框架，用于对网络和应用程序进行安全评估和渗透测试。Cobalt
  • vue3 antd modal对话框里的前端html导出成pdf并下载 清岚_lxn vue3pdfvue3html2canvasjspdf
    1.安装html2canvas和jspdf：npminstallhtml2canvasjspdf2.新建exportToPDF.tsimporthtml2canvasfrom'html2canvas';importjsPDFfrom'jspdf';constexportToPDF=async(element,filename='export.pdf')=>{constpdf=newjsPDF('p
  • mongo insert可以添加多条数据 五大RobertWu伍洋
    db.inventory.insertOne({item:"canvas",qty:100,tags:["cotton"],size:{h:28,w:35.5,uom:"cm"}})db.inventory.insertMany([{item:"journal",qty:25,tags:["blank","red"],size:{h:14,w:21,uom:"cm"}},{item:"mat",q
  • react 录音功能 Mr_wuying react.jsjavascript前端
    在这有两种录音时的动态效果1.使用react-media-recorder库实现基础录音功能2.添加录音计时器显示录音时长3.实现音频可视化效果，通过Canvas绘制频谱图4.处理麦克风权限状态检测5.提供开始/停止录音和清除录音的控制按钮先添加依赖npminstallreact-media-recorder//exportdefaultAudioRecorder;importReact,{use
  • 64. Three.js案例-创建并旋转多个立方体 MossGrower #ThreejsjavascriptThree.js旋转translateX
    64.Three.js案例-创建并旋转多个立方体实现效果在浏览器中，可以看到两个立方体分别位于场景的不同位置，并且一个立方体持续绕Y轴旋转。知识点THREE.WebGLRenderer用于创建渲染器实例，支持抗锯齿处理。构造器THREE.WebGLRenderer(parameters)参数类型描述parameters.antialiasBoolean是否启用抗锯齿，默认为false。方法setS
  • Node.js 倒计时图片服务部署与 Nginx 反向代理实战总结 易易前端 nodenode.jsnginx运维
    Node.js倒计时图片服务部署与Nginx反向代理实战总结场景描述我们希望实现一个倒计时图片接口，供邮件等外部平台引用，如：https://your-domain.com/countdown/countdown.png?end=2025-09-30T00:00:00通过访问该链接生成实时倒计时PNG图，用于促销活动倒计时展示。技术栈与组件Node.js+Expresscanvas模块绘制PNGN
  • 【前端】ikun-qrcode：极简的二维码生成组件，使用view而非canvas避免层级问题 青春狗头少年不会梦到格温学姐 前端
    文章目录背景ikun-qrcode界面效果如何发布一款自己的插件到uniapp市场。（5分钟搞定）背景之前在uniapp上100行搞定二维码生成，现在封装为vue组件分享出来：下载地址：https://ext.dcloud.net.cn/plugin?id=19351ikun-qrcode使用基础的view渲染二维码，需要给定宽高和单位和数据：uniapp默认整体宽度是750rpx。界面效果如何发
  • apache 安装linux windows 墙头上一根草 apacheinuxwindows
    linux安装Apache 有两种方式一种是手动安装通过二进制的文件进行安装，另外一种就是通过yum 安装，此中安装方式，需要物理机联网。以下分别介绍两种的安装方式     通过二进制文件安装Apache需要的软件有apr,apr-util,pcre  1，安装 apr        下载地址：htt
  • fill_parent、wrap_content和match_parent的区别 Cb123456 match_parentfill_parent
    fill_parent、wrap_content和match_parent的区别:   1）fill_parent   设置一个构件的布局为fill_parent将强制性地使构件扩展，以填充布局单元内尽可能多的空间。这跟Windows控件的dockstyle属性大体一致。设置一个顶部布局或控件为fill_parent将强制性让它布满整个屏幕。 2） wrap_conte
  • 网页自适应设计 天子之骄 htmlcss响应式设计页面自适应
    网页自适应设计        网页对浏览器窗口的自适应支持变得越来越重要了。自适应响应设计更是异常火爆。再加上移动端的崛起，更是如日中天。以前为了适应不同屏幕分布率和浏览器窗口的扩大和缩小，需要设计几套css样式，用js脚本判断窗口大小，选择加载。结构臃肿，加载负担较大。现笔者经过一定时间的学习，有所心得，故分享于此，加强交流，共同进步。同时希望对大家有所
  • [sql server] 分组取最大最小常用sql 一炮送你回车库 SQL Server
    --分组取最大最小常用sql--测试环境if OBJECT_ID('tb') is not null drop table tb;gocreate table tb( col1 int, col2 int, Fcount int)insert into tbselect 11,20,1 union allselect 11,22,1 union allselect 1
  • ImageIO写图片输出到硬盘 3213213333332132 javaimage
    package awt; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imagei
  • 自己的String动态数组 宝剑锋梅花香 java动态数组数组
    数组还是好说，学过一两门编程语言的就知道，需要注意的是数组声明时需要把大小给它定下来，比如声明一个字符串类型的数组：String str[]=new String[10];    但是问题就来了，每次都是大小确定的数组，我需要数组大小不固定随时变化怎么办呢？  动态数组就这样应运而生，龙哥给我们讲的是自己用代码写动态数组，并非用的ArrayList 看看字符
  • pinyin4j工具类 darkranger .net
    pinyin4j工具类Java工具类 2010-04-24 00:47:00 阅读69 评论0 字号：大中小 引入pinyin4j-2.5.0.jar包: pinyin4j是一个功能强悍的汉语拼音工具包，主要是从汉语获取各种格式和需求的拼音，功能强悍，下面看看如何使用pinyin4j。 本人以前用AscII编码提取工具，效果不理想，现在用pinyin4j简单实现了一个。功能还不是很完美，
  • StarUML学习笔记----基本概念 aijuans UML建模
    介绍StarUML的基本概念，这些都是有效运用StarUML?所需要的。包括对模型、视图、图、项目、单元、方法、框架、模型块及其差异以及UML轮廓。         模型、视与图（Model, View and Diagram）        &
  • Activiti最终总结 avords Activiti id 工作流
    1、流程定义ID：ProcessDefinitionId，当定义一个流程就会产生。 2、流程实例ID：ProcessInstanceId，当开始一个具体的流程时就会产生，也就是不同的流程实例ID可能有相同的流程定义ID。 3、TaskId，每一个userTask都会有一个Id这个是存在于流程实例上的。 4、TaskDefinitionKey和（ActivityImpl activityId
  • 从省市区多重级联想到的，react和jquery的差别 bee1314 jqueryUIreact
    在我们的前端项目里经常会用到级联的select，比如省市区这样。通常这种级联大多是动态的。比如先加载了省，点击省加载市，点击市加载区。然后数据通常ajax返回。如果没有数据则说明到了叶子节点。   针对这种场景，如果我们使用jquery来实现，要考虑很多的问题，数据部分，以及大量的dom操作。比如这个页面上显示了某个区，这时候我切换省，要把市重新初始化数据，然后区域的部分要从页面
  • Eclipse快捷键大全 bijian1013 javaeclipse快捷键
    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当前行和下面一行交互位置(特别实用,可以省去先剪切,再粘贴了)Alt+↑ 当前行和上面一行交互位置(同上)Alt+← 前一个编辑的页面Alt+→ 下一个编辑的页面(当然是针对上面那条来说了)Alt+En
  • js 笔记 函数 征客丶 JavaScript
    一、函数的使用 1.1、定义函数变量 var vName = funcation(params){ } 1.2、函数的调用 函数变量的调用：      vName(params); 函数定义时自发调用：(function(params){})(params); 1.3、函数中变量赋值 var a = 'a'; var ff
  • 【Scala四】分析Spark源代码总结的Scala语法二 bit1129 scala
    1. Some操作   在下面的代码中，使用了Some操作：if (self.partitioner == Some(partitioner))，那么Some(partitioner)表示什么含义？首先partitioner是方法combineByKey传入的变量， Some的文档说明：   /** Class `Some[A]` represents existin
  • java 匿名内部类 BlueSkator java匿名内部类
    组合优先于继承 Java的匿名类，就是提供了一个快捷方便的手段，令继承关系可以方便地变成组合关系 继承只有一个时候才能用，当你要求子类的实例可以替代父类实例的位置时才可以用继承。   在Java中内部类主要分为成员内部类、局部内部类、匿名内部类、静态内部类。 内部类不是很好理解，但说白了其实也就是一个类中还包含着另外一个类如同一个人是由大脑、肢体、器官等身体结果组成，而内部类相
  • 盗版win装在MAC有害发热，苹果的东西不值得买，win应该不用 ljy325 游戏applewindowsXPOS
    Mac mini 型号: MC270CH-A RMB:5,688   Apple 对windows的产品支持不好,有以下问题:   1.装完了xp,发现机身很热虽然没有运行任何程序！貌似显卡跑游戏发热一样，按照那样的发热量,那部机子损耗很大,使用寿命受到严重的影响!   2.反观安装了Mac os的展示机，发热量很小，运行了1天温度也没有那么高 &nbs
  • 读《研磨设计模式》-代码笔记-生成器模式-Builder bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * 生成器模式的意图在于将一个复杂的构建与其表示相分离，使得同样的构建过程可以创建不同的表示（GoF） * 个人理解： * 构建一个复杂的对象，对于创建者（Builder）来说，一是要有数据来源(rawData)，二是要返回构
  • JIRA与SVN插件安装 chenyu19891124 SVNjira
    JIRA安装好后提交代码并要显示在JIRA上，这得需要用SVN的插件才能看见开发人员提交的代码。 1.下载svn与jira插件安装包，解压后在安装包(atlassian-jira-subversion-plugin-0.10.1) 2.解压出来的包里下的lib文件夹下的jar拷贝到(C:\Program Files\Atlassian\JIRA 4.3.4\atlassian-jira\WEB
  • 常用数学思想方法 comsci 工作
      对于搞工程和技术的朋友来讲，在工作中常常遇到一些实际问题，而采用常规的思维方式无法很好的解决这些问题，那么这个时候我们就需要用数学语言和数学工具，而使用数学工具的前提却是用数学思想的方法来描述问题。。下面转帖几种常用的数学思想方法，仅供学习和参考   函数思想 　　把某一数学问题用函数表示出来，并且利用函数探究这个问题的一般规律。这是最基本、最常用的数学方法
  • pl/sql集合类型 daizj oracle集合typepl/sql
    --集合类型 /*   单行单列的数据，使用标量变量   单行多列数据，使用记录   单列多行数据，使用集合（。。。）   *集合：类似于数组也就是。pl/sql集合类型包括索引表（pl/sql table）、嵌套表（Nested Table）、变长数组（VARRAY）等 */ /*     --集合方法 &n
  • [Ofbiz]ofbiz初用 dinguangx 电商ofbiz
    从github下载最新的ofbiz（截止2015-7-13），从源码进行ofbiz的试用 1. 加载测试库 ofbiz内置derby，通过下面的命令初始化测试库 ./ant load-demo (与load-seed有一些区别)   2. 启动内置tomcat ./ant start 或 ./startofbiz.sh 或 java -jar ofbiz.jar &
  • 结构体中最后一个元素是长度为0的数组 dcj3sjt126com cgcc
    在Linux源代码中，有很多的结构体最后都定义了一个元素个数为0个的数组，如/usr/include/linux/if_pppox.h中有这样一个结构体： struct pppoe_tag {     __u16 tag_type;     __u16 tag_len;   &n
  • Linux cp 实现强行覆盖 dcj3sjt126com linux
    发现在Fedora 10 /ubutun 里面用cp -fr src dest，即使加了-f也是不能强行覆盖的，这时怎么回事的呢？一两个文件还好说，就输几个yes吧，但是要是n多文件怎么办，那还不输死人呢？下面提供三种解决办法。 方法一 我们输入alias命令，看看系统给cp起了一个什么别名。 [root@localhost ~]# aliasalias cp=’cp -i’a
  • Memcached(一)、HelloWorld frank1234 memcached
    一、简介 高性能的架构离不开缓存，分布式缓存中的佼佼者当属memcached，它通过客户端将不同的key hash到不同的memcached服务器中，而获取的时候也到相同的服务器中获取，由于不需要做集群同步，也就省去了集群间同步的开销和延迟，所以它相对于ehcache等缓存来说能更好的支持分布式应用，具有更强的横向伸缩能力。 二、客户端 选择一个memcached客户端，我这里用的是memc
  • Search in Rotated Sorted Array II hcx2013 search
    Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed? Would this affect the run-time complexity? How and why? Write a function to determine if a given ta
  • Spring4新特性——更好的Java泛型操作API jinnianshilongnian spring4generic type
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装JDK liuxingguome centos
    1、行卸载原来的： [root@localhost opt]# rpm -qa | grep java tzdata-java-2014g-1.el6.noarch java-1.7.0-openjdk-1.7.0.65-2.5.1.2.el6_5.x86_64 java-1.6.0-openjdk-1.6.0.0-11.1.13.4.el6.x86_64 [root@localhost
  • 二分搜索专题2-在有序二维数组中搜索一个元素 OpenMind 二维数组算法二分搜索
    1,设二维数组p的每行每列都按照下标递增的顺序递增。 用数学语言描述如下：p满足 (1),对任意的x1，x2，y，如果x1<x2,则p(x1,y)<p(x2,y); (2),对任意的x，y1,y2, 如果y1<y2,则p(x,y1)<p(x,y2); 2,问题： 给定满足1的数组p和一个整数k，求是否存在x0,y0使得p(x0,y0)=k? 3,算法分析： (
  • java 随机数 Math与Random SaraWon javaMathRandom
    今天需要在程序中产生随机数，知道有两种方法可以使用，但是使用Math和Random的区别还不是特别清楚，看到一篇文章是关于的，觉得写的还挺不错的，原文地址是 http://www.oschina.net/question/157182_45274?sort=default&p=1#answers 产生1到10之间的随机数的两种实现方式： //Math Math.roun
  • oracle创建表空间 tugn oracle
    create temporary tablespace TXSJ_TEMP   tempfile 'E:\Oracle\oradata\TXSJ_TEMP.dbf'   size 32m   autoextend on   next 32m maxsize 2048m   extent m
  • 使用Java8实现自己的个性化搜索引擎 yangshangchuan javasuperword搜索引擎java8全文检索
    需要对249本软件著作实现句子级别全文检索，这些著作均为PDF文件，不使用现有的框架如lucene，自己实现的方法如下： 1、从PDF文件中提取文本，这里的重点是如何最大可能地还原文本。提取之后的文本，一个句子一行保存为文本文件。 2、将所有文本文件合并为一个单一的文本文件，这样，每一个句子就有一个唯一行号。 3、对每一行文本进行分词，建立倒排表，倒排表的格式为：词=包含该词的总行数N=行号
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他