标签:scene three 生成 height renderer var new js THREE
//初始化配置three
var scene ,camera,renderer scene = new THREE.Scene(); var ambient = new THREE.AmbientLight(0xffffff); scene.add(ambient); var width = res.windowWidth; // 窗口宽度 var height = res.windowHeight; // 高度 var k = width / height; // 窗口宽高比 var s = 20000; // 三维场景显示范围控制系数,系数越大,显示的范围越大 // 创建相机对象(正射投影) camera = new THREE.PerspectiveCamera(-90, k, 1, s); // camera.position.set(0, 2000, 0); // 设置相机位置 renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); // 设置渲染区域尺寸 renderer.setClearColor(0xffffff, 1); // 设置背景颜色 const element = document.getElementById('three') element.appendChild(renderer.domElement);
生成网格
for (var i=0;i<=30;i++){ let padding = 100 var material = new THREE.LineBasicMaterial({ color: 0x000000, opacity:i % 3 === 0 ? 0.6 : 0.2, transparent: true }); let rowGeometry = new THREE.Geometry(); const lineLong = padding*30; rowGeometry.vertices.push( new THREE.Vector3( padding*i ,lineLong , 0 ), new THREE.Vector3( padding * i,0, 0 ) ); let colGeometry = new THREE.Geometry(); colGeometry.vertices.push( new THREE.Vector3( lineLong, padding*i , 0 ), new THREE.Vector3( 0, padding*i , 0 ) ); let rowLine = new THREE.Line( rowGeometry, material ); let colLine = new THREE.Line( colGeometry, material ); scene.add( rowLine); scene.add( colLine); }
标签:scene,three,生成,height,renderer,var,new,js,THREE 来源: https://www.cnblogs.com/huzhuhua/p/15620227.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。