I want to create a meshed object like the pic below. (Please ignore the coin besides it.)
The thing is, I want to set a light behind the meshed object and make the light scatter through the meshes. (it's almost like a lamp below.)
The camera will be located right in front of the meshed object, so the object itself doesn't need to be a 3d cube like this pic though.
I'm very new to three.js and was not able to find a way to make a object like the one described above.
geometry = new THREE.BoxGeometry(1, 1, 1);
material = new THREE.MeshPhongMaterial({ color: 0x000000 });
box = new THREE.Mesh(geometry, material);
scene.add(box);
Could anyone advise me how I can I achieve this?
Related
I am working on a project that uses three.js and I am using an orthographic camera. I have tried using an external MeshLine package and also the built in THREE.LineGeometry. The MeshLine has a known issue with orthographic cameras that has not been fixed and this THREE.LineGeometry (which I am focused on trying to get to work) seems to also have a problem when I use an orthographic camera. The line sort of takes its shape but it is as wide as the entire viewport, and I am not sure why it is doing this or if I can fix it with a property.
I am looking for either a solution to one of the line types I listed or any other working 2D line solutions for three.js.
This is an image of a THREE.LineGeometry that is supposed to be just a diagonal line. Those grey arrows are a part of my project, and are supposed to be there (my concern is that the line is large and clips through them currently).
Here is my code:
var lineGeometry = new LineGeometry();
lineGeometry.setPositions([0,0,0,1,0,1,2,0,2,3,0,3]);
lineGeometry.setColors([0,0,255,0,0,255,0,0,255,0,0,255]);
console.log(lineGeometry)
var lineMaterial = new LineMaterial({
color: 0xffffff,
vertexColors: true,
dashed: false,
lineWidth: 1,
});
var myLine = new Line2(lineGeometry, lineMaterial);
myLine.computeLineDistances();
this.Scene.add(myLine);
When using the LineGeometry in three.js, make sure to also set the viewport size for the line material shader either in the update loop or on window resize.
myLineMaterial.resolution.set(window.clientWidth, window.clientHeight);
I'm trying to add custom geometry to my forge viewer, following this example. It mostly works fine, except when using certain colors.
I'm using the following code to add a sphere mesh:
const geometry = new THREE.SphereGeometry(0.4, 32, 32)
const material = new THREE.MeshBasicMaterial({
color: someColor,
transparent: false,
})
const sphere = new THREE.Mesh(geometry, material)
viewer.overlays.addScene('sphere-mesh-scene')
viewer.overlays.addMesh(sphere, 'sphere-mesh-scene')
for certain values of someColor the sphere is transparent, for other values, it's not:
e.g.
#6b6e75 and #54ffff yields a transparent sphere,
while
#000000 and #988888 yields an opaque sphere.
Is there any material properties I need to set to avoid this? Or do I need to deal with the material manager in forge?
I'm using forge viewer version 7.14.0.
Edit
I also get the same result for point clouds - with a point cloud with many different colors, some of the points are transparent, and get a "glowing outline" against the Forge geometry.
This is happending because by default the blend shader determines if it should add transparency (to selected nodes for instance) by its hue color in the overlay...
We can suppress this behavior by turning useIdBufferSelection in the initOptions like below when calling viewer.start/loadModel(svf,options,cb,cb,cb,initOptions):
viewer.loadModel(svf,null,null,null,{useIdBufferSelection:true});
See live demo here
I was looking on Three.js API and I found that the Frustum is used for the camera visible area. I was wondering if I can access the view frustum of my PerspectiveCamera and declare the frustum as an object. Basically, my goal is to color the frustum of the camera.
If you want to visualize the frustum of your camera, you can use a THREE.CameraHelper. It essentially does what you're describing in the question: it lets you color the frustum so you can visualize it.
To implement it, you simply need to initiate it with your camera as a parameter, then add it to the scene:
var camera = new THREE.PerspectiveCamera( 75, camRatio, 0.1, 1000 );
var helper = new THREE.CameraHelper( camera );
scene.add( helper );
You can read more about it in the docs and you can see it in action on the right side of this example
Update:
If you want to read the data used to build the helper, you can access its .pointmap property. It's got lots of points that determine the position of the near plane (n1, n2, n3...), far plane (f1, f2, f3...), target, etc. To get better acquainted with what each key means, you can look at its constructor from line 38 to 83. The code is very well-documented in there.
I found this related question but I'm using a MeshLambertMaterial and my question is about ambient light:
Why doesn't my directional light affect the whole scene?
My model is about 150 feet long and the ambient light only illuminates about the front half of it. I've added point lights along the way but I still can't see the back of the model.
Why doesn't the ambient light illuminate the whole model?
Here is the model:
http://julio.broomstones.com/webgl/sheet/webgl_sheet.html
If you zoom in with the middle button you will see the end of the sheet. I've placed globes at the point lights. They do help but not enough.
The problem in fog and camera settings. Try change far propertie of fog and far propertie of camera (reducing these values to reduce the visible area). For example:
var far_clip_plane = 4000;
...
scene.fog = new THREE.Fog( 0x000000, 140, 2000 );
[ https://jsfiddle.net/gqpLxuf9/ ]
We have a model created in Blender by subtracting an extruded SVG from a “flat” base using a boolean difference operator. Or in other words, we carved a picture into it. The model renders just fine in Blender, but loading it into our simple, three.js-based web viewer (using the json exporter for Blender), we get some really odd shadows on the surface, and depending on the scale, shiny vertexes.
Here's my light and camera:
camera = window.camera = new THREE.PerspectiveCamera(45, $('main').width() / $('main').height(), 10, 10000);
loader = new THREE.JSONLoader(true);
var light = new THREE.DirectionalLight(0xffffff, 1.0);
light.position.set(-30, 30, 100);
light.target.position.set(0, 0, 0);
light.shadowCameraNear = 200;
Can anyone spot whether we did something wrong? And is that a Three-specific issue, or WebGL, or Blender, or our model?
Output (screenshot)
Fiddle
Looking at your fiddle, it seems that your vertexNormals are totally smoothed and thus shading is incorrect.
See here:
https://github.com/mrdoob/three.js/issues/1258
Does this help?
I'm not sure if this technically counts as a solution, but — worked around the problem by dropping the JSON blender export, and using P3D instead to load .stl directly.