base.css

html,body{position:relative;height:100%;}body{margin:0;}canvas{width:100%;height:100%}ul{padding:0;margin:0;list-style:none;}*{box-sizing:border-box;}


box_outline.js

varscene=newTHREE.Scene();scene.background=newTHREE.Color(0xaaaaaa);varcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);varrenderer=newTHREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);//实线vargeometry=newTHREE.BoxBufferGeometry(1,1,1);varedges=newTHREE.EdgesGeometry(geometry);varline=newTHREE.LineSegments(edges,newTHREE.LineBasicMaterial({color:0xffffff,linewidth:5,linejoin:'bevel',linecap:'square',}));scene.add(line);//虚线vargeometry=newTHREE.BoxBufferGeometry(1,1,1);varedges=newTHREE.EdgesGeometry(geometry);varline=newTHREE.LineSegments(edges,newTHREE.LineDashedMaterial({color:0xffffff,dashSize:0.1,gapSize:0.1,linewidth:1}));line.computeLineDistances();//非常重要不然出不来效果line.position.y=2;scene.add(line);camera.position.z=5;functionanimate(){requestAnimationFrame(animate);renderer.render(scene,camera);}animate();


box_outline.html

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>绘制一个盒子的实现和虚线</title><linkhref="../css/base.css"type="text/css"rel="stylesheet"/></head><body><scriptsrc="../jslib/three.min.js"></script><scriptsrc="../js/box_outline.js"></script></body></html>