ShadowMap

I have uploaded a glb file with an animation, and the animation is moving extremely fast, and I do not know why.

This is my character's animation code:

I'm trying to get some Morph Based Vertex animations going, but I'm getting #342 errors telling me that:

I'm pretty new to threeJS and i wanted ton have the shadow of the torus to be casted on the PlaneGeometry behind it.

I tried to play with .castShadow & .receiveShadow but with no result

Could you explain what I did wrong ?

I'm diving into the world of threejs. I have taken one of the example projects and modified it. I just added a few cube geometries with color on it. The problem is, the cube geometry shows with no edges. You cannot distinguish where the faces end, its all bleached out. Not sure if this is a lighting issue, or material issue. My code is below.

Im having quite a bit of trouble adding an environment map to a loaded GLTF / GLB file, as of now I get some sort of reflection instead of a black dot with a light point on it,

I was reading a bit of the document for three js and think I can pull it off with the standardmeshmaterial and applying it somehow to the object(gltf) and adding the mesh into the scene. I tried a similar mockup but the item disappears. I dont know how to go about it, help guys.

This is the environment map im trying to apply to it, (or something similar) https://hdrihaven.com/files/hdri_images/tonemapped/8192/venice_sunset.jpg

here is the codepen I am working on https://codepen.io/8AD/pen/XWpxmpO

HTML

So im working on a website for a client and want to move a script that i've built in codepen into a div container in html elementor, everytime i add it into the website (elementor) it places the window at the bottom of the page and not into the container.

Update

Trying to move JS into a Div container to add to specific part of website, would a document.getElementById work? and how should i go about it??

I've tried to add it within the web builder via wordpress but when i attach the JS via elementor, it takes the script and applies / views it on the bottom of the page under the footer, I just want the script to be viewable in a specific section.

HTML

I've been following some tutorials to make this simple sandbox with a test .glb file.

https://codesandbox.io/s/zen-black-et9cs?file=/src/App.js

Everything seems to work except the shadows. I can't find any missing castShadow/recieveShadow/shadowMap declarations anywhere... just not sure what I'm missing.

Thanks if you can point to my mistake!

I want to implement selective bloom for an imported GLTF model in ThreeJS using an Emission map.

To achieve this I am supposed to first make the objects that should not have bloom completely black and using the UnrealBloomPass and the ShaderPass I'm going to mix the bloomed and non-bloomed effect passes together somehow.

I need to use GLSL code, which I'm only barely familiar with. Here is my basic setup:

View Example In JSFiddle

In my project I want to display 3d objects which sometimes have small LED lights. The idea is, that these small lights need to be emitting some kind of bloom to make it look like they are glowing.

I've tried to apply the UnrealBloom however it is considered for the entire scene and not just for the parts that have the actual emission value (using an emission texture map).. the scene gets very blurry as well.

This is obviously not what I wanted. I only need the little red LED light bulp to glow not the entire object. However I have not yet found a way to tell the engine to only apply the bloom to where the emission map is pointing at.

I'm using a very simple code setup which is almost the same as the UnrealBloom Example:

How can I setup the emission texture correctly and make only the emissive parts of the object glow and prevent the unrealistically shiny surfaces and very blurry visuals?

UPDATE: Editable example of my setup is now available on JSFiddle!