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
绘制一个盒子的实现和虚线
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前文章:threejs绘制一个盒子的实现和虚线-创新互联
分享路径:http://scyanting.com/article/gpcij.html