{"id":101,"date":"2018-03-13T22:54:58","date_gmt":"2018-03-14T03:54:58","guid":{"rendered":"http:\/\/www.chroniclesoftright.com\/blog\/?p=101"},"modified":"2018-03-13T22:54:58","modified_gmt":"2018-03-14T03:54:58","slug":"editor-update-4","status":"publish","type":"post","link":"https:\/\/www.chroniclesoftright.com\/blog\/2018\/03\/13\/editor-update-4\/","title":{"rendered":"Editor update"},"content":{"rendered":"<p>I&#8217;ve been working on terrain editing tonight and it&#8217;s been a little slow but I&#8217;m making progress.\u00a0 Now when you select a terrain object you can hit &#8216;e&#8217; to enter edit mode.\u00a0 This changes the <a href=\"https:\/\/threejs.org\/docs\/#api\/materials\/MeshLambertMaterial.emissive\" target=\"_blank\" rel=\"noopener\">emissive<\/a> color of the object so you can tell you are in edit mode.\u00a0 Then, when you right click anywhere on the terrain it picks the vertex closest to where you clicked and places a little yellow sphere there.\u00a0 The sphere is, of course, just a placeholder for future functionality.\u00a0 Eventually I will be able to move the selected vertex up and down along the y axis.\u00a0 This is actually a pretty small step to code, I just don&#8217;t feel like it tonight.<\/p>\n<p>This isn&#8217;t anything groundbreaking but I thought somebody might be interested in how to select the closest vertex on a mesh.<\/p>\n<p>First, you need to get an intersection point.\u00a0 There are plenty of resources out there on how to do this, just search for <a href=\"https:\/\/threejs.org\/docs\/#api\/core\/Raycaster\" target=\"_blank\" rel=\"noopener\">raycaster<\/a>, and specifically the <a href=\"https:\/\/threejs.org\/docs\/#api\/core\/Raycaster.setFromCamera\" target=\"_blank\" rel=\"noopener\">.setFromCamera()<\/a> method.\u00a0 Anyway, once you have your intersection object it tells you some interesting things.\u00a0 First of all it includes the intersection point, which is obviously necessary.\u00a0 It also has the intersection <a href=\"https:\/\/threejs.org\/docs\/#api\/core\/Face3\" target=\"_blank\" rel=\"noopener\">face<\/a>.\u00a0 The face is comprised of three elements; a, b, and c.\u00a0 These are the indices of the three vertices of the triangle intersected.\u00a0 So to get the actual <a href=\"https:\/\/threejs.org\/docs\/#api\/math\/Vector3\" target=\"_blank\" rel=\"noopener\">Vector3<\/a>s for these three points you can do something like this:<\/p>\n<p>var a = terrain.geometry.vertices[intersections[0].face.a];<br \/>\nvar b = terrain.geometry.vertices[intersections[0].face.b];<br \/>\nvar c = terrain.geometry.vertices[intersections[0].face.c];<\/p>\n<p>Now you have the intersection point as a Vector3 and the three points of the intersected triangle, also as Vector3s.\u00a0 Vector3 has a convenient method called <a href=\"https:\/\/threejs.org\/docs\/#api\/math\/Vector3.distanceTo\" target=\"_blank\" rel=\"noopener\">.distanceTo()<\/a> that returns, you guess it, the distance from one Vector3 to another.\u00a0 So all you need to do is find out which of a, b, and c is closest to your intersection point.\u00a0 I used Math.min() but there are plenty of ways to do this.\u00a0 Once you know the closest one, you can do whatever you want with it.\u00a0 As I said previously, I placed a little yellow sphere on the closest vertex for now, but the eventual goal is to move the vertex up and down to shape the terrain.<\/p>\n<p>Maybe this will be mildly useful to someone down the road.\u00a0 If you have any questions about this leave a comment and I&#8217;ll do my best to respond.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve been working on terrain editing tonight and it&#8217;s been a little slow but I&#8217;m making progress.\u00a0 Now when you select a terrain object you can hit &#8216;e&#8217; to enter edit mode.\u00a0 This changes the emissive color of the object so you can tell you are in edit mode.\u00a0 Then, when you right click anywhere&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-101","post","type-post","status-publish","format-standard","hentry","category-planning-and-development"],"_links":{"self":[{"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/posts\/101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/comments?post=101"}],"version-history":[{"count":1,"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/posts\/101\/revisions"}],"predecessor-version":[{"id":102,"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/posts\/101\/revisions\/102"}],"wp:attachment":[{"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/media?parent=101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/categories?post=101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/tags?post=101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}