咸阳制作网站,电子商务专业就业方向及前景,程序员给女朋友做的网站,seo公司 引擎#x1f468;⚕️ 主页#xff1a; gis分享者 #x1f468;⚕️ 感谢各位大佬 点赞#x1f44d; 收藏⭐ 留言#x1f4dd; 加关注✅! #x1f468;⚕️ 收录于专栏#xff1a;threejs gis工程师 文章目录 一、#x1f340;前言1.1 ☘️THREE.CircleGeometry 圆形…⚕️ 主页 gis分享者 ⚕️ 感谢各位大佬 点赞 收藏⭐ 留言 加关注✅! ⚕️ 收录于专栏threejs gis工程师 文章目录 一、前言1.1 ☘️THREE.CircleGeometry 圆形几何体 二、创建THREE.CircleGeometry 二维平面圆形几何体1. ☘️实现思路2. ☘️代码样例 一、前言
本文详细介绍如何基于threejs在三维场景中创建THREE.CircleGeometry 二维平面圆形几何体亲测可用。希望能帮助到您。一起学习加油加油
1.1 ☘️THREE.CircleGeometry 圆形几何体
THREE.CircleGeometry是欧式几何的一个简单形状它由围绕着一个中心点的三角分段的数量所构造由给定的半径来延展。 同时它也可以用于创建规则多边形其分段数量取决于该规则多边形的边数。 构造函数 CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float) radius — 圆形的半径默认值为1 segments — 分段三角面的数量最小值为3默认值为8。 thetaStart — 第一个分段的起始角度默认为0。three o’clock position thetaLength — 圆形扇区的中心角通常被称为“θ”西塔。默认值是2*Pi这使其成为一个完整的圆。 属性 .parameters : Object 一个包含着构造函数中每个参数的对象。在对象实例化之后对该属性的任何修改都不会改变这个几何体。
二、创建THREE.CircleGeometry 二维平面圆形几何体
1. ☘️实现思路
1、初始化renderer渲染器2、初始化Scene三维场景scene。3、初始化PerspectiveCamera透视相机camera定义相机位置 camera.position设置相机方向camera.lookAt。4、初始化THREE.SpotLight聚光灯光源spotLight设置spotLight的位置信息场景scene中添加spotLight。5、加载几何模型创建THREE.MeshNormalMaterial法向量材质meshMaterial创建THREE.MeshBasicMaterial基础材质wireFrameMat设置wireFrameMat基础材质的线框wireframe为true通过THREE.SceneUtils.createMultiMaterialObject方法传入THREE.CircleGeometry圆形几何体geom和meshMaterial、wireFrameMat材质等参数创建平面几何体网格组circlescene场景中添加circle。具体代码参考代码样例。6、加入gui控制控制创建的圆形几何体半径、分段数、起始角度、圆形扇区的中心角。加入stats监控器监控帧数信息。
2. ☘️代码样例
!DOCTYPE htmlhtmlheadtitleTHREE.CircleGeometry 二维平面圆形几何体/titlescript typetext/javascript src../libs/three.js/scriptscript typetext/javascript src../libs/stats.js/scriptscript typetext/javascript src../libs/dat.gui.js/scriptstylebody {/* set margin to 0 and overflow to hidden, to go fullscreen */margin: 0;overflow: hidden;}/style
/head
bodydiv idStats-output
/div
!-- Div which will hold the Output --
div idWebGL-output
/div!-- Javascript code that runs our Three.js examples --
script typetext/javascript// once everything is loaded, we run our Three.js stuff.function init() {var stats initStats();// create a scene, that will hold all our elements such as objects, cameras and lights.var scene new THREE.Scene();// create a camera, which defines where were looking at.var camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// create a render and set the sizevar webGLRenderer new THREE.WebGLRenderer();webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));webGLRenderer.setSize(window.innerWidth, window.innerHeight);webGLRenderer.shadowMapEnabled true;var circle createMesh(new THREE.CircleGeometry(4, 10, 0.3 * Math.PI * 2, 0.3 * Math.PI * 2));// add the sphere to the scenescene.add(circle);// position and point the camera to the center of the scenecamera.position.x -20;camera.position.y 30;camera.position.z 40;camera.lookAt(new THREE.Vector3(10, 0, 0));// add spotlight for the shadowsvar spotLight new THREE.SpotLight(0xffffff);spotLight.position.set(-40, 60, -10);scene.add(spotLight);// add the output of the renderer to the html elementdocument.getElementById(WebGL-output).appendChild(webGLRenderer.domElement);// call the render functionvar step 0;// setup the control guivar controls new function () {// we need the first child, since its a multimaterialthis.radius 4;this.thetaStart 0.3 * Math.PI * 2;this.thetaLength 0.3 * Math.PI * 2;this.segments 10;this.redraw function () {// remove the old planescene.remove(circle);// create a new onecircle createMesh(new THREE.CircleGeometry(controls.radius, controls.segments, controls.thetaStart, controls.thetaLength));// add it to the scene.scene.add(circle);};};var gui new dat.GUI();gui.add(controls, radius, 0, 40).onChange(controls.redraw);gui.add(controls, segments, 0, 40).onChange(controls.redraw);gui.add(controls, thetaStart, 0, 2 * Math.PI).onChange(controls.redraw);gui.add(controls, thetaLength, 0, 2 * Math.PI).onChange(controls.redraw);render();function createMesh(geom) {// assign two materialsvar meshMaterial new THREE.MeshNormalMaterial();meshMaterial.side THREE.DoubleSide;var wireFrameMat new THREE.MeshBasicMaterial();wireFrameMat.wireframe true;// create a multimaterialvar mesh THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);return mesh;}function render() {stats.update();circle.rotation.y step 0.01;// render using requestAnimationFramerequestAnimationFrame(render);webGLRenderer.render(scene, camera);}function initStats() {var stats new Stats();stats.setMode(0); // 0: fps, 1: ms// Align top-leftstats.domElement.style.position absolute;stats.domElement.style.left 0px;stats.domElement.style.top 0px;document.getElementById(Stats-output).appendChild(stats.domElement);return stats;}}window.onload init;
/script
/body
/html效果如下
