I've asked this question before, here, and the answer was to do with either using THREE.DoubleSided or recalculating the normals/switching the sides in Blender for an object which has sides that appear invisible. I have done both of these and the side that I'm using still appears partially invisible.
In Blender I deleted the outside side, selected two edges, created a new face in-between the ages and dragged it out and I got this result when rendered ThreeJS:
I've followed the advice in the accepted answer here but nothing seems to do the job.
Any other advice as to what is happening here. Thanks
EDIT
I have the side appearing now but the text that I add to the side half skews like this:
Any idea as to why this is? Boop
Related
I have a website I'm working on that utilizes DaisyUI and Alpine.js (with intersect plugin).
In one of my templates I have a stepper with sections of content relating to each step. When you click one of the steps to the stepper, it scrolls you to the related section. That part is easy peasy. The difficulty is getting the step to highlight when you've scrolled to the related content manually. My lack of understanding of the intersection observer is what is throwing me off.
Here is a pen I made as a simple illustration of what I'm trying to do: https://codepen.io/jtomeck/pen/dyeVONz
The pen only shows the use of x-intersect alone. It works-ish, but you'll notice that there are bugs if you make the viewport taller. I'd ideally like the step to only highlight when the content is near the top of the screen, or at least more than halfway above the center of the viewport. I've tried:
Using threshold, but there are bugs since it does not observe the direction (from top of viewport or bottom of viewport) the intersection is happening from, as well as the threshold being defined as a percent creates strange behaviors on different sized screens.
Using margin, but it did not appear to work at all. I believe this is option is the right solution, but I'm struggling to find the proper resources online specific to my problem. I believe the answer will come if I can figure out how to manipulate the margin using enter and leave.
If someone wouldn't mind helping me with this I'd greatly appreciate it. Bonus points if all previous steps can remain highlighted when a new step is reached :). Not a requirement though!
I'd like to request that all answers continue to utilize alpinejs since it is a constraint of the project. Thank you in advance!
TLDR - Can anyone help me figure out how to use alpinejs and its intersect plugin to make the step of a stepper component highlight when the content it relates to reaches a certain position in the viewport (scrollspy effect)?
Update: Updated codepen to use:
x-intersect.margin.10%.0.0.0="shownStep = ' STEP NUMBER ID HERE '"
According to the documentation the expected behavior would be to detect intersection "when the element gets within 10% of the top of the viewport." It does not appear to work any differently than just using x-intersect without the margin added. I'm very curious why margin does seemingly nothing. I'm going to keep looking into it, but I'd very much appreciate any guidance anyone can provide about rootMargin and why the intersect plugin does not seem to be applying it properly.
I've an object in Blender. Because I want to do some UV-unwrapping using ThreeJS (see here) I determined that I need merge two of the sides to correctly unwrap.
So before exporting the .blend as a .obj object I selected the Tris to Quads face option to create a square face for the two sides as opposed to it being made up of two triangles. Here's what it looked like in Blender:
But when I import the .obj and .mtl file into ThreeJs I get this:
Is this a problem to do with me not updating the material being added to the new object?
The handles appearing white makes me think this is the case. If so how can I go about fixing it?
When I see something like this, the first thing I usually do is to set the material to side: THREE.DoubleSide. If that helps, the problem has to do with the normal-directions (so the face is actually there but isn't rendered because it is facing away from you).
To fix this, you should try the following:
In blender you can enable displaying of normal-directions in the right-hand menu (select "Face normals in section "Mesh Display").
You should now see if any of the normals are pointing inwards/in the wrong direction.
There is an automatic fix that works well for properly constructed meshes:
select object and switch into edit-mode (<Tab>)
select all vertices (shortcut <A>)
via menu "Mesh" > "Normals" > "Recalculate Outside" (shortcut <Ctrl>+<N>).
I'm currently trying to export an animated blender model to three.js using the exporter of three.js (github.com/mrdoob/three.js/tree/dev/utils/exporters/blender/2.66/scripts/addons).
I've created a model including bones and weights and a tiny animation.
The problem I have: The model gets broken. Somehow the bones don't rotate around their origin but around the origin of the root bone. Moving the bones manually does not make a difference.
I followed these tutorials:
devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/
dev.mothteeth.com/2012/10/threejs-blender-exporting-skeletal-animations/
I have:
Deleted the Armature
Checked the Vertex Groups
Keyed all bones in the first and last frame.
I've been to pretty much every thread I could find on github and stack overflow. These seem to be the main issues for these errors. But I guess I still miss any point. :(
I have uploaded all files including the blender files and exported animation.
http://www.file-upload.net/download-8068001/forum-files.rar.html
Any suggestions?
Thanks a lot in advance.
The problem was that the location/rotation/scale were not reset before exporting the model.
Before You export Your model, select the mesh and press CTRL+A and select location. Repeat for rotation and scale, then select the armature and do the same. Now it works.
I've downloaded both the tutorial package and your code. The code aspect looks fine. So looking over the model I see that your vertex groups are not well defined. When I select the Left_collarbone bone, left_upperarm, left_lowerarm I seem to be getting vertices from parts of the torso, head, etc... in the mix. I suspect that what your seeing with your funky shoulder stretch animation is that the collarbone is part of some other groupings and when exported the "weights" of the mesh are confused causing the bone to pull badly on the mesh. Try cleaning up the vertex groups and see if that helps. #lukasz1985 has the right idea, nice one! +1
P.S. Thanks for the link to the cool animation tutorials for Three.js :)
I had an issue where calling THREE.GeometryUtils.center(geometryWithBones) on a the newly imported geometry would make all the skinning look very strange. Getting rid of that fixed things.
Also make absolutely sure, that the three.js blender exporter is not set to to align your model in any way. (I had it set to "center" and it took me 4 hours to figure out why my bones rotate around some spot that was NOT the spot they rotate around in blender.)
I am working on a program, that uses THREE.RollControls, when the user goes too far away from the center of the screen, they tend to get lost, so I am working on creating a function that reorients them, facing the center of the scene.
What I had intened to do was simply call the following:
camera.lookAt(scene.position)
However, this has no affect. From what I was reading on different stack overflow questions specifically this:
ThreeJS camera.lookAt() has no effect, is there something I'm doing wrong?
It seems like their solution was to do the camera position change using the controls, rather then changing the camera itself.
I do not believe there is any 'Target' in the Roll Controls, so I don't know how I can reset where the camera is looking at based on a THREE.Vector3() Is there a simple way to do this, or will I basically have to:
So far I have 'attempted' to do the follow:
- Calculate the difference of position of the camera with the position of the scene.
- Normalize this vector
- Subtract it from the direction forward of the camera
- use this vector in controls.forward.add(thisVector)
but this doesn't do at all what I want (probably because I have no idea what I'm doing)
Thank you in advance for your time!
Isaac
The same thing bugged me too about the RollControls but I took a different approach in solving the problem. Since the controls are in the example code (in r55) you can modify the controls, as they are not part of the core library. You can see my modifications at http://www.virtuality.gr/AGG/EaZD-WebGL/js/three.js/examples/js/controls/RollControls.js
I introduced a local variable called mouseLook because I could not use the this.mouseLook. I initialized it to false and I only make it true when there is a button press i.e. when navigating in the scene. That solved my problem.
Hi i need to create a rotatable 3d "c"(alphabet c)shaped object,i.e a logo kind of thing using blender 3d tool,i tried using text in blender but its not giving the feel of 3d object please help me out from this.thanks in advance.
You might want to hit tab to enter edit mode, select the faces to extrude(can hit "a" to select all), hit "e" key and move the mouse to extrude this text shape. Obviously render having added a light to the scene. (in case you are rendering it) And add a camera if you are not using the default one, and rotate it, or the object, so it renders other than a frontal view, to make it look more like a "3D object"
There's not yet an stack exchange site for 3d modeling questions (sadly, although one is being voted ) , so this question might fit better in Superuser. Anyway you need to explain the problem with more detail, or accuracy :)