threejs绘制一个盒子的实现和虚线
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
绘制一个盒子的实现和虚线
网页名称:threejs绘制一个盒子的实现和虚线
文章链接:http://lswzjz.com/article/giojdi.html