threejs 繪制一個(gè)盒子的實(shí)現(xiàn)和虛線

發(fā)布時(shí)間：2020-06-30 18:13:17 來源：網(wǎng)絡(luò) 閱讀：2175 作者：antlove 欄目：web開發(fā)

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 );

// 實(shí)線
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>繪制一個(gè)盒子的實(shí)現(xiàn)和虛線</title>
    <link href="../css/base.css" type="text/css" rel="stylesheet"/>
</head>
<body>

    <script src="../jslib/three.min.js"></script>
    <script src="../js/box_outline.js"></script>
</body>
</html>

向AI問一下細(xì)節(jié)

threejs 繪制一個(gè)盒子的實(shí)現(xiàn)和虛線

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽