怎样使用Three.js实现多张的图像雾化的效果。 10C

使用Three.js实现的图像雾化切换的效果。图片说明。我想多张图片切换。现在这个只能两个图片切换。
图片说明

下面是JS.原网站 https://codepen.io/zadvorsky/pen/PNXbGo

1个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
如何在three.js中实现多个外部加载OBJ模型的逐一显示

求助!如何在three.js中实现多个外部加载OBJ模型的逐一显示,即在列表中选中名称显示对应的模型,其余的不显示。本人自学的,实在无法解决,特来求助!我想要的效果如图所示,即three.js官网中的一个例子。![图片说明](https://img-ask.csdn.net/upload/201703/13/1489405743_859037.jpg)http://carvisualizer.plus360degrees.com/threejs/

小白求问怎么实现动态人物走动,用three.js,求教

如题,怎么实现多个人物走动,分别是不同方向的,用three.js实现。。。。

THREE.js 为new THREE.Geometry()添加带有map纹理的材质时报错

```javascript var geo=new THREE.Geometry(); for(var i=0;i<_vertex.length;i++){ var _n=_vertex[i]; //_vertex顶点数组:[[x1,y1,z1],[x2,y2,z2]...] geo.vertices.push(new THREE.Vector3(_n[0],_n[1],_n[2])); } for(var i=0;i<_faces.length;i++){ var _n=_faces[i]; //_faces面数组[[1,2,3],[4,5,6]] geo.faces.push(new THREE.Face3(_n[0],_n[1],_n[2])); } geo.computeFaceNormals(); geo.computeVertexNormals(); geo.computeBoundingSphere(); var mesh=new THREE.Mesh(geo,phongMtr); ``` 当phongMtr不含有纹理贴图时,则没有问题: ```javascript phongMtr = new THREE.MeshPhongMaterial({"color":0xffffff,"specular":0xffffff,"shininess":10}); ``` 一旦引入纹理贴图,即下段代码,就会报错。 ```javascript var _map = THREE.ImageUtils.loadTexture("../../static/3d/mtr01.jpg"); phongMtr = new THREE.MeshPhongMaterial({"color":0xffffff,"specular":0xffffff,"shininess":10,"map":_map}); ``` 错误信息: Error: WebGL: texImage2D: Conversion requires pixel reformatting. three.min.js:561:283 Error: WebGL: drawElements: bound vertex attribute buffers do not have sufficient size for given indices from the bound element array three.min.js:552:87 Error: WebGL: No further warnings will be reported for this WebGL context. (already reported 32 warnings)

如何用three.js+tween.js实现一个鼠标点击开关门的动画

有没有大佬给个源码啊 unction createLayout(){ // 墙面1 立方体比较长的面 左一 createCubeWall(10, 200, 900,0,matArrayB,-651,100,0); // 墙面2 立方体比较长的面 右一 createCubeWall(10, 200, 900,1,matArrayB,651,100,0); // 墙面3 门对面的墙 立方体比较短的面 createCubeWall(10, 200, 1310,1.5,matArrayB,0,100,-451); // 墙面4 带门的面 var wall=returnWallObject(1310, 200,10,0,matArrayB,0,100,455); // 门框 var door_cube=returnWallObject(100, 180,10,0,matArrayB,0,90,455); createResultBsp(wall,door_cube,1); //门 var loader=new THREE.TextureLoader(); loader.load("images/door_right.png",function(texture){ var doorgeometry = new THREE.BoxGeometry(100, 180, 2); var doormaterial = new THREE.MeshBasicMaterial({map:texture,color:0xffffff}); doormaterial.opacity=1.0; doormaterial.transparent=true; door = new THREE.Mesh( doorgeometry,doormaterial); door.position.set(0,90,451); scene.add(door); }); }

spring mvc 用three.js时,js报THREE没有定义

项目时spring mvc jsp,现在想加入3D展示,用three.js+HTML5,但引用js时 放到html页面js不加载,只能放到home.jsp里面,但加载时,报THREE未定义,想请教下,该怎么设置,或者怎么引用? 报错下图: ![图片说明](https://img-ask.csdn.net/upload/201807/10/1531231901_31214.png) 引用的js下图: ![图片说明](https://img-ask.csdn.net/upload/201807/10/1531231918_882714.png) 谢谢给与援助!

利用three.js导入3d模型失败

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>lesson1-by-shawn.xie</title> <!--引入Three.js--> <script src="Three.js"></script> <script src="OBJLoader.js"></script> <script type="text/javascript"> //开启Three.js渲染器 var renderer;//声明全局变量(对象) function initThree() { var element = document.getElementById("canvas3d"); width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽 height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象(属性:抗锯齿效果为设置有效) renderer.setSize(width, height );//指定渲染器的高宽(和画布框大小一致) document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。 renderer.setClearColor(0x000000, 1.0);//设置canvas背景色(clearColor) } //设置相机 var camera; function initCamera() { camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 500 );//设置透视投影的相机,默认情况下相机的上方向为Y轴,右方向为X轴,沿着Z轴朝里(视野角:fov 纵横比:aspect 相机离视体积最近的距离:near 相机离视体积最远的距离:far) camera.position.x = 50;//设置相机的位置坐标 camera.position.y = 10;//设置相机的位置坐标 camera.position.z = 25; camera.up.x = 0;//设置相机的上为「x」轴方向 camera.up.y = 0;//设置相机的上为「y」轴方向 camera.up.z = 1;//设置相机的上为「z」轴方向 camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标 } //设置场景 var scene; function initScene() { scene = new THREE.Scene(); } //设置光源 var light; function initLight() { light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源 light.position.set( 200, 200, 200 );//设置光源向量 scene.add(light);// 追加光源到场景 } //导入模型 var loader; function initObject(){ loader=new THREE.OBJLoader(); loader.load('male02.obj',function(object){ scene.add(object);}); } //执行 function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene, camera); } //threeStart(); </script> <style type="text/css"> div#canvas3d{ border: none; cursor: move; width: 1400px; height: 600px; background-color: #EEEEEE; } </style> </head> <body onload='threeStart();'> <!--盛放canvas的容器--> <div id="canvas3d"></div> </body> </html> 利用three.js导入obj模型,发现无法显示,请各位大神帮忙看下问题出在哪?利用chorme和firefox分别得到如下提示![图片说明](https://img-ask.csdn.net/upload/201709/20/1505914725_165217.png)![图片说明](https://img-ask.csdn.net/upload/201709/20/1505914742_786938.png)

three.js加载纹理的时候出错

最近用three.js写程序,学习纹理这一章,用chorm浏览器打开demo出现这个问题![图片说明](https://img-ask.csdn.net/upload/201807/12/1531359682_204014.jpg) 百度了一下, 在chorom浏览器的快捷方式的目标属性里,加入了--allow-file-access-from-files结果还是相同的错误,但是用火狐浏览器就可以打开并且正确运行,有没有大佬教教我这个这么处理

在学习three.js的时候,老是有一个警告THREE.Material: 'map' parameter is undefined.这个问题如何解决?

$(function(){ function init() { //创建一个场景 const scene = new THREE.Scene(); //创建透视相机 const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100); //创建渲染器 const renderer = new THREE.WebGLRenderer(); //renderer.setPixelRatio(window.devicePixelRatio)会自动帮你根据设备dpr设置canvas的实际物理像素以及视口的大小,你也可以输入更大的dpr以获得“HD-DPI”品质的渲染 renderer.setPixelRatio(window.devicePixelRatio); //设置渲染区域尺寸 renderer.setSize(window.innerWidth, window.innerHeight); //body元素中插入canvas对象 document.body.appendChild(renderer.domElement); camera.position.set(10, 0, 0); /** * 轨道控制器 * * **/ // 轨道控制器 const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.addEventListener("change", render); controls.minDistance = 1; controls.maxDistance = 200; controls.enablePan = false; // 新增一个红色球 // const geometry = new THREE.SphereGeometry(1, 10, 10); // const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // const mesh = new THREE.Mesh(geometry, material); const mesh = addImg("https://cinoliu.github.io/ThreeJS-demo/images/px.jpg", scene, 1); scene.add(mesh); // 坐标轴辅助线 scene.add(new THREE.AxesHelper(1000)); controls.update(); // 控制器需要 controls.target.copy(mesh.position); function render() { renderer.render(scene, camera); } function r() { render(); requestAnimationFrame(r) } r(); } init(); function addImg(url, scene, n = 1) { const texture =THREE.TextureLoader(url); const material = new THREE.MeshBasicMaterial({ map:texture }); const geometry = new THREE.SphereGeometry(1, 10, 10); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); return mesh; } });

webgl中THREE.JS引用报错

我学习three.js的时候在SkinnedMesh.js文件中遇到这样的写法,请问这样是需要借助什么第三方工具来实现吗? 直接引用会报错。 Skeleton.js:1 Uncaught SyntaxError: Unexpected token import import { Mesh } from './Mesh'; import { Vector4 } from './Vector4'; import { Skeleton } from './Skeleton'; import { Bone } from './Bone'; import { Matrix4 } from './Matrix4';

在Three.js中,如何绘指定半径的三维管道中心线

想用Three.JS中的 TubeGeometry 根据参数来绘制三维的管路 。如下图![图片说明](https://img-ask.csdn.net/upload/201907/30/1564473353_362559.png)![图片说明](https://img-ask.csdn.net/upload/201907/30/1564473367_73319.png) 需求是如何根据管路的各端点,直线段交点坐标 和直线段连接圆弧半径,画出 :管路中心线 (管路是由直线段和特定半径的圆弧组成的三维管道) ;

three.js 导入obj模型如何让模型更圆润?

使用three.js加载了一个obj模型,下图是3d软件导出的选项,只能用网格方式进行导出,用NURBS方式导出three.js没法识别。 ![图片说明](https://img-ask.csdn.net/upload/201903/01/1551421210_484285.jpg) 问题是three.js加载了这个网格方式导出的obj模型后显示出来的曲面块面化非常严重。如下图所示 ![图片说明](https://img-ask.csdn.net/upload/201903/01/1551421432_945963.jpg)![图片说明](https://img-ask.csdn.net/upload/201903/01/1551421523_509550.jpg) 我查了一天资料已经有方向了,应该是物体的法线问题。顶点法线,面法线,向量法线到底是哪个决定的我不太清楚。 threejs的材质中有一个flatShading属性本来应该是可以调整曲面光滑度的,但是现在是完全不起作用。 还听朋友说需要自己计算同坐标点法线平均值。 下图是顶点法线图 ![图片说明](https://img-ask.csdn.net/upload/201903/07/1551922286_219143.png)

用three.js editor 中的import导入模型为黑色,求大神指点一下谢谢

我使用three.js editor file中的import功能导入fbx模型为黑色,不知道为什么....

three.js 中如何改变transformControl.js的 三维坐标系的位置

three.js 中如何改变transformControl.js的 三维坐标系的位置 原本是在物体中心点, 如何让坐标系移动到立方体的一个角上。

three.js和photo-sphere-viewer.js实现全景图,,图片不显示的问题

使用three.js和photo-sphere-viewer.js实现全景图,在移动端全景图页面中的导航栏可以显示,但是图片显示不出来,屏幕中是黑色的背景,底部是导航栏,这和图片大小有关系么,,

three.js加载模型异常

加载的fbx模型颜色与导出模型的颜色不一致,模型中个别构件不显示。请问three.js对模型有什么要求?为什么会导致这些问题

各位大神们,谁知道怎样通过three.js导入外部3d模型,然后可以拖动模型,并且模型的一部分不能被单独拖动,这个问题困扰我很多天,现在还是没办法解决,求助各位大神了,万分感谢!

各位大神们,我现在可以导入3d模型,并且这个模型可以拖动,但是一部分模型被单独拖动,其他模型不动,代码如下: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽控件</title> <style> body { margin: 0; overflow: hidden; } #label { position: absolute; padding: 10px; background: rgba(255, 255, 255, 0.6); line-height: 1; border-radius: 5px; } </style> <script src="js/three.js"></script> <script src="js/jquery-1.9.1.js"></script> <script src="js/Detector.js"></script> <script src="js/TrackballControls.js"></script> <script src="js/dat.gui.min.js"></script> <script src="js/stats.min.js"></script> <script src="js/OBJLoader.js"></script> <script src="js/FBXLoader.js"></script> <script src="js/inflate.min.js"></script> <!--拖拽控件--> <script src="js/DragControls.js"></script> <!--可视化平移控件--> <script src="js/TransformControls.js"></script> </head> <body> <div id="WebGL-output"></div> <div id="Stats-output"></div> <div id="label"></div> <script> var objects=[]; var stats = initStats(); var scene, camera, renderer, controls, light, selectObject; // 场景 function initScene() { scene = new THREE.Scene(); } // 相机 function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000); camera.position.set(0, 400, 600); camera.lookAt(new THREE.Vector3(0, 0, 0)); } // 渲染器 function initRenderer() { if (Detector.webgl) { renderer = new THREE.WebGLRenderer({antialias: true}); } else { renderer = new THREE.CanvasRenderer(); } renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x050505); document.body.appendChild(renderer.domElement); } // 初始化模型 function initContent() { var helper = new THREE.GridHelper(1800, 50, 0x4A4A4A); helper.setColors(0x9370DB); scene.add(helper); var loader = new THREE.OBJLoader(); loader.load( "moder/obj/windmill.obj", function ( group ) { group.position.x=400; group.scale.set(20, 20, 20);//模型放大20倍 //group.scale.color(0x3CB37 group.name="groups" scene.add( group ); objects.push(group); } ); var loader = new THREE.OBJLoader(); loader.load( "moder/obj/low.obj", function ( group ) { group.position.x=-400; group.scale.set(20, 20, 20);//模型放大20倍 //group.scale.color(0x3CB37 group.name="groupss"; scene.add( group ); objects.push(group); } ); var loader = new THREE.FBXLoader(); //Samba Dancing idle_2 loader.load( 'moder/fbx/pipeline.fbx', function ( object ) { //console.log(object); object.scale.set(1,1,1); scene.add( object ); objects.push(object); mixers=object.mixer = new THREE.AnimationMixer( object ); var action = object.mixer.clipAction( object.animations[0]); action.play(); object.traverse( function ( child ) { if ( child.isMesh ) { child.castShadow = true; child.receiveShadow = true; } } ); console.log(object); } ); /*var cubeGeometry = new THREE.BoxGeometry(100, 100, 100); var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x9370DB}); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.position.x = -600; cube.position.y = 50; cube.name = "cubes"; scene.add(cube); var sphereGeometry = new THREE.SphereGeometry(50, 50, 50, 50); var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x3CB371}); var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.position.x = 200; sphere.position.y = 50; sphere.name = "sphere"; // sphere.position.z = 200; scene.add(sphere); var cylinderGeometry = new THREE.CylinderGeometry(50, 50, 100, 100); var cylinderMaterial = new THREE.MeshLambertMaterial({color: 0xCD7054}); var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial); cylinder.position.x = -200; cylinder.position.y = 50; cylinder.name = "cylinder"; scene.add(cylinder);*/ } console.log(objects); // 鼠标双击触发的方法 function onMouseDblclick(event) { // 获取 raycaster 和所有模型相交的数组,其中的元素按照距离排序,越近的越靠前 var intersects = getIntersects(event); // 获取选中最近的 Mesh 对象 if (intersects.length != 0 && intersects[0].object ) { selectObject = intersects[0].object.parent; changeMaterial(selectObject); console.log(changeMaterial); } else { alert("未选中 Mesh!"); } } // 获取与射线相交的对象数组 function getIntersects(event) { event.preventDefault(); console.log("event.clientX:" + event.clientX) console.log("event.clientY:" + event.clientY) // 声明 raycaster 和 mouse 变量 var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); // 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1 mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; //通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置 raycaster.setFromCamera(mouse, camera); // 获取与射线相交的对象数组,其中的元素按照距离排序,越近的越靠前 var intersects = raycaster.intersectObjects(scene.children); var intersects=intersects.parent; console.log(intersects); //返回选中的对象 return intersects; } // 窗口变动触发的方法 function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } // 键盘按下触发的方法 function onKeyDown(event) { switch (event.keyCode) { case 13: initCamera(); initControls(); break; } } // 改变对象材质属性 function changeMaterial(object) { var material = new THREE.MeshLambertMaterial({ color: 0xffffff * Math.random(), transparent: object.material.transparent ? false : true, opacity: 0.8, }); object.material = material; } // 初始化轨迹球控件 function initControls() { controls = new THREE.TrackballControls(camera, renderer.domElement); // controls.noRotate = true; controls.noPan = true; // 视角最小距离 controls.minDistance = 1000; // 视角最远距离 controls.maxDistance = 5000; } // 添加拖拽控件 function initDragControls() { // 添加平移控件 var transformControls = new THREE.TransformControls(camera, renderer.domElement); scene.add(transformControls); // 过滤不是 Mesh 的物体,例如辅助网格 //var objects = []; /*for (let i = 0; i < scene.children.length; i++) { if (scene.children[i].isMesh) { objects.push(scene.children[i]); } //objects.push(object[i].parent); }*/ // 初始化拖拽控件 var dragControls = new THREE.DragControls(objects, camera, renderer.domElement); // 鼠标略过事件 dragControls.addEventListener('hoveron', function (event) { // 让变换控件对象和选中的对象绑定 transformControls.attach(event.object); }); // 开始拖拽 dragControls.addEventListener('dragstart', function (event) { controls.enabled = false; }); // 拖拽结束 dragControls.addEventListener('dragend', function (event) { controls.enabled = true; }); console.log(objects.length); } // 初始化灯光 function initLight() { light = new THREE.SpotLight(0xffffff); light.position.set(-300, 600, -400); light.castShadow = true; scene.add(light); scene.add(new THREE.AmbientLight(0x5C5C5C)); } // 初始化 dat.GUI function initGui() { // 保存需要修改相关数据的对象 gui = new function () { } // 属性添加到控件 var guiControls = new dat.GUI(); } // 初始化性能插件 function initStats() { var stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); return stats; } // 更新div的位置 function renderDiv(object) { // 获取窗口的一半高度和宽度 let halfWidth = window.innerWidth / 2; let halfHeight = window.innerHeight / 2; // 逆转相机求出二维坐标 let vector = object.position.clone().project(camera); // 修改 div 的位置 $("#label").css({ left: vector.x * halfWidth + halfWidth, top: -vector.y * halfHeight + halfHeight - object.position.y }); // 显示模型信息 //$("#label").text("name:" + object.name); } // 更新控件 function update() { stats.update(); controls.update(); controls.handleResize(); //transformControls.update(); } // 初始化 function init() { initScene(); initCamera(); initRenderer(); initContent(); initLight(); initControls(); initGui(); initDragControls(); // addEventListener('dblclick', onMouseDblclick, false); addEventListener('resize', onWindowResize, false); addEventListener('keydown', onKeyDown, false); } function animate() { if (selectObject != undefined && selectObject != null) { renderDiv(selectObject); } requestAnimationFrame(animate); renderer.render(scene, camera); update(); } init(); animate(); </script> </body> </html> ``` 一部分模型被单独拖动的效果如下: ![图片说明](https://img-ask.csdn.net/upload/201911/04/1572863955_100421.png) 然后我再修改当鼠标略过事件: ![图片说明](https://img-ask.csdn.net/upload/201911/04/1572864098_336978.png) 整个模型可以一起被拖动,但是模型混乱:效果图如下: ![图片说明](https://img-ask.csdn.net/upload/201911/05/1572916540_633061.png) 希望路过的好心人帮帮忙,万分感谢!!!!!!

three.js r71版本和r75版本obj模型加载问题

three.js以前一直用的是r71版本的后来发现更新到了75果断down下来放到了项目里。 但是发现不仅obj模型加载的方式并且在场景里的渲染效果也发生了变化。同样的render 71:![图片说明](https://img-ask.csdn.net/upload/201604/13/1460516935_269526.png) 75:![图片说明](https://img-ask.csdn.net/upload/201604/13/1460516955_580141.png)‘ 渲染效果发生了明显的变化。 查看了一下源码,未果。 本着求真的精神,求赐教。

微信小程序使用threee.js

看准,不是微信小游戏,,是微信小程序使用three.js,谢谢

three.js中如何旋转物体position坐标系

在three.js中导入了外部创建的几何体,我想使物体本身的坐标系围绕Y轴旋转45度: object.rotation.y=Math.PI/4; object.position.x=1; 但是旋转后物体的坐标并没有变化,即物体的世界坐标还是(1,0,0)。请问我改如何实现这种想法,以上程序错误在哪里?谢谢大家的解答。

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

搜狗输入法也在挑战国人的智商!

故事总是一个接着一个到来...上周写完《鲁大师已经彻底沦为一款垃圾流氓软件!》这篇文章之后,鲁大师的市场工作人员就找到了我,希望把这篇文章删除掉。经过一番沟通我先把这篇文章从公号中删除了...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

2020阿里全球数学大赛:3万名高手、4道题、2天2夜未交卷

阿里巴巴全球数学竞赛( Alibaba Global Mathematics Competition)由马云发起,由中国科学技术协会、阿里巴巴基金会、阿里巴巴达摩院共同举办。大赛不设报名门槛,全世界爱好数学的人都可参与,不论是否出身数学专业、是否投身数学研究。 2020年阿里巴巴达摩院邀请北京大学、剑桥大学、浙江大学等高校的顶尖数学教师组建了出题组。中科院院士、美国艺术与科学院院士、北京国际数学...

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

程序员为什么千万不要瞎努力?

本文作者用对比非常鲜明的两个开发团队的故事,讲解了敏捷开发之道 —— 如果你的团队缺乏统一标准的环境,那么即使勤劳努力,不仅会极其耗时而且成果甚微,使用...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

《Oracle Java SE编程自学与面试指南》最佳学习路线图2020年最新版(进大厂必备)

正确选择比瞎努力更重要!

《Oracle Java SE编程自学与面试指南》最佳学习路线图(2020最新版)

正确选择比瞎努力更重要!

都前后端分离了,咱就别做页面跳转了!统统 JSON 交互

文章目录1. 无状态登录1.1 什么是有状态1.2 什么是无状态1.3 如何实现无状态1.4 各自优缺点2. 登录交互2.1 前后端分离的数据交互2.2 登录成功2.3 登录失败3. 未认证处理方案4. 注销登录 这是本系列的第四篇,有小伙伴找不到之前文章,松哥给大家列一个索引出来: 挖一个大坑,Spring Security 开搞! 松哥手把手带你入门 Spring Security,别再问密...

字节跳动面试官竟然问了我JDBC?

轻松等回家通知

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

阿里面试官让我用Zk(Zookeeper)实现分布式锁

他可能没想到,我当场手写出来了

终于,月薪过5万了!

来看几个问题想不想月薪超过5万?想不想进入公司架构组?想不想成为项目组的负责人?想不想成为spring的高手,超越99%的对手?那么本文内容是你必须要掌握的。本文主要详解bean的生命...

自从喜欢上了B站这12个UP主,我越来越觉得自己是个废柴了!

不怕告诉你,我自从喜欢上了这12个UP主,哔哩哔哩成为了我手机上最耗电的软件,几乎每天都会看,可是吧,看的越多,我就越觉得自己是个废柴,唉,老天不公啊,不信你看看…… 间接性踌躇满志,持续性混吃等死,都是因为你们……但是,自己的学习力在慢慢变强,这是不容忽视的,推荐给你们! 都说B站是个宝,可是有人不会挖啊,没事,今天咱挖好的送你一箩筐,首先啊,我在B站上最喜欢看这个家伙的视频了,为啥 ,咱撇...

代码注释如此沙雕,会玩还是你们程序员!

某站后端代码被“开源”,同时刷遍全网的,还有代码里的那些神注释。 我们这才知道,原来程序员个个都是段子手;这么多年来,我们也走过了他们的无数套路… 首先,产品经理,是永远永远吐槽不完的!网友的评论也非常扎心,说看这些代码就像在阅读程序员的日记,每一页都写满了对产品经理的恨。 然后,也要发出直击灵魂的质问:你是尊贵的付费大会员吗? 这不禁让人想起之前某音乐app的穷逼Vip,果然,穷逼在哪里都是...

立即提问
相关内容推荐