👨⚕️ 主页: gis分享者
👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨⚕️ 收录于专栏:threejs gis工程师
文章目录
- 一、🍀前言
- 1.1 ☘️HREE.PlaneGeometry 二维平面几何体
- 二、🍀创建 THREE.PlaneGeometry 二维平面几何体
- 1. ☘️实现思路
- 2. ☘️代码样例
一、🍀前言
本文详细介绍如何基于threejs在三维场景中创建THREE.PlaneGeometry 二维平面几何体,亲测可用。希望能帮助到您。一起学习,加油!加油!
1.1 ☘️HREE.PlaneGeometry 二维平面几何体
HREE.PlaneGeometry 用于生成平面几何体的类。
构造函数:
PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
width — 平面沿着X轴的宽度。默认值是1。
height — 平面沿着Y轴的高度。默认值是1。
widthSegments — (可选)平面的宽度分段数,默认值是1。
heightSegments — (可选)平面的高度分段数,默认值是1。
属性:
.parameters
一个包含着构造函数中每个参数的对象。在对象实例化之后,对该属性的任何修改都不会改变这个几何体。
二、🍀创建 THREE.PlaneGeometry 二维平面几何体
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.PlaneGeometry平面几何体geom和meshMaterial、wireFrameMat材质等参数创建平面几何体网格组plane,scene场景中添加plane。具体代码参考代码样例。
- 6、加入gui控制,控制创建的几何平面宽高以及宽高分段数。加入stats监控器,监控帧数信息。
2. ☘️代码样例
<!DOCTYPE html><html><head><title>THREE.PlaneGeometry 二维平面几何体</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><style>body {/* set margin to 0 and overflow to hidden, to go fullscreen */margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div><script type="text/javascript">function init() {var stats = initStats();var scene = new THREE.Scene();// create a camera, which defines where we're 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 plane = createMesh(new THREE.PlaneGeometry(10, 14, 4, 4));// add the sphere to the scenescene.add(plane);// 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 it's a multimaterialthis.width = plane.children[0].geometry.parameters.width;this.height = plane.children[0].geometry.parameters.height;this.widthSegments = plane.children[0].geometry.parameters.widthSegments;this.heightSegments = plane.children[0].geometry.parameters.heightSegments;this.redraw = function () {// remove the old planescene.remove(plane);// create a new oneplane = createMesh(new THREE.PlaneGeometry(controls.width, controls.height, Math.round(controls.widthSegments), Math.round(controls.heightSegments)));// add it to the scene.scene.add(plane);};};var gui = new dat.GUI();gui.add(controls, 'width', 0, 40).onChange(controls.redraw);gui.add(controls, 'height', 0, 40).onChange(controls.redraw);gui.add(controls, 'widthSegments', 0, 10).onChange(controls.redraw);gui.add(controls, 'heightSegments', 0, 10).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 plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);return plane;}function render() {stats.update();plane.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>
效果如下: