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

var scene = new THREE.Scene();

scene.background = new THREE.Color( 0xaaaaaa );

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

// 实线

var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );

var edges = new THREE.EdgesGeometry( geometry );

var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { 

    color: 0xffffff,

    linewidth: 5,

    linejoin:  'bevel',

    linecap: 'square',

}));

scene.add( line );

// 虚线

var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );

var edges = new THREE.EdgesGeometry( geometry );

var line = new THREE.LineSegments( edges, new THREE.LineDashedMaterial( { color: 0xffffff,dashSize: 0.1, gapSize: 0.1,linewidth: 1} ));

line.computeLineDistances(); // 非常重要 不然出不来效果

line.position.y = 2;

scene.add( line );

camera.position.z = 5;

function animate() {

    requestAnimationFrame( animate );

    renderer.render( scene, camera );

}

animate();

box_outline.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>绘制一个盒子的实现和虚线</title>

    <link href="../css/base.css" type="text/css" rel="stylesheet"/>

</head>

<body>

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../jslib/three.min.js"></script>

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/box_outline.js"></script>

</body>

</html>

©著作权归作者所有：来自51CTO博客作者antlove的原创作品，如需转载，请注明出处，否则将追究法律责任