three js一个页面能支持两个Renderer吗

希望能同时显示3D模型和Div css创建的元素,能同时使用WebGLRenderer和CSS3DRenderer吗,不能的话怎么做呢

2个回答

可以,参考:

ThreeJS, How to use CSS3Renderer and WebGLRenderer to render 2 objects on the same scene and have them overlap?
https://stackoverflow.com/questions/37446746/threejs-how-to-use-css3renderer-and-webglrenderer-to-render-2-objects-on-the-sa

可以同时使用,可以去我的主页里找到demo: ff91, dslming.github.io

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
three js 鼠标移动到物体对象不精准问题
如果修改renderer的位置为绝对位置,设置top不为0 renderer = new THREE.WebGLRenderer(); renderer.domElement.style.position="absolute"; renderer.domElement.style.top = “50px”; 移动鼠标引射线与物体对象相交,位置不太准确,鼠标需要向上一些才能点在物体上面,请问怎么能够精准的点在物体上?
利用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导入外部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做demo,阴影有问题
![图片说明](https://img-ask.csdn.net/upload/201711/03/1509695383_783908.jpeg) 源代码如下: $(function(){ var scene = new THREE.Scene(); var renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setClearColor(0xEEEEEE,1.0); renderer.setSize(window.innerWidth,window.innerHeight); renderer.shadowMap.enabled = true; var axes = new THREE.AxesHelper(20); scene.add(axes); //creat plane var planeGeometry = new THREE.PlaneGeometry(60,20); var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff}); var plane = new THREE.Mesh(planeGeometry,planeMaterial); 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); // creat cube var cubeGeometry = new THREE.CubeGeometry(4,4,4); var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000,wireframe:true}) 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); //creat sphere var sphereGeometry = new THREE.SphereGeometry(4,4,4); var sphereMaterial = new THREE.MeshLambertMaterial({color:0x7777ff,wireframe:true}) 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); //add light var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-40,60,-10); spotLight.castShadow = true; scene.add(spotLight); // add camera var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); $("#WebGL-output").append(renderer.domElement); renderer.render(scene,camera); })
两年了 这个问题依旧困惑我 Extjs grid的renderer方法是如何获取到参数的?
ext.grid 的Column如下 : 如题renderer方法如何获取到value等参数,困惑不解 为什么 var companyColumn = { header: 'Company Name', dataIndex: 'company', renderer: function(value, metaData, record, rowIndex, colIndex, store) { } }
addEventListener is not a function!求大神解答!跪谢
three.js报loader.addEventListener is not a function的错误 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="../js/three.js"></script> <script src="../js/Detector.js"></script> <script src="../js/VTKLoader.js"></script> <script src="../js/TrackballControls.js"></script> <title></title> </head> <body> <script> if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); var container, stats; var camera, controls, scene, renderer; var cross; init(); animate(); function init() { camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 ); camera.position.z = 0.2; controls = new THREE.TrackballControls( camera ); controls.rotateSpeed = 5.0; controls.zoomSpeed = 5; controls.panSpeed = 2; controls.noZoom = false; controls.noPan = false; controls.staticMoving = true; controls.dynamicDampingFactor = 0.3; scene = new THREE.Scene(); scene.add( camera ); // light var dirLight = new THREE.DirectionalLight( 0xffffff ); dirLight.position.set( 200, 200, 1000 ).normalize(); camera.add( dirLight ); camera.add( dirLight.target ); // A begin var material = new THREE.MeshLambertMaterial( { color:0xffffff, side: THREE.DoubleSide } ); var loader = new THREE.VTKLoader(); loader.addEventListener( 'load', function ( event ) { var geometry = event.content; var mesh = new THREE.Mesh( geometry, material ); mesh.position.setY( - 0.09 ); scene.add( mesh ); } ); loader.load( "../model/bunny.vtk" ); // A end // renderer renderer = new THREE.WebGLRenderer( { antialias: false } ); renderer.setClearColorHex( 0x000000, 1 ); renderer.setSize( window.innerWidth, window.innerHeight ); container = document.createElement( 'div' ); document.body.appendChild( container ); container.appendChild( renderer.domElement ); stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; container.appendChild( stats.domElement ); // window.addEventListener( 'resize', onWindowResize, false ); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); controls.handleResize(); } function animate() { requestAnimationFrame( animate ); controls.update(); renderer.render( scene, camera ); stats.update(); } </script> </body> </html> 报错如下: ![图片说明](https://img-ask.csdn.net/upload/201710/31/1509461319_363816.png)
unity 无法用animation播放Sprite Renderer动画,求解救
我想用animation播放一组2d图片动画,但是为什么就是不行.改变位置,开关 sprite renderer等都可以,就是不能换图片![图片说明](https://img-ask.csdn.net/upload/201603/18/1458289442_735873.png) Animation animatt = GetComponent<Animation>(); string name= animatt.clip.name; Debug.Log(name); // anima[name].speed = 0.5f; animatt.Play(name); ``` ``` 求解
为什么页面什么也没有
``` <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>webgl three.js first</title> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="//cdn.bootcss.com/three.js/r77/three.min.js"></script> <!--<script src="bower_components/jquery/dist/jquery.js"></script>--> <!--<script src="bower_components/three.js/three.js"></script>--> <script> $(function(){ var scene=new THREE.object(); var camera=new THREE.perspective( 45,window.innerHeight/window.innerWidth,0.1,1000 ); var renderer=new THREE.WebGLRenderer() var backgroundcolor=new THREE.Color(0xEEEEE) renderer.setClearColor(backgroundcolor); renderer.setSize(window.innerHeight/window.innerWidth) var planeGeometry=new THREE.planeGeometry(60,20) var planeMaterial=new THREE.MeshBasicMaterial( { color:0xcccccc; } ) var plane=new THREE.Mesh(planeGeometry,planeMaterial) plane.rotation.x=-.5*Math.PI plane.position.x=15 plane.position.y=0 plane.position.z=0 scene.add(plane) var cubeGeometry=new THREE,BoxGeometry(2,3,4) var cubeMaterial=new THREE.MeshBasicMaterial( { color:0xff0000 wireframe:true } } ) var cube=new THREE.Mesh(cubeGeometry,cubeMaterial) cube,position.x=4 cube.position.y=2 cube.posistion z=3 scene.add(cube) // var squareGeometry=new THREE.squareGeometry(5) var squareGeometry=new THREE.SpereGeometry(4,20,20) var squareMaterial=new THREE.MeshBasicMaterial( { color:0xff0000 wireframe:false } ) var square=new THREE.Mesh(squareGeometry,squareMaterial) square,position.x=25 square.position.y=40 square.position.z=30 scene.add(square) camera.position.x=-5 camera.position.y=6 camera.position.z=10 camera LookAt(scene.position) $(document.body).append(renderer.domElement) renderer.render(scene,camera) </script> <style> body{ margin: 0; overflow: hidden; } </style> </head> <body> </body> ```
我试过输入THREE.REVISION,控制台会弹出版本的信息,但是我看里面的却是没有定义版本???
![图片说明](https://img-ask.csdn.net/upload/201908/06/1565054057_465289.png) ![图片说明](https://img-ask.csdn.net/upload/201908/06/1565054066_530835.png) ``` var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0xEEEEEE); renderer.setSize(window.innerWidth,window.innerHeight); document.body.appendChild(renderer.domElement); var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 ); scene.add( ambientLight ); var pointLight = new THREE.PointLight( 0xffffff, 0.8 ); camera.add( pointLight ); scene.add( camera ); camera.position.z = 5; init(); function init(){ var onProgress = function ( xhr ) { if ( xhr.lengthComputable ) { var percentComplete = xhr.loaded / xhr.total * 100; console.log( Math.round( percentComplete, 2 ) + '% downloaded' ); } }; var onError = function () { }; new MTLLoader() .setPath( 'obj' ) .load( 'aaa.mtl', function ( materials ) { console.log(materials) materials.preload(); new OBJLoader() .setMaterials( materials ) .setPath( 'obj' ) .load( 'aaa.obj', function ( object ) { object.position.y = 0; scene.add( object ); }, onProgress, onError ); } ); } function render() { requestAnimationFrame(render); renderer.render(scene, camera); camera.lookAt( scene.position ); } render(); ```
threejs多面体贴图加纹理,貌似只改变了颜色,求大神指点!
``` // 鼠标点击 var outlineMesh; document.addEventListener("mousedown", onDocumentMouseDown, false); init(); animate(); function init() { scr(); objects(); lights(); addfloor(); others(); } // var scene = new THREE.Scene(); // create a camera, which defines where we're looking at. // var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); function lights() { var ambientLight = new THREE.AmbientLight(0xffffff, 0.3); scene.add(ambientLight); var pointLight = new THREE.PointLight(0xffffff, 0.1); // scene.add(pointLight); // var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); var pointLight = new THREE.PointLight(0xffffff, 1); // scene.add(pointLight); camera.add(pointLight); } function objects() { // loadcontainer(); addHospital() } function addHospital() { var hospital = createHospital() // hospital.position.y = 20 scene.add(hospital) } function createHospital() { var hospital = new THREE.Object3D() var frontMainCoords = [ [0, -20], [-30, 0], [0, 20], [30, 0], ] var frontMainShape = utils.makeShape(frontMainCoords) var frontMainGeometry = utils.makeExtrudeGeometry(frontMainShape, 20) var frontMainMaterial = new THREE.MeshPhongMaterial({ map: textures.window() }) // var phongmaterial = new THREE.MeshPhongMaterial({color: 0x677784, transparent: true, opacity: 0.85}); // var phongmes = new THREE.Mesh(frontMainMaterial, phongmaterial); frontMainMaterial.map.repeat.set(0.1, 0.04) var alldate = [] //楼层总列表 for(var i=0;i<6;i++){ /* var frontMain = new THREE.Mesh(frontMainGeometry, frontMainMaterial) hospital.add(frontMain) renderScene()*/ var obj = "sta"+i; alldate.push(obj) } var layerList1 = [] var layerList2 = [] for(var j=0;j<5;j++){ var onedata = new THREE.Mesh(frontMainGeometry, frontMainMaterial); // var onedata =createMesh(frontMainGeometry, "stone.jpg"); hospital.add(onedata); layerList1.push(onedata) } for(var j=5;j<alldate.length;j++){ // var onedata =createMesh(frontMainGeometry, "stone.jpg"); var onedata = new THREE.Mesh(frontMainGeometry, frontMainMaterial); hospital.add(onedata); layerList2.push(onedata) } function createMesh(geom, imageFile) { // var texture = var mat = new THREE.MeshPhongMaterial(); mat.normalMap = new THREE.TextureLoader().load("/seismis/js/3djs/assets/textures/general/" + imageFile); // mat.specular = new THREE.Color(0xffffff); mat.needsUpdate = true; mat.shininess = 10; var mesh = new THREE.Mesh(geom, mat); return mesh; } //中间立体图形 // var polyhedron1 = createMesh(cubeGeometry, "stone.jpg"); renderScene(); var step1 = 0; var step2 = 0; function renderScene() { step1 += 0.1; for(var i=0;i<layerList1.length;i++){ var frontMain = layerList1[i]; frontMain.position.x = 0 + ( (2+i) * (Math.cos(step1))); frontMain.position.y = 0+i*20 + ( 2 * Math.abs(Math.sin(step1))); frontMain.position.z = 0 + ( (2+i) * (Math.cos(step1))); } step2 += 0.1; for(var k=0;k<(layerList2.length);k++){ var frontMain = layerList2[k]; frontMain.position.x = 0 + ( (2+k+5) * (Math.cos(step2))); frontMain.position.y = 0+(k+5)*20 + ( 2 * Math.abs(Math.sin(step2))); frontMain.position.z = 0 + ( (2+k+5) * (Math.cos(step2))); } requestAnimationFrame(renderScene); renderer.render(scene, camera); } // call the render function var step = 0; initModel() function initModel() { //辅助工具 var helper = new THREE.AxisHelper(10); scene.add(helper); var cubeGeometry = new THREE.Geometry(); //创建立方体的顶点 var vertices = [ new THREE.Vector3(0, 0, 20), //v0 new THREE.Vector3(30, 0, 0), //v1 new THREE.Vector3(0, 0,-20), //v2 new THREE.Vector3(-30, 0, 0), //v3 new THREE.Vector3(-30,220,0), //v4 new THREE.Vector3(-22,220,10), //v5 new THREE.Vector3(22,220,10), //v6 new THREE.Vector3(30,220,0), //v7 new THREE.Vector3(22,220,-10), //v8 new THREE.Vector3(-22,220,-10), //v9 ]; cubeGeometry.vertices = vertices; //创建立方的面 var faces=[ new THREE.Face3(0,1,2), new THREE.Face3(0,2,3), new THREE.Face3(3,0,5), new THREE.Face3(3,5,4), new THREE.Face3(3,4,9), new THREE.Face3(3,9,2), new THREE.Face3(2,9,8), new THREE.Face3(8,1,2), new THREE.Face3(8,7,1), new THREE.Face3(6,1,7), new THREE.Face3(6,0,1), new THREE.Face3(0,6,5), new THREE.Face3(5,6,7), new THREE.Face3(5,7,8), new THREE.Face3(5,8,9), new THREE.Face3(5,9,4), ]; cubeGeometry.faces = faces; //生成法向量 cubeGeometry.computeFaceNormals(); function createMesh(geom, imageFile) { // var texture = var mat = new THREE.MeshPhongMaterial(); mat.map = new THREE.TextureLoader().load("/seismis/js/3djs/assets/textures/general/" + imageFile); // mat.specular = new THREE.Color(0xffffff); mat.needsUpdate = true; mat.shininess = 10; var mesh = new THREE.Mesh(geom, mat); return mesh; } //中间立体图形 // var polyhedron1 = createMesh(cubeGeometry, "stone.jpg"); // scene.add(polyhedron1); /* var frontMainMaterial = new THREE.MeshPhongMaterial({ map: textures.window() }) frontMainMaterial.map.repeat.set(0.01, 0.04)*/ var polyhedron1 = createMesh(cubeGeometry, "bathroom-normal.jpg"); polyhedron1.position.x = 0; polyhedron1.position.y = 120; polyhedron1.position.z = 0; scene.add(polyhedron1); /* var textureLoader = new THREE.TextureLoader(); textureLoader.load( "/seismis/js/3djs/assets/textures/general/bathroom-normal.jpg", function( texture ){ // 加载法向贴图 textureLoader.load("/seismis/js/3djs/assets/textures/general/bathroom-normal.jpg", function( normalTexture ){ var geometry = new THREE.BoxGeometry( 50, 50, 50 ); var material = new THREE.MeshBasicMaterial({ map: texture, normalMap: normalTexture // 只要将法向贴图赋给材质的normalMap属性即可 }); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); } ); });*/ //12面体 /* var frontMainMaterial = new THREE.MeshPhongMaterial({ map: textures.window() }) var polyhedron2 = new THREE.Mesh(new THREE.IcosahedronGeometry(150, 0), frontMainMaterial); // var polyhedron2 = createMesh(new THREE.IcosahedronGeometry(50, 0), "stone.jpg"); polyhedron2.position.x = 112; scene.add(polyhedron2);*/ var cubeGeometry1 = new THREE.Geometry(); //创建立方体的顶点 var vertices = [ new THREE.Vector3(-30,0,0), //v4 0 new THREE.Vector3(-22,0,10), //v5 1 new THREE.Vector3(-22,0,-10), //v9 2 new THREE.Vector3(-30,35,0) //v10 3 ]; cubeGeometry1.vertices = vertices; //创建立方的面 var faces=[ new THREE.Face3(0,1,3), new THREE.Face3(3,2,0), new THREE.Face3(2,0,1), new THREE.Face3(1,2,3) ]; cubeGeometry1.faces = faces; //生成法向量 cubeGeometry1.computeFaceNormals(); var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x6a5e74}); cube = new THREE.Mesh(cubeGeometry1, cubeMaterial); cube.position.x = 0; cube.position.y = 340; cube.position.z = 0; scene.add(cube); var cubeGeometry2 = new THREE.Geometry(); //创建立方体的顶点 var vertices = [ new THREE.Vector3(30,0,0), //v7 0 new THREE.Vector3(22,0,10), //v6 1 new THREE.Vector3(22,0,-10), //v8 2 new THREE.Vector3(30,35,0) //v11 3 ]; cubeGeometry2.vertices = vertices; //创建立方的面 var faces=[ new THREE.Face3(0,2,1), new THREE.Face3(2,1,3), new THREE.Face3(3,1,0), new THREE.Face3(3,0,2), ]; cubeGeometry2.faces = faces; //生成法向量 cubeGeometry1.computeFaceNormals(); var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x6a5e74}); cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial); cube2.position.x = 0; cube2.position.y = 340; cube2.position.z = 0; scene.add(cube2); //顶部 var cubeGeometry3 = new THREE.Geometry(); //创建立方体的顶点 var vertices = [ new THREE.Vector3(-27,0,4), // 0 new THREE.Vector3(-27,0,-4), // 1 new THREE.Vector3(-30,11,0), // 2 new THREE.Vector3(30,11,0), // 3 new THREE.Vector3(27,0,4), // 4 new THREE.Vector3(27,0,-4), // 5 ]; cubeGeometry3.vertices = vertices; //创建立方的面 var faces=[ new THREE.Face3(0,2,1), new THREE.Face3(1,2,3), new THREE.Face3(1,3,5), new THREE.Face3(3,2,0), new THREE.Face3(3,0,4), new THREE.Face3(3,4,5), ]; cubeGeometry3.faces = faces; //生成法向量 cubeGeometry1.computeFaceNormals(); var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x6a5e74}); cube2 = new THREE.Mesh(cubeGeometry3, cubeMaterial); cube2.position.x = 0; cube2.position.y = 364; cube2.position.z = 0; scene.add(cube2); } function render() { // stats.update(); polyhedron.rotation.y = step += 0.01; // render using requestAnimationFrame requestAnimationFrame(render); webGLRenderer.render(scene, camera); } return hospital } function createWindow() { var windowObj = new THREE.Object3D() var glassGeometry = new THREE.PlaneGeometry(20, 20) var glass = utils.makeMesh('phong', glassGeometry, 0x6a5e74) windowObj.add(glass) var windowBorderGeometry = new THREE.BoxBufferGeometry(22, 2, 2) var windowBorder = utils.makeMesh('phong', windowBorderGeometry, 0xffffff) var windowBorderTop = windowBorder.clone() windowBorderTop.position.y = 10 windowObj.add(windowBorderTop) var windowBorderBottom = windowBorder.clone() windowBorderBottom.position.y = -10 windowObj.add(windowBorderBottom) var windowBorderLeft = windowBorder.clone() windowBorderLeft.rotation.z = 0.5 * Math.PI windowBorderLeft.position.x = -10 windowObj.add(windowBorderLeft) var windowBorderRight = windowBorderLeft.clone() windowBorderRight.position.x = 10 windowObj.add(windowBorderRight) return windowObj } function loadcontainer() { var onProgress = function (xhr) { if (xhr.lengthComputable) { var percentComplete = xhr.loaded / xhr.total * 100; console.log(Math.round(percentComplete, 2) + '% downloaded'); } }; var onError = function (xhr) { }; var mtlLoader = new THREE.MTLLoader(); mtlLoader.load('/seismis/js/js/objs/5.mtl', function (materials) { materials.preload(); var loader = new THREE.OBJLoader(); loader.setMaterials(materials); loader.load('/seismis/js/js/objs/5.obj', function (object) { object.traverse(function (child) { if (child instanceof THREE.Mesh) { child.material.transparent = true; child.material.opacity = 1; if (child.material instanceof Array) { for (var i = 0, length = child.material.length; i < length; i++) child.material[i].transparent = true; } } }); // for (var i = 0; i < 3; i++) { var temp = object.clone(); // temp.position.set(-100 + 300 * i, 150, 0); temp.position.set(0 , 0, 0); scene.add(temp); // } }, onProgress, onError); }) } function loadmale1() { var onProgress = function (xhr) { if (xhr.lengthComputable) { var percentComplete = xhr.loaded / xhr.total * 100; console.log(Math.round(percentComplete, 2) + '% downloaded'); } }; var onError = function (xhr) { }; THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader()); var mtlLoader = new THREE.MTLLoader(); mtlLoader.setPath('/seismis/js/js/objs/male02/'); mtlLoader.load('male02.mtl', function (materials) { console.log(materials); materials.preload(); var objLoader = new THREE.OBJLoader(); objLoader.setMaterials(materials); objLoader.setPath('/seismis/js/js/objs/male02/'); objLoader.load('male02.obj', function (object) { object.position.y = 10; scene.add(object); }, onProgress, onError); }); } // 没有考虑group,所以通过obj加载的物体无法点选 function getMeshs() { var meshs = []; for (var i = 0, length = scene.children.length; i < length; i++) { if (scene.children[i] instanceof THREE.Mesh && scene.children[i].geometry instanceof THREE.BoxGeometry) { meshs.push(scene.children[i]); } } return meshs; } function onDocumentMouseDown(e) { e.preventDefault(); rotate = false; //将鼠标点击位置的屏幕坐标转成threejs中的标准坐标,具体解释见代码释义 var mouse = {}; mouse.x = (e.clientX / window.innerWidth) * 2 - 1; mouse.y = -(e.clientY / window.innerHeight) * 2 + 1; //新建一个三维单位向量 假设z方向就是0.5 //根据照相机,把这个向量转换到视点坐标系 var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera); console.log(vector); var sub = vector.sub(camera.position); console.log(sub); var param2 = sub.normalize(); var raycaster = new THREE.Raycaster(camera.position, param2); console.log("---------------------------------------------"); //射线和模型求交,选中一系列直线 var intersects = raycaster.intersectObjects(getMeshs()); if (intersects.length > 0) { //选中第一个射线相交的物体 scene.remove(outlineMesh); var SELECTED = intersects[0].object; var outlineMaterial2 = new THREE.MeshBasicMaterial({color: 0x00ff00, side: THREE.BackSide}); outlineMesh = new THREE.Mesh(SELECTED.geometry.clone(), outlineMaterial2); outlineMesh.position.set(SELECTED.position.x, SELECTED.position.y, SELECTED.position.z); outlineMesh.scale.multiplyScalar(1.05); scene.add(outlineMesh); } } ```
Ext grid中 convert和renderer有什么区别
在ext Record 定义记录结果的时候可以通过convert或者renderer写function但有什么区别呀
怎么样在ext renderer中添加验证
下面的代码是动态生成列,且从第3列开始都是checkbox,我想给checkbox加验证,每一行若有一个checkbox选中,这一行的其他checkbox不可选,想用onclick事件,但试了几次好像解析不了,一直提示写的function未定义,求解!!! [code="js"]var cmArr = [{ header:'id', sortable:true, dataIndex:'fieldId' },{ header:'字段名', sortable:true, dataIndex:'fieldName' }]; for(var t=0;t<fieldOptData.length;t++){ cmArr.push({ header:fieldOptData[t].name, width:70, dataIndex:fieldOptData[t].code, renderer:function(value, cellmeta, record, rowIndex,columnIndex, store){ return "<input TYPE='checkbox' id='"+rowIndex+columnIndex+"' NAME='"+columnIndex+"' value='"+gridStore[rowIndex][columnIndex]+"'></input>"; } }); }[/code]
如何用PDF Renderer第三方组件实现中文pdf文档的直接打印
大家好,我是第一次在这个论坛提问,现在做的一个项目遇到一个中文编码集问题,请高手能进来指点一下,在这里我将谢谢大家! 我遇到的问题是:当我将生成好的一个中文pdf文档用第三方组件PDF Renderer转换成图片后再直接送到打印机打印时,遇到如下错误: java.io.IOException: Unknown CMap: UniGB-UCS2-H at com.sun.pdfview.font.PDFCMap.getCMap(PDFCMap.java:67) at com.sun.pdfview.font.PDFFontEncoding.<init>(PDFFontEncoding.java:73) at com.sun.pdfview.font.PDFFont.getFont(PDFFont.java:133) at com.sun.pdfview.PDFParser.getFontFrom(PDFParser.java:1172) at com.sun.pdfview.PDFParser.iterate(PDFParser.java:726) at com.sun.pdfview.BaseWatchable.run(BaseWatchable.java:101) at java.lang.Thread.run(Thread.java:619) 我在网上找了好久的资料都未能解决此问题,希望高手能帮忙解决一下,在此谢谢了啊!
renderer: Ext.util.Format.dateRenderer('Y年m月d日')
我用这个( renderer: Ext.util.Format.dateRenderer('Y年m月d日'))格式化时间结果成了这样了:NaN年NaN月NaN日 咋办啊? 我传过来的是字符串啊
renderer怎样给网址增加超链接
&nbsp;&nbsp; &lt;script type="text/javascript"&gt; <br /> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function showUrl(value) <br /> &nbsp;&nbsp; { <br /> &nbsp;&nbsp; return ""+value+""; <br /> &nbsp;&nbsp; } <br /> &nbsp;&nbsp;&nbsp;&nbsp; <br /> &nbsp;&nbsp;&nbsp; Ext.onReady(function(){ <br /> <br /> <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var data = [ <br /> &nbsp;&nbsp; [1,'张三','男','20','www.baidu.com'], <br /> &nbsp;&nbsp; [2,'李四','男','21','www.gdqy.edu.cn'], <br /> &nbsp;&nbsp; [3,'王五','女','22','www.csdn.cn'], <br /> &nbsp;&nbsp; [4,'刘六','牛','18','www.youku.com'] <br /> ]; <br /> <br /> var store = new Ext.data.SimpleStore({data:data,fields:["id","name","sex","age",'homepage']}); <br /> <br /> var colM = new Ext.grid.ColumnModel( <br /> &nbsp;&nbsp;&nbsp; [ <br /> &nbsp;&nbsp;&nbsp; {header:"Id",dataIndex:"id",sortable:true}, <br /> &nbsp;&nbsp;&nbsp; {header:"姓名",dataIndex:"name",sortable:true}, <br /> {header:"性别",dataIndex:"sex"}, <br /> {header:"年龄",dataIndex:"age",sortable:true}, <br /> {header:"地址",dataIndex:"homepage",renderer:showUrl} <br /> ] <br /> ); <br /> <br /> var grid = new Ext.grid.GridPanel({ <br /> renderTo:"hello", <br /> title:"706绿ddd色网吧", <br /> width:700, <br /> height:600, <br /> cm:colM, <br /> store:store, <br /> autoExpandColumn:2 <br /> <br /> }); <br /> &nbsp;&nbsp; }); <br /> &nbsp;&nbsp; <br /> &nbsp;&nbsp; <br /> &nbsp;&nbsp;&nbsp; &lt;/script&gt; <br /> &lt;/head&gt; <br /> <br /> &lt;body&gt; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="hello"&gt;&lt;/div&gt; <br /> &lt;/body&gt; <br /> <br />超链接无效 不知为什么
JList中的Renderer获取问题,当根据索引index值设置显示的文本内容时,文本显示全都一样
我重写ListCellRenderer类,继承JPanel。在JPanel中添加一个JLabel用于显示list中的索引。但是设置setText(String.valueOf(index))之后显示的值都为0.如果用控制台直接输入index又是对的,请问有没有大神知道为什么,感觉涉及了内存的问题? 代码如下: ``` @Override public Component getListCellRendererComponent(JList<? extends Vehicle> list, Vehicle value, int index, boolean isSelected, boolean cellHasFocus) { // 绘制图标 JLabel iconLabel = new JLabel(); // 绘制车位号 JLabel numLabel = new JLabel(); // 绘制车牌号,没有显示位空车位 JLabel vehicleNumber = new JLabel(); if (value.isIsInParking()) { iconLabel.setIcon(iconNotNull); } else { iconLabel.setIcon(iconNull); } JPanel temp1 = new JPanel(new FlowLayout()); temp1.setPreferredSize(new Dimension(50, 50)); temp1.add(iconLabel); temp1.setBackground(CellColr); numLabel.setText(String.valueOf(index)); //显示出来为0 System.out.println(num); //正常显示0 1 2 3 4 ... // numLabel.setText(String.valueOf(num) + "号车位"); vehicleNumber.setText(value.getLicensePlateNumber()); numLabel.setForeground(Color.orange); vehicleNumber.setForeground(Color.orange); numLabel.setFont(font); vehicleNumber.setFont(font); JPanel temp2 = new JPanel(new FlowLayout()); Box box = Box.createVerticalBox(); box.add(numLabel); box.add(Box.createVerticalStrut(8)); box.add(vehicleNumber); temp2.setBackground(CellColr); temp2.add(box); add(temp1, BorderLayout.WEST); add(temp2, BorderLayout.CENTER); return this; } ``` 图: ![图片说明](https://img-ask.csdn.net/upload/201612/22/1482416656_727617.png) 谢谢了~
arcgis for javascript 地图色带渲染的问题
大家好,我初学arcgis for javascript,目前在做项目的过程中,有一个主要的功能一直没有很好解决,网上也找不到有效的方法,来此求助,希望懂的大神能给予指导,如能解决,非常感谢,以下是我碰到的困难: 需求:目前有一个featureLayer,它是一条河,被等分成了150块,现在需要根据客户端计算得到的流速参数来用色带渲染这条河。即每一块都要根据该块的流速数据上色,同时整体要有渐变的效果。(流速高处用红色,低处用蓝色) 我的解决方法:我找到连续的颜色涂覆方法只有SimpleRenderer,以下是程序的主要部分但是没有成功(渲染结果是根据原本的position属性的值来的,而不是动态的流速的值): graphicdrawEvent = on(featureLayer, "graphic-draw", function (evt) { //在featurelayer加载每一块svg的时候把流速赋值给地图fields中的一个属性,这里赋值给position var flow=simulationData.liusu; //该块处的流速值 evt.graphic.attributes.position=flow; //把流速值赋给featurelayer该块处的position属性 }); var renderer = new SimpleRenderer(new SimpleFillSymbol().setOutline(new SimpleLineSymbol().setWidth(0.1).setColor(new Color([128,128,128])))); renderer.setColorInfo({ field: "position", //针对position属性的值来赋上色带 minDataValue: 5, maxDataValue: 19, colors: [ new Color([255, 0, 0]), new Color([0, 255, 68]), ] }); featureLayer.setRenderer(renderer); featureLayer.show(); 我猜测的原因:是不是地图的field是地图本身的属性,所以arcgis for javascript无法有效更改其中的属性值? 求助: 1、api中SimpleRenderer貌似只能针对某个field来渲染,请问有无用arcgis for javascript动态更改fields中某个属性值的方法? 2、或者要实现这个功能的话除了用SimpleRenderer来渲染featurelayer,还有没有别的方法(比如有无别的种类的layer更适合做这个渲染)?
关于JTable渲染器Renderer的问题,求高手解答!!!!
``` public class MyButtonRender implements TableCellRenderer { private JPanel panel; private JButton add,reduce; private JTextField numbertf; public MyButtonRender() { this.initAdd(); this.initReduce(); this.initNumbertf(); this.initPanel(); // 添加按钮 this.panel.add(this.add); this.panel.add(this.numbertf); this.panel.add(this.reduce); } private void initAdd() { this.add = new JButton("+"); // 设置按钮的大小及位置。 this.add.setBounds(0, 0, 41, 20); } private void initReduce(){ this.reduce = new JButton("-"); // 设置按钮的大小及位置。 this.reduce.setBounds(82, 0, 41, 20); } private void initNumbertf(){ this.numbertf=new JTextField(); this.numbertf.setBounds(42,0,30,20); } private void initPanel() { this.panel = new JPanel(); // panel使用绝对定位,这样button就不会充满整个单元格。 this.panel.setLayout(null); } public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected, boolean hasFocus, int row, int column) { return this.panel; } } ``` 这是我渲染器的代码,就是在一个单元格内添加两个按钮和一个文本框 ``` public class AllTableModel extends AbstractTableModel{ private static final long serialVersionUID = 1L; protected Vector content=null; private String[] title_name = { "编号", "名称", "型号","数量"}; public void addRow(String ID, String name,String model,JPanel number) { Vector v = new Vector(title_name.length); v.add(0,ID); v.add(1,name); v.add(2, model); v.add(3,number); content.add(v); } //需要子类自行提供addRow方法 public AllTableModel(){ content = new Vector(); } public AllTableModel(int count){ content = new Vector(count); } public void removeRow(int row) { content.remove(row); } public void removeRows(int row, int count) { for (int i = 0; i < count; i++) { if (content.size() > row) { content.remove(row); } } } public int getColumnCount() { String[] inherit=getTitlename(); return inherit.length; } public int getRowCount() { return content.size(); } public Object getValueAt(int row, int col) { return ((Vector) content.get(row)).get(col); } public String getColumnName(int col) { String[] inherit=getTitlename(); return inherit[col]; } public void setValueAt(Object value, int row, int col) { ((Vector) content.get(row)).remove(col); ((Vector) content.get(row)).add(col, value); this.fireTableCellUpdated(row, col); } public boolean isCellEditable(int rowIndex, int columnIndex) { if (columnIndex == 0) { return false; } return true; } //需要在子类中定义自己的getTitlename方法 public String[] getTitlename(){ return title_name; } } ``` 这是我的TableModel的代码 我想问为什么我用DefaultTableModel,然后用两个数组初始化,就可以显示出来渲染器的效果,但是要是用自己写的TableModel,然后调用addRow方法添加,表格中就什么也不显示,这是为什么?
html5页面使用360浏览器打开时会先跳转到兼容模式然后切换到极速模式
1、我已经在页面头部设置了renderer 2、浏览器打开时开始是处于极速模式,然后会切换到兼容模式,最后又回到极速模式 有遇到过这种问题的吗?
终于明白阿里百度这样的大公司,为什么面试经常拿ThreadLocal考验求职者了
点击上面↑「爱开发」关注我们每晚10点,捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类,各个线程都拥有一份线程私有的数
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过
《奇巧淫技》系列-python!!每天早上八点自动发送天气预报邮件到QQ邮箱
此博客仅为我业余记录文章所用,发布到此,仅供网友阅读参考,如有侵权,请通知我,我会删掉。 补充 有不少读者留言说本文章没有用,因为天气预报直接打开手机就可以收到了,为何要多此一举发送到邮箱呢!!!那我在这里只能说:因为你没用,所以你没用!!! 这里主要介绍的是思路,不是天气预报!不是天气预报!!不是天气预报!!!天气预报只是用于举例。请各位不要再刚了!!! 下面是我会用到的两个场景: 每日下
死磕YOLO系列,YOLOv1 的大脑、躯干和手脚
YOLO 是我非常喜欢的目标检测算法,堪称工业级的目标检测,能够达到实时的要求,它帮我解决了许多实际问题。 这就是 YOLO 的目标检测效果。它定位了图像中物体的位置,当然,也能预测物体的类别。 之前我有写博文介绍过它,但是每次重新读它的论文,我都有新的收获,为此我准备写一个系列的文章来详尽分析它。这是第一篇,从它的起始 YOLOv1 讲起。 YOLOv1 的论文地址:https://www.c
知乎高赞:中国有什么拿得出手的开源软件产品?(整理自本人原创回答)
知乎高赞:中国有什么拿得出手的开源软件产品? 在知乎上,有个问题问“中国有什么拿得出手的开源软件产品(在 GitHub 等社区受欢迎度较好的)?” 事实上,还不少呢~ 本人于2019.7.6进行了较为全面的 回答 - Bravo Yeung,获得该问题下回答中得最高赞(236赞和1枚专业勋章),对这些受欢迎的 Github 开源项目分类整理如下: 分布式计算、云平台相关工具类 1.SkyWalk
20行Python代码爬取王者荣耀全英雄皮肤
引言 王者荣耀大家都玩过吧,没玩过的也应该听说过,作为时下最火的手机MOBA游戏,咳咳,好像跑题了。我们今天的重点是爬取王者荣耀所有英雄的所有皮肤,而且仅仅使用20行Python代码即可完成。 准备工作 爬取皮肤本身并不难,难点在于分析,我们首先得得到皮肤图片的url地址,话不多说,我们马上来到王者荣耀的官网: 我们点击英雄资料,然后随意地选择一位英雄,接着F12打开调试台,找到英雄原皮肤的图片
简明易理解的@SpringBootApplication注解源码解析(包含面试提问)
欢迎关注文章系列 ,关注我 《提升能力,涨薪可待》 《面试知识,工作可待》 《实战演练,拒绝996》 欢迎关注我博客,原创技术文章第一时间推出 也欢迎关注公 众 号【Ccww笔记】,同时推出 如果此文对你有帮助、喜欢的话,那就点个赞呗,点个关注呗! 《提升能力,涨薪可待篇》- @SpringBootApplication注解源码解析 一、@SpringBootApplication 的作用是什
西游记团队中如果需要裁掉一个人,会先裁掉谁?
2019年互联网寒冬,大批企业开始裁员,下图是网上流传的一张截图: 裁员不可避免,那如何才能做到不管大环境如何变化,自身不受影响呢? 我们先来看一个有意思的故事,如果西游记取经团队需要裁员一名,会裁掉谁呢,为什么? 西游记团队组成: 1.唐僧 作为团队teamleader,有很坚韧的品性和极高的原则性,不达目的不罢休,遇到任何问题,都没有退缩过,又很得上司支持和赏识(直接得到唐太宗的任命,既给
Python语言高频重点汇总
Python语言高频重点汇总 GitHub面试宝典仓库——点这里跳转 文章目录Python语言高频重点汇总**GitHub面试宝典仓库——点这里跳转**1. 函数-传参2. 元类3. @staticmethod和@classmethod两个装饰器4. 类属性和实例属性5. Python的自省6. 列表、集合、字典推导式7. Python中单下划线和双下划线8. 格式化字符串中的%和format9.
究竟你适不适合买Mac?
我清晰的记得,刚买的macbook pro回到家,开机后第一件事情,就是上了淘宝网,花了500元钱,找了一个上门维修电脑的师傅,上门给我装了一个windows系统。。。。。。 表砍我。。。 当时买mac的初衷,只是想要个固态硬盘的笔记本,用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后,最终决定,还是买个好(xiong)看(da)的。 已经有好几个朋友问我mba怎么样了,所以今天尽量客观
程序员一般通过什么途径接私活?
二哥,你好,我想知道一般程序猿都如何接私活,我也想接,能告诉我一些方法吗? 上面是一个读者“烦不烦”问我的一个问题。其实不止是“烦不烦”,还有很多读者问过我类似这样的问题。 我接的私活不算多,挣到的钱也没有多少,加起来不到 20W。说实话,这个数目说出来我是有点心虚的,毕竟太少了,大家轻喷。但我想,恰好配得上“一般程序员”这个称号啊。毕竟苍蝇再小也是肉,我也算是有经验的人了。 唾弃接私活、做外
ES6基础-ES6的扩展
进行对字符串扩展,正则扩展,数值扩展,函数扩展,对象扩展,数组扩展。 开发环境准备: 编辑器(VS Code, Atom,Sublime)或者IDE(Webstorm) 浏览器最新的Chrome 字符串的扩展: 模板字符串,部分新的方法,新的unicode表示和遍历方法: 部分新的字符串方法 padStart,padEnd,repeat,startsWith,endsWith,includes 字
Python爬虫爬取淘宝,京东商品信息
小编是一个理科生,不善长说一些废话。简单介绍下原理然后直接上代码。 使用的工具(Python+pycharm2019.3+selenium+xpath+chromedriver)其中要使用pycharm也可以私聊我selenium是一个框架可以通过pip下载 pip install selenium -i https://pypi.tuna.tsinghua.edu.cn/simple/ 
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
你知道的越多,你不知道的越多 点赞再看,养成习惯 本文 GitHub https://github.com/JavaFamily 已收录,有一线大厂面试点思维导图,也整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。 前前言 为啥今天有个前前言呢? 因为你们的丙丙啊,昨天有牌面了哟,直接被微信官方推荐,知乎推荐,也就仅仅是还行吧(心里乐开花)
Java工作4年来应聘要16K最后没要,细节如下。。。
前奏: 今天2B哥和大家分享一位前几天面试的一位应聘者,工作4年26岁,统招本科。 以下就是他的简历和面试情况。 基本情况: 专业技能: 1、&nbsp;熟悉Sping了解SpringMVC、SpringBoot、Mybatis等框架、了解SpringCloud微服务 2、&nbsp;熟悉常用项目管理工具:SVN、GIT、MAVEN、Jenkins 3、&nbsp;熟悉Nginx、tomca
Python爬虫精简步骤1 获取数据
爬虫的工作分为四步: 1.获取数据。爬虫程序会根据我们提供的网址,向服务器发起请求,然后返回数据。 2.解析数据。爬虫程序会把服务器返回的数据解析成我们能读懂的格式。 3.提取数据。爬虫程序再从中提取出我们需要的数据。 4.储存数据。爬虫程序把这些有用的数据保存起来,便于你日后的使用和分析。 这一篇的内容就是:获取数据。 首先,我们将会利用一个强大的库——requests来获取数据。 在电脑上安装
作为一个程序员,CPU的这些硬核知识你必须会!
CPU对每个程序员来说,是个既熟悉又陌生的东西? 如果你只知道CPU是中央处理器的话,那可能对你并没有什么用,那么作为程序员的我们,必须要搞懂的就是CPU这家伙是如何运行的,尤其要搞懂它里面的寄存器是怎么一回事,因为这将让你从底层明白程序的运行机制。 随我一起,来好好认识下CPU这货吧 把CPU掰开来看 对于CPU来说,我们首先就要搞明白它是怎么回事,也就是它的内部构造,当然,CPU那么牛的一个东
破14亿,Python分析我国存在哪些人口危机!
2020年1月17日,国家统计局发布了2019年国民经济报告,报告中指出我国人口突破14亿。 猪哥的朋友圈被14亿人口刷屏,但是很多人并没有看到我国复杂的人口问题:老龄化、男女比例失衡、生育率下降、人口红利下降等。 今天我们就来分析一下我们国家的人口数据吧! 更多有趣分析教程,扫描下方二维码关注vx公号「裸睡的猪」 即可查看! 一、背景 1.人口突破14亿 2020年1月17日,国家统计局发布
web前端javascript+jquery知识点总结
Javascript javascript 在前端网页中占有非常重要的地位,可以用于验证表单,制作特效等功能,它是一种描述语言,也是一种基于对象(Object)和事件驱动并具有安全性的脚本语言 ,语法同java类似,是一种解释性语言,边执行边解释。 JavaScript的组成: ECMAScipt 用于描述: 语法,变量和数据类型,运算符,逻辑控制语句,关键字保留字,对象。 浏览器对象模型(Br
Qt实践录:开篇
本系列文章介绍笔者的Qt实践之路。 背景 笔者首次接触 Qt 大约是十多年前,当时试用了 Qt ,觉得不如 MFC 好用。现在 Qt 的 API、文档等都比较完善,在年初决定重新拾起,正所谓技多不压身,将 Qt 当为一种谋生工具亦未尝不可。利用春节假期的集中时间,快速专攻一下。 本系列名为“Qt实践”,故不是教程,笔者对 Qt 的定位是“使用”,可以帮助快速编写日常的工具,如串口、网络等。所以不
在家远程办公效率低?那你一定要收好这个「在家办公」神器!
相信大家都已经收到国务院延长春节假期的消息,接下来,在家远程办公可能将会持续一段时间。 但是问题来了。远程办公不是人在电脑前就当坐班了,相反,对于沟通效率,文件协作,以及信息安全都有着极高的要求。有着非常多的挑战,比如: 1在异地互相不见面的会议上,如何提高沟通效率? 2文件之间的来往反馈如何做到及时性?如何保证信息安全? 3如何规划安排每天工作,以及如何进行成果验收? ......
作为一个程序员,内存和磁盘的这些事情,你不得不知道啊!!!
截止目前,我已经分享了如下几篇文章: 一个程序在计算机中是如何运行的?超级干货!!! 作为一个程序员,CPU的这些硬核知识你必须会! 作为一个程序员,内存的这些硬核知识你必须懂! 这些知识可以说是我们之前都不太重视的基础知识,可能大家在上大学的时候都学习过了,但是嘞,当时由于老师讲解的没那么有趣,又加上这些知识本身就比较枯燥,所以嘞,大家当初几乎等于没学。 再说啦,学习这些,也看不出来有什么用啊!
这个世界上人真的分三六九等,你信吗?
偶然间,在知乎上看到一个问题 一时间,勾起了我深深的回忆。 以前在厂里打过两次工,做过家教,干过辅导班,做过中介。零下几度的晚上,贴过广告,满脸、满手地长冻疮。   再回首那段岁月,虽然苦,但让我学会了坚持和忍耐。让我明白了,在这个世界上,无论环境多么的恶劣,只要心存希望,星星之火,亦可燎原。   下文是原回答,希望能对你能有所启发。   如果我说,这个世界上人真的分三六九等,
为什么听过很多道理,依然过不好这一生?
记录学习笔记是一个重要的习惯,不希望学习过的东西成为过眼云烟。做总结的同时也是一次复盘思考的过程。 本文是根据阅读得到 App上《万维钢·精英日课》部分文章后所做的一点笔记和思考。学习是一个系统的过程,思维模型的建立需要相对完整的学习和思考过程。以下观点是在碎片化阅读后总结的一点心得总结。
B 站上有哪些很好的学习资源?
哇说起B站,在小九眼里就是宝藏般的存在,放年假宅在家时一天刷6、7个小时不在话下,更别提今年的跨年晚会,我简直是跪着看完的!! 最早大家聚在在B站是为了追番,再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频,最近两年我和周围的朋友们已经把B站当作学习教室了,而且学习成本还免费,真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ノ 下面我们就来盘点一下B站上优质的学习资源: 综合类 Oeasy: 综合
雷火神山直播超两亿,Web播放器事件监听是怎么实现的?
Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播。在视频业务大数据平台中,播放数据的统计分析非常重要,所以Web播放器在使用过程中,需要对其内部的数据进行收集并上报至服务端,此时,就需要对发生在其内部的一些播放行为进行事件监听。 那么Web播放器事件监听是怎么实现的呢? 01 监听事件明细表 名
3万字总结,Mysql优化之精髓
本文知识点较多,篇幅较长,请耐心学习 MySQL已经成为时下关系型数据库产品的中坚力量,备受互联网大厂的青睐,出门面试想进BAT,想拿高工资,不会点MySQL优化知识,拿offer的成功率会大大下降。 为什么要优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行,数据库的中的数据会越来越多,处理时间会相应变慢 数据是存放在磁盘上的,读写速度无法和内存相比 如何优化 设计
一条链接即可让黑客跟踪你的位置! | Seeker工具使用
搬运自:冰崖的部落阁(icecliffsnet) 严正声明:本文仅限于技术讨论,严禁用于其他用途。 请遵守相对应法律规则,禁止用作违法途径,出事后果自负! 上次写的防社工文章里边提到的gps定位信息(如何防止自己被社工或人肉) 除了主动收集他人位置信息以外,我们还可以进行被动收集 (没有技术含量) Seeker作为一款高精度地理位置跟踪工具,同时也是社交工程学(社会工程学)爱好者...
作为程序员的我,大学四年一直自学,全靠这些实用工具和学习网站!
我本人因为高中沉迷于爱情,导致学业荒废,后来高考,毫无疑问进入了一所普普通通的大学,实在惭愧...... 我又是那么好强,现在学历不行,没办法改变的事情了,所以,进入大学开始,我就下定决心,一定要让自己掌握更多的技能,尤其选择了计算机这个行业,一定要多学习技术。 在进入大学学习不久后,我就认清了一个现实:我这个大学的整体教学质量和学习风气,真的一言难尽,懂的人自然知道怎么回事? 怎么办?我该如何更好的提升
前端JS初级面试题二 (。•ˇ‸ˇ•。)老铁们!快来瞧瞧自己都会了么
1. 传统事件绑定和符合W3C标准的事件绑定有什么区别? 传统事件绑定 &lt;div onclick=""&gt;123&lt;/div&gt; div1.onclick = function(){}; &lt;button onmouseover=""&gt;&lt;/button&gt; 注意: 如果给同一个元素绑定了两次或多次相同类型的事件,那么后面的绑定会覆盖前面的绑定 (不支持DOM事...
相关热词 c#判断数字不得为负数 c#帧和帧协议 c#算偏移值 c# 在枚举中 c#6 字符串 插值 c#程序中的占位符标签 c#监听数组变化 c# vlc c#索引实现 c# 局域网广播通信
立即提问