Тёмный
Class Outside
Class Outside
Class Outside
Подписаться
Export Blender to Unreal Engine
5:13
21 час назад
3D Portfolio with ThreeJS
17:07
5 месяцев назад
Water Texture in ThreeJS
6:48
6 месяцев назад
Set JPEG as SkySphere in ThreeJS
3:24
6 месяцев назад
Load HDR Image In ThreeJS
4:07
6 месяцев назад
Watch 360 Videos In VR - 360 Media Player
2:53
6 месяцев назад
360 Media Player - Installation
6:58
6 месяцев назад
Outline object in ThreeJS
6:08
6 месяцев назад
Turn Cursor Into A Pointer With Javascript
3:09
6 месяцев назад
Hover Over Objects in ThreeJS - Raycast
3:42
10 месяцев назад
Euler vs Quaternion - What's the difference?
8:49
10 месяцев назад
Scroll Along Spline Path in ThreeJS
9:14
10 месяцев назад
Create and Install Blender Add-ons
5:29
11 месяцев назад
Fix Holes in Instant Meshes
5:43
Год назад
Комментарии
@customcode-o4e
@customcode-o4e 19 часов назад
Thanks for the amazing tutorial, may i ask you if is possible to make the cam change direction on specific point and at which tick i am in a specific moment?
@customcode-o4e
@customcode-o4e 17 часов назад
I found the way, maybe not the right one or the smartest but a way lol
@TheStrokeForge
@TheStrokeForge 7 дней назад
Tooo good! Thanks for the informational video!
@badashphilosophy9533
@badashphilosophy9533 8 дней назад
just a headsup, it looks like u didnt link the texture baking video in your descriiption, nor any other tutorials which presumably you meant to coz u have a tutorials subheading in the description with nothing under it.
@mozartmemelord
@mozartmemelord 9 дней назад
damn, had to do a project in graphics programming and did not hear about anything said here, i even went (probably too quickly) trough books and did my project and only got here because of being curious about gimbal lock. This is making me afraid of all the things I miss trying to keep up with everybody instead of properly learning. Great video anyway
@shashankbhatt6342
@shashankbhatt6342 14 дней назад
Also move around through the scene to show how it looks in browser with the help of controls may be
@classoutside
@classoutside 11 дней назад
I appreciate your feedback. There are a variety of ways to move around a 3D space in ThreeJS. For this video I tried to reduce the amount of code required to understand how the process of importing the model works. Threejs has some interactive examples available to demonstrate ways to move around a scene. I have also linked a separate video below where the camera moves around this 3D scene along a path. Scroll along spline path in threeJS: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-58k6PLYnOuI.htmlsi=9GM3hwXM9PzfO_NR ThreeJS example: threejs.org/examples/?q=controls#misc_controls_pointerlock
@kattuner
@kattuner 15 дней назад
Awesome! Thank you so much!
@classoutside
@classoutside 11 дней назад
I am happy that I could share this video with you :)
@MrsZig2U
@MrsZig2U 20 дней назад
BOOHYA BABY, ! This was quick and easy...much appreciated!!😀
@classoutside
@classoutside 11 дней назад
I appreciate your feedback! I am glad I could share this with you.
@Agua.Fiestas
@Agua.Fiestas 26 дней назад
hello, good video.I suscribed! I can´t export the blender lights, should I install an asset? where I can find it? Thanks
@classoutside
@classoutside 11 дней назад
When exporting from Blender as a glb/gltf, on the window where you name your exported file there should be a drop down on the right marked "Include", in this drop down "Punctual lights" must be selected, with a checkmark in the box. After confirming this I would attempt to view the exported scene on www.threeJS.org/editor If the lights do not appear in the inspector on threeJS.org/editor, there may be an incompatibility with how the lights are written to the file by Blender and read by ThreeJS. In this case the lights may need to be recreated. This can sometimes be done on threeJS.org/editor, and then exported into a new object.
@samuelb.9314
@samuelb.9314 27 дней назад
That one worked for me ! Thanks :)
@classoutside
@classoutside 11 дней назад
It is great to hear that this worked for you! I appreciate your comment.
@jeremy1991
@jeremy1991 28 дней назад
Glad to be the 1000th sub. Great video!
@classoutside
@classoutside 11 дней назад
I am happy I can share this video with you! Welcome to the channel :)
@RAYM0ND0-js1sd
@RAYM0ND0-js1sd 29 дней назад
SiMPL(e) = D0 Y0U FLY A FiGHT(e)R J(e)T
@classoutside
@classoutside 11 дней назад
I have not had the experience of flying a fighter jet myself.
@Tolinar
@Tolinar Месяц назад
I'm saved... it worked. Thank you.
@classoutside
@classoutside 11 дней назад
I am glad this video could be helpful for you. :)
@nawakman
@nawakman Месяц назад
you can also use the Raycaster class from node_modules\three\src\core
@classoutside
@classoutside 11 дней назад
I believe the Raycaster from ThreeJS, loaded in node_modules\three\src\core, is being used in the file: RayCastHelper.js on the line: const raycaster = new THREE.Raycaster(); Perhaps there is more raycaster functionality that may be beneficial from that file. three\src\core\Raycaster.js: github.com/mrdoob/three.js/blob/dev/src/core/Raycaster.js RayCastHelper.js: github.com/ClassOutside/Clicking_Objects_ThreeJS/blob/main/src/helpers/RayCastHelper.js
@RYANFORRANSOM
@RYANFORRANSOM Месяц назад
Been struggling with this for a while thanks for the clean and easy breakdown
@classoutside
@classoutside 11 дней назад
I am glad I could provide something helpful towards a solution for you!
Месяц назад
when i try to download it my antivirus stops me to go to the url it says... so i didnt download it
@pascaljean2333
@pascaljean2333 Месяц назад
Your antivirus wants you to spend money, these programs are fine.
@classoutside
@classoutside 12 дней назад
I appreciate you sharing your experience. I have not personally identified any viruses on my personal machine related to this software. Sometimes, antivirus software will operate with the idea "better safe than sorry" and sometimes this can lead to safe programs being flagged as potentially malicious. While when I downloaded it, the software I received I believe is safe, I cannot personally guarantee it, or your individual download of it, are safe. If you choose not to use this software, I do hope you are able to find an alternative route to any solution you are searching for.
11 дней назад
@@classoutside i didnt say about the software but the link to goes to the page you can download it. not github. but the software's link for windows version
@classoutside
@classoutside 11 дней назад
Thank you for clarifying, I must have misread your comment. If the link to GitHub.com is being stopped by your antivirus, I can say that is surprising. GitHub is a commonly used site owned by Microsoft and should be accessible. If it is the link on the GitHub page to download the software, i am less familiar with that link. According to the GitHub description you can compile the project yourself with some guidance provided in the README. You could try to compile the repository yourself if you would like access to the software. This video is intended to assist with fixing holes in meshes that result from using the instant meshes program, not holes that already exist in the mesh when in blender. Is this the solution you are looking for?
@mauryaanurag6622
@mauryaanurag6622 Месяц назад
thanks i made in react , i was just having some doubt how can i use this in react three fiber //currently i have done ur whole code in core in react
@classoutside
@classoutside 12 дней назад
Thank you for sharing your experience. The features displayed in this video should be implementable in react 3 fiber. The repository may need some adjustments to properly conform.
@prajwalaughade1210
@prajwalaughade1210 Месяц назад
Really helpful man every body just saying about load factory settings but no one is talking about save start up file thanks mam ❤️🛐
@classoutside
@classoutside 12 дней назад
I am glad I could share this information with you! :)
@TacTicMint
@TacTicMint Месяц назад
That helped a lot thanks. I'm transferring bone weights from one mesh to one in a lightly different pose.
@classoutside
@classoutside 12 дней назад
I am glad this video could help you! I hope your project transferring those bone weights goes well!
@schoukah
@schoukah Месяц назад
Thank you! Your tutorial was so helpful. I was about to give up! <3
@classoutside
@classoutside 12 дней назад
I am glad you found this tutorial helpful! :) Thank you for sharing!
@FaresPerez
@FaresPerez 2 месяца назад
Hi there, thank you for posting these tutorials! I have followed three but am now getting stuck. My armature does not follow the same moves as the one I have downloaded; It only moves around in the T position like a scarecrow dancing. I can see the armature I downloaded dancing, and it looks as if my armature wants to follow but nothing but the hands move and the rest remains in the T position. Any idea what I may have gotten wrong?
@classoutside
@classoutside 12 дней назад
Hello. If the downloaded armature appears to move, and the mesh does not, it may require some troubleshooting to solve. One thing you may be able to try is setting the rest pose. I have another video linked below that describes this process. Another thing that may be worth checking is the weights. When you apply the armature to the mesh with "Parent with Automatic weights" the system will attempt to weigh how much influence the bones movements should have on the vertices of the mesh. It is possible that the automatic weights did not synchronize the bones with the intended vertices. If this is the case, you can try to make modifications in the Weight Painting Mode, found near the Object Mode and Edit Mode in the top left drop down of the 3D viewport. I hope these suggestions may help you towards a solution! Set the rest position: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-suEtfwP2Dwg.html
@FaresPerez
@FaresPerez 11 дней назад
@@classoutside Thanks for taking the time to reply. I ended up fixing the issue by uploading my model to mixamo, then downloading the armature with the animation set to my model. Then I imported the armature as you did in your video and that did the trick. I am not sure why, but downloading the standard mixamo armature and animation would not work, it would only work once mixamo interpreted my armature to it's animations.
@classoutside
@classoutside 11 дней назад
It is good to hear that you found a solution. I believe Mixamo attempts to set bone placements and weights with their software, similar to what can be done in Blender. Perhaps their solution worked better for your mesh in this case compared to Blender's.
@dinolover8558
@dinolover8558 2 месяца назад
A year later and you've saved my bacon, thank my lucky stars. 🙏
@classoutside
@classoutside 12 дней назад
I am glad I could support you by sharing this video :)
@lllllIIlIIIlIlIlIIl
@lllllIIlIIIlIlIlIIl 2 месяца назад
very helpful!
@classoutside
@classoutside 12 дней назад
I am glad I could share this video with you!
@ollllj
@ollllj 2 месяца назад
well actually, normalized quaternions may be used to represent spacetime and relativistic calculations and transforms between reference-frames, where w then is time of spacetime. But this is usually not a good way to do those calculations, almost certainly too slow AND too low precision in the needed context, compared to simpler functions that calculate the same, without relying on quaternions or complex numbers.
@classoutside
@classoutside 12 дней назад
It is interesting to consider how quaternions may be used in various ways, and the challenges like computational needs that come with them.
@ollllj
@ollllj 2 месяца назад
for almost all rotations, euler rotation will not return the smallest possible angle. for small angles, quaternions suffer a too big precision-loss. matrix of axis angle rotation is identical to quaternions, but axis-angle-forms needs more memory and multiplications, usually not worth the gained precision, unless you do less than 2 rotations in a chain-sequence and precision really matters. the second life wiki has a function, that reasonably efficiently first calculates the angle, and then only does euler-rotation if the angle is small enough so that precision of the result matters more than rotating around a single axis.
@classoutside
@classoutside 12 дней назад
I appreciate hearing your input. Taking the shortest path, or smallest possible angle, when rotating is often found when using spherical linear interpolation (SLERP) which is more common with quaternions, not euler rotation. As precision needs grow, it can be important to ensure calculations take those needs into account. I believe for 3D art and animation quaternions or euler values may be precise enough for most applications. I would have to research further to identify where either begins to be less precise. Computational efficiency can be very important. I was not aware of the second life function, thank you for sharing.
@eatmykwad
@eatmykwad 2 месяца назад
very helpful!
@classoutside
@classoutside 12 дней назад
I am glad this video could support you!
@iraf27
@iraf27 2 месяца назад
thanks for the 10 min trip outside from basement lab
@classoutside
@classoutside 12 дней назад
I am happy to share this brief trip outside with you!
@deedyago
@deedyago 2 месяца назад
So.... to animate rotation in unreal i have to rotate the object using 2-3 keyframes????WUUUUT
@classoutside
@classoutside 12 дней назад
When animating in unreal you may be able to mark keyframes agnostic of rotation type (Quaternion vs Euler) and instead rotate around the world axis with other controls. I would recommend trying this first and monitoring the output. If you were to use Quaternion values to represent the keyframes in the rotation, you may need to use 2-3 keyframes. While under some circumstances it can be argued that Quaternions can represent a 360 degree range of values, it may not be able to accurately represent a desired angle taken to traverse from 0 to 360 to perform a full rotation. I hope this helps.
@brunorios853
@brunorios853 2 месяца назад
You´re the best. Thank you :)
@classoutside
@classoutside 12 дней назад
I appreciate your compliment! I am glad I could share this with you! :)
@gvi341984
@gvi341984 2 месяца назад
The pronunciation game for Euler is the biggest meme. Who cares
@classoutside
@classoutside 12 дней назад
Thank you for sharing. Effectively communicating concepts with others can be challenging. Pronunciation rules can be relaxed in some settings and still lead to effectively discussing the same topics. I have met some people who find it very challenging to understand when pronunciation is improper. This can especially be true when trying to listen and understand a language that is new to someone.
@TimJSwan
@TimJSwan 2 месяца назад
I wonder if someone can manufacture a 4 ring device which has no gimbal lock
@classoutside
@classoutside 12 дней назад
A 4 ring device with no gimbal lock sounds like a very interesting one I would be interested in seeing!
@zhaohangyan792
@zhaohangyan792 2 месяца назад
Wonderful tutorial! Thanks! Just a quick suggestion: it will be perfect if you can zoom in a bit when showing the code 😂😂
@classoutside
@classoutside 12 дней назад
I appreciate your compliment and feedback. I will consider this for future videos and try to find ways to make the code being discussed more visually clear for those viewing.
@user-tz3cx8if7b
@user-tz3cx8if7b 2 месяца назад
Thank you so much! But How can I change the camera angle forward?
@classoutside
@classoutside 12 дней назад
What direction forward is can depend on interpretation, and possibly how the user chooses to scroll. In the mainView.js file, the camera.lookAt value determines the initial direction the camera is pointing, before any scroll occurs. It is currently set to point towards the final pint in the path used (0.99). To face the other direction you may try setting the value to (0.01). Depending on how you intend the user intends to scroll, adjustments may also need to be made to positionAlongPathMethod.js mainView.js: github.com/ClassOutside/ThreeJS_Camera_Follow_Path/blob/main/src/views/mainView.js positionAlongPathMethod.js: github.com/ClassOutside/ThreeJS_Camera_Follow_Path/blob/main/src/positionAlongPathTools/PositionAlongPathMethods.js
@mwerensteijn
@mwerensteijn 2 месяца назад
Very helpful, thank you!
@classoutside
@classoutside 12 дней назад
I am glad you found this video helpful. Thanks for your feedback :)
@e-jaytrip5859
@e-jaytrip5859 2 месяца назад
Why does my armature change shapes when i go from edit mode to object mode?
@classoutside
@classoutside 12 дней назад
Hello. The armature appearing differently in different modes can occur for a variety of reasons. Sometimes troubleshooting can be destructive, so if you have made animations or setup desired poses, it may be best to make a copy of your blend file first. One thing you could try is to apply any transforms (movements, rotations, scales) that have occurred to the armature. To do this, in object mode you can select the armature, press control + A, and select All Transforms. Another option that may be worth trying is to set the rest pose. I will share a link to another video where I describe how to perform this process: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-suEtfwP2Dwg.htmlsi=MbhkcpO0BmTaVkYh
@ypanso
@ypanso 2 месяца назад
Thank u i need to write a thesis dealing with the basics of 3d and this is helpful (no stem baxkground..)😅
@classoutside
@classoutside 12 дней назад
I am glad this video could help support you! Good luck on your thesis.
@kugayazilim
@kugayazilim 2 месяца назад
Hello. B2w blender to web. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tQ2h7LzspKI.htmlsi=jkeHqhlYsuzuZZv8
@fanusalameen3134
@fanusalameen3134 2 месяца назад
Hi there, I’ve created a steel cupboard 3d model using Blender and then I exported it as .glb using cycles engine, to use it in r3f. Now the problem is that, whenever I try to add AmbientLight or HemisphereLight the model is not getting lit up, the model is lit up only if I use DirectionalLight. What could’ve possibly gone wrong? Any tips or tricks to fix this?
@classoutside
@classoutside 12 дней назад
Hello. Lighting across different rendering engines can be challenging. Blender uses the cycles engine to calculate what the scene should visually look like. Other 3D software like game engines, or react 3 fiber (r3f), may use their own rendering engines which will calculate how the scene should look. For example, R3f uses the WebGL Rendering engine, which calculates differently than Blender's Cycles. This often results in the scene appearing visually different, including strange lighting. To troubleshoot this, I would start by taking a look at the material in blender. Texture maps like specular, metallic, roughness and normal can all affect how light interacts with an object. If you have any of these applied, one or multiple of them may cause the light to appear strange when in r3f. Complex materials exported from Blender are not always properly read by other programs. One way to see how your model, and its material, may appear when rendered by WebGL is to use the website: threejs.org/editor/ On this site you can load your 3D model along with its materials. You can add lights, and see what the object will look like under different conditions. You can also inspect the materials tab and review if all of your material maps have been loaded. There may also be values you can adjust, along with adding your desired lights, to test how the material will react and display in WebGL. I hope this explanation may help you towards finding a solution that fits your needs.
@jibran6635
@jibran6635 2 месяца назад
This was the video that finally makes me "get it" for gimbal locks. Maybe its just the fact that I have been watching several videos of gimbal lock but walking away with a half-ass understanding of it. I think the way you put it - the gimbals have to make a wierd detour to get to an angle which requires rotation in that "lost" degree of freedom and the fact that when the gimbal lock occurs any rotation applied to that axis goes to the "stable platform" hence losing the priced orientation it contained is what made me add it up.
@classoutside
@classoutside 12 дней назад
I am glad this video could be supportive in growing your understanding of gimbal locks! That detour concept can be tricky to comprehend at first, in combination with that "lost" degree of freedom. I appreciate hearing your experience, thank you for sharing it! :)
@vrednerboy
@vrednerboy 2 месяца назад
When I import the spline it is always closed. Even when it is set to false. Also, your project from github doesn't work on mac
@classoutside
@classoutside 12 дней назад
Hello. I appreciate you pointing this out. I believe the problem may stem from the terminal command 'npm run start-dev'. 'start-dev' is a script found in the package.json file, and represents a series of commands. This was written in a way that is readable by windows machines, and not MacOS or Unix machines. I have added a new script 'start-dev-unix' which should run on MacOS or Unix systems. To run this, you would need to either pull the change, or download the updated repository, and run the following in a terminal window 'npm run start-dev-unix'. I hope this may help. Also, thank you for pointing out that the spline is always appearing closed. It would take some further investigating and testing to confirm why this is. I believe at least part of it may be due to this curve.closed value being hardcoded to true for some reason: github.com/ClassOutside/ThreeJS_Camera_Follow_Path/blob/main/src/curveTools/CurveMethods.js
@dauthaicong
@dauthaicong 2 месяца назад
nice
@classoutside
@classoutside 12 дней назад
Thank you!
@drago9606
@drago9606 2 месяца назад
When I apply automatic weights and move the bones the mesh does not follow. What should I do?
@classoutside
@classoutside 12 дней назад
Hello. If you are trying to add an armature to a mesh, the process may be different than what is shown in this video. This video is to remove an armature from a mesh. One thing I try when I do not see the mesh follow when moving the bones is to check which mode I am in. In the top left of the 3D Viewport, there should be a drop down menu. This menu should have options like "Object Mode", "Edit Mode", and "Pose Mode". To see the effects of the bone's movement on the mesh, first select a bone, or the armature, then in the top left go to "Pose Mode" in the drop down. If the armature is applied effectively, the mesh should move with the bone(s).
@DucktorQuackers
@DucktorQuackers 2 месяца назад
you saved me a lot of pain. I was trying to arrange the UVs manually which took me so many hours and it still didn't turn out good. This was the perfect solution that I should of just researched earlier, d'oh. I'm new to blender and I have no idea how texture baking works.
@classoutside
@classoutside 12 дней назад
I am very happy to hear this video could save you from a challenging problem! I appreciate you taking the time to share your experience.
@Cartoonfixstudios
@Cartoonfixstudios 3 месяца назад
Hey, hope all is well. I’ve become a fan of your works especially the use of 3d. I’m currently working on a project that blends 3d with 2d characters. I like to do my character animation in 3d as a reference. This comes in handy with action scenes and complex camera movements too. My question is can you animate multiple animations in blender using the action editor. Tutorials I’m watching show this as a possibility. It looks like each animation would be a separate action and then edited together in NLA editor. Would all these animations have to be done with the character in place or does it matter. Hope this makes sense. Any feedback would be amazing, as I’m so stuck. Thank you and take care.
@classoutside
@classoutside 12 дней назад
Hello. I am glad to hear we both share an interest in 3D and I am happy it sounds like my work has left a positive impression with you. Blender can support multiple animations, and these can be set up in the action editor. The non-linear editor (NLA) should be helpful for blending and sequencing these animations together. For your question on if the character should be in place, when creating an animation it is common to begin from a static, common pose like a T pose or A pose. New animations would be created relative to that pose and added. It sounds like you may be on the right path. I hope this may assist you towards your solution and project!
@ryanmckenna2047
@ryanmckenna2047 3 месяца назад
That was a really good explanation, thanks!
@classoutside
@classoutside 12 дней назад
Your compliments are appreciated, thank you!
@ninalassig8708
@ninalassig8708 3 месяца назад
Thank you, saved my life
@classoutside
@classoutside 12 дней назад
I am glad my video could be of support for you!
@astralstormgamestudios1259
@astralstormgamestudios1259 3 месяца назад
What if I also want the normal ?
@classoutside
@classoutside 12 дней назад
For the normal map, and other maps to be copied, you could try and set the diffuse node to the normal map file, and then follow the same process. The maps (normal, roughness, diffuse, etc.) should all be image files, like a png or jpeg. In the shader editor view you should be able to change the image connected to the diffuse or color part of the mesh. If you change this for the other map you would like, it should copy to the lower poly mesh as the color map, if you follow the steps of this video. Then, in the image editor, you should be able to view the image and save it to a file. Afterwards you could repeat this process until all maps are saved. Then, in the lower poly model's shader editor view, you could import the maps in the image texture nodes and connect them to your material. I hope this may help!
@astralstormgamestudios1259
@astralstormgamestudios1259 12 дней назад
@@classoutside Ah yea, makes sense! Thanks 🙏
@KirbzXXX
@KirbzXXX 3 месяца назад
Very useful thanks!
@classoutside
@classoutside 12 дней назад
I appreciate your feedback!
@frankie_goestohollywood
@frankie_goestohollywood 3 месяца назад
Thank you 👍 🤓
@classoutside
@classoutside 12 дней назад
I am glad I could share this with you :)
@frankie_goestohollywood
@frankie_goestohollywood 12 дней назад
@@classoutside Me too 🙂
@meeravarsani6669
@meeravarsani6669 3 месяца назад
Thank you !! It helped me a lot!!
@classoutside
@classoutside 3 месяца назад
I appreciate your feedback and I am glad I could help you!
@mraman1521
@mraman1521 3 месяца назад
Is there a reason to use a gltf instead of a glb in three js, the goal is to interact with the model
@classoutside
@classoutside 3 месяца назад
Hello! The GLTFLOADER in ThreeJS should be capable of importing either GLB or GLTF files. There are other available loaders in Threejs if a different format suits your needs. I believe gltf is a common format and that is why I chose to use this.