What means of this can be achieved? Is it necessary to first implement it in some kind of 3D editor, and then export it in three, or can it be made by regular means of the library?

I am new to 3D graphics.

1 answer 1

UPD: If you need to fill the closed buffer geometry with dots (not through the projections of points and triangles, but in full 3D), then there is a function for this.

You can probably implement it in a 3D editor, and in some simple cases you can do without it. Take the projection of a point on the xy plane and see if it falls into the projection of any of the triangles of the geometry on the same plane:

 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(0, 10, 20); var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var controls = new THREE.OrbitControls(camera, renderer.domElement); var light = new THREE.DirectionalLight(0xffffff, 2); light.position.setScalar(100); scene.add(light); var textGeo = null; var newGeo = null; var textPoints = null; var loader = new THREE.FontLoader(); loader.load('https://threejs.org/examples/fonts/droid/droid_serif_bold.typeface.json', function(response) { var font = response; setText(font); render(); }); function setText(font) { textGeo = new THREE.TextGeometry("ABC", { font: font, size: 4, height: 0.25, curveSegments: 1, bevelEnabled: false }); textGeo.computeBoundingBox(); textGeo.computeVertexNormals(); textGeo.center(); fillWithPoints(textGeo, 1000); textGeo.vertices.forEach(function(vertex) { vertex.startPoint = vertex.clone(); vertex.direction = vertex.clone().normalize(); }) textPoints = new THREE.Points(textGeo, new THREE.PointsMaterial({ color: 0x00ff00, size: 0.1 })); scene.add(textPoints); } function fillWithPoints(geometry, pointNumber) { geometry.computeBoundingBox(); for (var i = 0; i < pointNumber; i++) { setRandomPoint(geometry); } } function setRandomPoint(geometry) { var point = new THREE.Vector3( THREE.Math.randFloat(geometry.boundingBox.min.x, geometry.boundingBox.max.x), THREE.Math.randFloat(geometry.boundingBox.min.y, geometry.boundingBox.max.y), THREE.Math.randFloat(geometry.boundingBox.min.z, geometry.boundingBox.max.z) ); //console.log(point); if (isPointInside(point, geometry)) { geometry.vertices.push(point); } else { setRandomPoint(geometry); } } var a = new THREE.Vector3(); var b = new THREE.Vector3(); var c = new THREE.Vector3(); var face = new THREE.Face3(); function isPointInside(point, geometry) { var retVal = false; for (var i = 0; i < geometry.faces.length; i++) { face = geometry.faces[i]; a = geometry.vertices[face.a]; b = geometry.vertices[face.b]; c = geometry.vertices[face.c]; //console.log(face, a, b, c); if (ptInTriangle(point, a, b, c)) { var retVal = true; break; } } return retVal; } function ptInTriangle(p, p0, p1, p2) { // credits: http://jsfiddle.net/PerroAZUL/zdaY8/1/ var A = 1 / 2 * (-p1.y * p2.x + p0.y * (-p1.x + p2.x) + p0.x * (p1.y - p2.y) + p1.x * p2.y); var sign = A < 0 ? -1 : 1; var s = (p0.y * p2.x - p0.x * p2.y + (p2.y - p0.y) * px + (p0.x - p2.x) * py) * sign; var t = (p0.x * p1.y - p0.y * p1.x + (p0.y - p1.y) * px + (p1.x - p0.x) * py) * sign; return s > 0 && t > 0 && (s + t) < 2 * A * sign; } function render() { requestAnimationFrame(render); textGeo.vertices.forEach(function(vertex) { vertex.copy(vertex.startPoint).addScaledVector(vertex.direction, 5 + Math.sin(Date.now() * 0.001) * 5); }); textGeo.verticesNeedUpdate = true; renderer.render(scene, camera); } 
 body { overflow: hidden; margin: 0 } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script> <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

  • @pepel_xD Purely out of curiosity: did it help or not? :) - prisoner849
  • @ prisoner849 very !!!! I am new to this business, but I understand that to do such things you need to study the issue of 3D graphics in general. I’ve been doing this lately + 3ds max, but I’ve tried to export the .3ds file to three.js so far. Thank you for the lesson. - pepel_xD
  • @pepel_xD Yes, there is nothing :) Regarding the simulation: we still have www.clara.io (free, browser-based), not without the help of Three.js. - prisoner849