three.js在每个面上的模型顶部绘制栅格

three.js
我是3J的初学者。我花了相当多的时间来确定我的要求，因此作为最后一个地点，我在这里。
我正在使用OBJLoader装载一个3D集装箱模型。我已经添加了旋转控件来旋转相机。
我的下一个任务是在模型所需的一侧为给定数量的单元格绘制网格，然后用给定的颜色高亮显示/着色特定单元格。网格必须适合对象侧的长度和高度。
请提供如何实现上述目标的指南/步骤。
任何代码示例都非常好。我已经看过了几乎所有的三个JS样本，但没有一个符合我的要求。
嗨！
有关于预期结果的解释性图片吗？
另外，提供一个实时代码示例（jsfiddle、codepe
等）也很好。
我正在Angular 7中完成这个ThreeJS项目，因此不确定是否可以将它放在codepe
或jsfiddle中。
如果需要，我可以在公共URL中托管此应用。
期望的结果：
用户将提供容器中受影响区域的协调如图所示，应突出显示相同的内容。也可以高亮显示一行中单元格的一半。
如果任何一侧不受影响，则可以在该一侧打开网格线。
以下是我迄今为止所做的。您可以看到所有//注释行。我真诚地试图达到上述期望的结果。nimport { Component, OnInit, ElementRef, ViewChild, HostListener, AfterViewInit } from \"@angular/core\";import * as OrbitControls from \"three-orbitcontrols\";import * as THREE from \"three\";import { MTLLoader, OBJLoader } from \"three-obj-mtl-loader\";import * as TWEEN from \"@tweenjs/tween.js\";import { Color } from \"three\";import { TouchSequence } from \"selenium-webdriver\";@Component({selector: \"app-myfirstscene\",templateUrl: \"./myfirstscene.component.html\",styleUrls: [\"./myfirstscene.component.css\"]})export class MyfirstsceneComponent implements OnInit, AfterViewInit {private container: HTMLElement;@ViewChild(\"container\") elementRef: ElementRef;private scene: THREE.Scene;private camera: THREE.PerspectiveCamera;private renderer: THREE.WebGLRenderer;public controls: OrbitControls;private mtlLoader: MTLLoader;private loader: = = = = = {FRONT: 0x01,BACK: 0x02,LEFT: 0x04,RIGHT: 0x08,TOP: 0x10,BOTTOM: 0x12};constructor() { = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, = -1000;// = new = => = true;//// child.material.color.setHex(0xd3d3ba);//}//});//// object.lookAt(0, 1000, = = bb.max.y - bb.min.y;// = bb.max.y - bb.min.y;// = new THREE.Box3().setFromObject(object).getSize(vct);// = false;// = new THREE.MeshFaceMaterial( cubeMaterials );object.traverse(function (child) {if (child instanceof THREE.Mesh) = - 95;// object.position.set( 0, 1000, -1 = = new THREE.Vector3( 1, 1, 1 );// grid.lookAt( vector );// = = new THREE.BoxBufferGeometry(-100, 0, -100, 0 );// = new THREE.EdgesGeometry( mesh.geometry ); // or WireframeGeometry// = new THREE.Geometry();// geometry.vertices.push(new THREE.Vector3(0, 0, 0));// geometry.vertices.push(new THREE.Vector3(0, 10, 0));// geometry.vertices.push(new THREE.Vector3(10, 0, 0));// = new THREE.Vector3(0, 100, 0);// = this;//requestAnimationFrame(this.render.bind(self));//self.renderer.render(self.scene, self.camera);//self.animate();//// this.show_container_side(this.FACE_MASKS.FRONT);//// (function render() {////requestAnimationFrame(this.render.bind(this));////self.renderer.render(self.scene, self.camera);////self.animate();//// }());// }public = = = new THREE.Raycaster();// = [];// this.findAllObjects(obj, this.scene);// = intersects[0].face;// = new THREE.Color(0xffffff);//clr.setRGB(Math.random(), = 1;// // colorArray[face.a + = 0;// = 1;// // colorArray[face.c + = 0;// = new THREE.BoxBufferGeometry(1, 1, = new THREE.Group();group.add(cubeA);group.add(cubeB);this.scene.add(group);}show_container_side(side) = = = this.get_rotation_tween(current_pos, target_pos, this.DURATION);// this.controls.disableAutoRotate();if => {// this.controls.update();this.controls.object.position.set(current.x, current.y, current.z);// this.controls.object.position.set(0, 1000, 1000);// this.controls.object.position.set(target.x, target.y, target.z);// this.container_object.lookAt(targe)// console.log(this.controls);console.log(\"current\");console.log(current);console.log(\"target\");console.log(target);});return tween;}}
您可以用一个矩形网格覆盖您的容器，例如，每个矩形都是一个分离的THREE.Line()对象。然后您只需更改矩形材质的颜色。
您能帮忙吗？
如何获得每张脸的大小？
我应该在哪里提到我的矩形网格的面呢？穆罕默德·法耶格：
我如何获得每张脸的大小？
您可以使用THREE.Box3()及其方法.setFromObject()获得容器的大小，类似于>
谢谢。我已经测试了你的代码，我能够得到模型的大小。
你能帮助我在物体的所有侧面绘制矩形网格吗？
任何人都可以了解如何（通过代码）在给定侧所需区域的模型对象上创建矩形？
穆罕默德·法耶格：
任何人都可以了解如何在给定侧所需区域的模型对象上创建矩形（通过代码）？
看看这些东西。nhttp://discussion.threejs.hofk.de/3DGridOfLines/3DGridOfLines.html82nhttp://discussion.threejs.hofk.de/GridBoxGeometry/GridBoxGeometry.html83
链接todiscourse.threejs. org在源代码中位于上面的网格集合43中，但我不确定它是否能帮助您。
我刚刚从GridoxGeometry复制了代码，几乎完成了。当然对我有帮助。非常感谢。nGithub代码存储库是https://github.com/fayeeg/ThreeJSContainer47
注意：这是角度投影。
问题是我无法定位与容器对象位置匹配的网格。Mohamed_Fayeeg:
问题是我无法定位与容器对象位置匹配的网格容器对象的位置。
网格可以任意定位。n// grid3.position.set( 1, 2, 1 )
我简化了示例并移动了网格>
将简化版本添加到示例集合中。（原版下）http://discussion.threejs.hofk.de/9n；；；
谢谢你的提示。我已获得以下更改的结果=这是GridBoxGeometry（几何学，>穆罕默德·法耶格：
谢谢你的提示。
谢谢你不要去找我，而是感谢@prisoner849提供了这个有用的网格框（以及许多其他关于讨论的伟大解决方案：从Discussion.threejs.org32.nI只有一点帮助。
谢谢@prisoner849对ThreeJS做出的惊人贡献。n@hofk你的小小帮助对像我这样的人来说是一大步。
不客气
你
我喜欢人们自己思考并找到解决方案，只有一个开始的想法。
对不起，我不是他们中的一员。我只是利用ThreeJS在一个非常大的企业系统中实现一个很小的功能——这意味着我既不是计算机图形专家，也不是数学专家。我很遗憾在我上学的时候忽略了我的几何课。
我花了两天时间用这样的逻辑（伪代码）填充一个单元格。
突出显示（侧，行，列，“aqua”）
侧是-左，右，上，下，前，后例如突出显示（右，2，3，“aqua”）；
我已经讲了很多例子，但我缺少数学知识。
如果你能用一种方法/伪代码/逻辑来指导我，那么我可以尝试遵循。
你可能是指第一张图片中以黄色突出显示的单元格？
应该只有这些细胞可见吗？
是网格中的每个框都是一个单元格。
否-我可以通过索引号作为参数来选择网格特定面上的特定单元格。
如果您有单元格的坐标，您可以轻松地在此处放置边框或透明矩形。
矩形和边框的代码如下：n；；>；title>；单元格===新建三线基本材料（{颜色：0xff0000，侧面：三、双面，=新的Float32Array（[//四行-1，-1,0,1，-1,0,1,1,0,1,1,0，-1,1,0，-1,1,0,0，-1,0，]）；geometryLines.addAttribute（“职位”，新三、缓冲属性（垂直线，3>
您也可以使用真实的框架。ProfiledOnTourgeometry资源该文章的演变[ProfiledOnTourgeometry 3]该函数有四个参数：三、形状（）表示配置文件；数组3.矢量2（）表示轮廓；用于闭合轮廓的布尔值（默认为true）；开口端的布尔值（默认值为false）。它计算轮廓两条边之间的角度，然后将剪切/平移、旋转和平移三个矩阵一致应用于轮廓每个点的轮廓点。解决方案仍然是粗糙和原始的…
另请参见http://discussion.threejs.hofk.de/ProfiledContourGeometry/ProfiledContourGeometry.html这对我来说是个好的开始。我已经测试了上面给出的代码框架仅显示在一侧。
您能建议如何在gridboxgeometry的所需一侧显示框架吗？（有六面）
Draw grid on top of model on each facen

three.js在每个面上的模型顶部绘制栅格

three.js[已解决]正交摄影机的变换控件：gizmos缩放问题

three.js多次渲染同一模型（obj模型），FPS要低得多

three.js可缩放场景背景

three.js移动导入的Gltf模型

three.js平面明暗处理的问题

three.js如何渲染立方体材质？

three.js如何创建要在网格中拟合的线段

three.jsGLTFLoader.js这是我的登记簿错误

three.js使用threejs的光流

three.js使用光线投射动态绘制多边形