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的原创作品，如需转载，请注明出处，否则将追究法律责任
共同学习，写下你的评论
评论加载中...
作者其他优质文章
