I am pretty new to three js and I am trying to create some stars on Dodecahedron Surface. However, I got an errors on getRandomPointOnDodecahedron. Any help on how to create that function. Working file: https://github.com/Triple1331/Question/blob/main/Question/starsOn.js
var colors = [];
//calculate colors for each vertex
...
geom.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
Related
I'm working on an app where I visualize ATV trails in a 3d perspective (NAIP imagery draped over elevation data). I am using three.js for the rendering engine.
In the above image, the white line you see is just a THREE.Line instance, where I convert a trails gps coordinates into threejs coordinates. I'd like to add more of 3d perspective to this line. I tried implementing a THREE.TubeGeometry where the path was a THREE.CatmullRomCurve3 using the same Vector3 points as how I built the line you see in the image above. That did not produce a desirable result...
From the many, many THREE examples I have looked at, I really think an extruded geometry would achieve the look I am after... But I cant for the life of me figure out how to extrude a geometry for the line. Any suggestions/thoughts?
UPDATE 1:
Here is my desired look (same trail - no imagery). This image was produced in QGIS using the Q2Threejs plugin
UPDATE 2: Here is a code of how I have attempted to create a tubegeometry. Maybe I am messing something up in there...
// trailVectors are an array of Vector3 - same as ones used to create line
var trailCurve = new THREE.CatmullRomCurve3(trailVectors);
var tubeGeometry = new THREE.TubeGeometry(trailCurve,80,1,15,false);
var material = new THREE.MeshBasicMaterial({color:0x00ff00});
var tubeMesh = new THREE.Mesh(tubeGeometry,material);
var wireframeMaterial = new THREE.LineBasicMaterial({color:0xffffff,lineWidth:2});
var wireframe = new THREE.Mesh(tubeGeometry,wireframeMaterial);
tubeMesh.add(wireframe);
scene.add(tubeMesh);
UPDATE 3
THREE.TubeGeometry(trailCurve,80,4,2,false) per mzartman request
I think that you should be able to achieve what you want with a TubeGeometry. I think the big thing is that your example (from the picture shown) has more than 2 radius segments. That gives it the tubular shape and makes it look sort of like a blob. If you set the radial segment count to 2 (as it's shown below) then I think it would look a lot better.
tubeGeometry = new THREE.TubeBufferGeometry(
[YOUR_PATH_HERE],
params.extrusionSegments, // <--- Edit this for higher resolution on the spline
3, // <--- This defines the height
2, // <--- This 2 keeps 2D (i.e. not a tube!!!!)
true );
var mesh = new THREE.Mesh( geometry, material );
var wireframe = new THREE.Mesh( geometry, wireframeMaterial );
mesh.add( wireframe );
scene.add( mesh );
Update:
I think that you might do better with a material that shows some shadow like the MeshPhong. Also, to do the wireframe you want to add it as an option in the material initialization. Give it a show with the following:
var tubeGeometry = new THREE.TubeGeometry(curve,80,1,2,false);
var material = new THREE.MeshPhongMaterial({color:0x00ff00, wireframe: true});
var tubeMesh = new THREE.Mesh(tubeGeometry,material);
scene.add(tubeMesh);
Im trying to make a particle system adapt to a certain geometric shape, I am using THREE.GeometryUtils.randomPointsInGeometry and can and array from this that I can then position particles however regardless of the geometry I use (primitive or dae) the particles fill the space of the geometry bounding (I presume) and always fill a box shape.
The key lines
var object = new THREE.Mesh( new THREE.OctahedronGeometry( 50, 2 ), new
THREE.MeshBasicMaterial( {color: 0x00ff00} ) );
var positionsX =
THREE.GeometryUtils.randomPointsInGeometry(object.geometry, 20000);
Full running code here:
https://jsfiddle.net/joe_shields/5sbcfzqt/5/
Any Ideas what I need to change to ensure that the particles honour the shape fo the original geometry?
I'm very new to both three.js & to js in general.
1st I select a polyHedron geometry with a dat.gui checkbox
which renders say a tetrahedron. these selections work.
I also have a dat.gui checkbox to either phongfill or wireframe render.
I initially wanted just a wireframe type mesh but not with all of the internal triangles. I found the edgesgeometry() function which draws pretty much what I want(hard edges only). there is however a known issue with linewidth not working in windows anymore. all lines drawn as strokeweight/width 1.
I'd like to use tubeGeometry() to draw tubes of whatever radius as opposed to 1weight lines. I know I'll have to draw something such as a sphere at/over the connection vertices for it to not look ridiculous.
geo = new THREE.TetrahedronBufferGeometry(controls0.Radius,controls0.Detail);
...
egeo = new THREE.EdgesGeometry( geo );
lmat = new THREE.LineBasicMaterial({ color: 0x0099ff, linewidth: 4 });
ph = new THREE.LineSegments( egeo, lmat );
scene.add(ph);
....
playing around in the console I found some geometry/bufferGeomery arrays that are likely the vertices/indices of my selected X-hedron as their sizes change with type(tetra/icosa etc) selection & detail increase/decrease:
//p = dome.geometry.attributes.uv.array;
p = egeo.attributes.position.array
//p = geo.attributes.uv.array
...
var path = new THREE.Curve();
path.getPoint = function (t) {
// trace the arc as t ranges from 0 to 1
var segment = (0 - Math.PI*2) *t;
return new THREE.Vector3( Math.cos(segment), Math.sin(segment), 0);
};
var geomet = new THREE.TubeBufferGeometry( path, 10, 0.2, 12, false );
var mesh = new THREE.Mesh( geomet, mat );
scene.add( mesh );
from above the tubeGeometry() draws fine separately as well but with the "path" made by that curve example. How can I use the vertices from my tetrahedron for example to create that "path" to pass to tubegeometry() ?
maybe a function that creates "segment vectors" from the vertices ?
I think it needs other properties of curve/path as well ?
I'm quite stuck at this point.
ANY Help, suggestions or examples would be greatly appreciated !
thanks.
You can try to create a TubeGeometry for each edge. Generate a LineCurve3 as the input path. Use the vertices of the edge as the start and end vector for the line.
Consider to use something like "triangulated lines" as an alternative in order to visualize the wireframe of a mesh with a linewidth greater than 1. With the next release of three.js(R91) there are new line primitives for this. Demo:
https://rawgit.com/mrdoob/three.js/dev/examples/webgl_lines_fat.html
This approach is much more performant than drawing a bunch of meshes with a TubeGeometry.
I am trying to write a function that creates a point cloud from mesh. I also want to control colors of every vertex of that point cloud. So far I tried to assign colors of geometry but colors doesnt being updated.
InteractablePointCloud_simug=function(object, editor){
var signals=editor.signals;
var vertexSize=0.3;
var pointMat= new THREE.PointsMaterial({size:vertexSize , vertexColors:THREE.VertexColors});
var colors=[];
var colorStep=0.1;
for (var i = 0; i < object.geometry.vertices.length; i++) {
colors.push(new
THREE.Color(colorStep*i,colorStep*i,colorStep*i));
};
//get points from mesh of original object
var points=new THREE.Points(object.geometry,pointMat);
//Update colors
points.geometry.colors=colors;
points.geometry.colorsNeedUpdate=true;
updatePosition();
//Add points object to scene
editor.addNoneObjectMesh(points);
}
I think this is probably doable on other video cards, but mine does not seem to like it.
Theoretically.. if your material color is white.. it should multiply times the vertex color ( which is basically like using the vertex color ), but since you did not specify black as your color, this is not the problem ).
If your code is not working on your computer ( not on mine either ), you will have to go nuclear... and just create a new selectedPointsGeometry and a new selectedPointsMesh
Grab a couple of vertices from the original.. copy them.. put them in a vertices array.. and run an update method ( you have to recreate the geo and mesh every time.. at least on my PC, I tried calling every single update method, and had to resort to recreating )
mind the coffee script. #anchor is the container
updateSelectedVertices: (vertices) ->
if #selectedParticles
#anchor.remove #selectedParticles
#pointGeometry = new THREE.Geometry()
#pointGeometry.vertices = vertices
#selectedParticles = new (THREE.PointCloud)(
#pointGeometry,
#selectedPointMaterial
)
#pointGeometry.verticesNeedUpdate = true
#pointGeometry.computeLineDistances()
#selectedParticles.scale.copy #particles.scale
#selectedParticles.sortParticles = true
#anchor.add #selectedParticles
selectedPointMaterial is defined elsewhere. Just use a different color ( and different size ).. than your non selected point cloud.
IE.. use black and size 5 for non selected point cloud , and use yellow and 10 for the selected one.
My other mesh is called #particles.. and I just have to copy the scale. (this is the non-selected point cloud)
Now my selected points show as yellow
I'm trying to make the following in three.js:
I made the model in sketchup with some simple coloured textures and used the collader importer, the result looks like this:
Now I want to dynamically load some photographs onto each of the different planes, however what I end up with is this:
So as you can see, each image is loaded but they are very small and repeated across the rest of the surface.
This is how I load the textures: (preloadTexture() is just a simple preloader)
for(i in cubeSidesArray)
{
preloadTexture(modelThumbsArray[i]);
var newTexture = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture(modelThumbsArray[i]) } );
cubeSidesArray[i].material = newTexture;
}
How do I get the textures to fill the surface?
Thanks!
Edit - I played with the model in sketchup and managed to get it a little better, but not much!
Edit 2 - Still no luck, I'm starting to think building it in code from scratch would be simpler
Option 1: I would advise you to do or next.
1 -.Import the model blender
2 -.Export blender to threejs
3 -.Use this method of charging.
AgregarModeloBlender function (geometry, materials) {
console.log(materials);
material = new THREE.MeshFaceMaterial( materials );
modelo3d_ = new THREE.Mesh( geometry,material );
escenario.add(modelo3d_);
modelo3d_.add(camera);
modelo3d_.scale.set(5,5,5);
modelo3d_.position.set(-900,25,850);
modelo3d_.rotation.y=Math.PI;
}
4 -. Subsequently trabajr with textures independently.
Example: http://all.develoteca.com/builder/
Option 2: I would advise you to do or this:
1 -. Create the geometric shape (vertices) to modify each of the faces of the texture.
Example: http://develoteca.com/Panel/
Greetings.