As far as I know there was no CSM implementation for three js since 2015 (correct me if I’m wrong) but I just found this demo, and so I implemented it in my project.
If anyone needed CSM for their project, check out vtHawk’s three-csm:
11 Likes
This looks really nice!
I wasn’t aware CSM had ever been in three.js. Searching around (if others are curious) revealed this thread on the topic.
I’m surprised by how little configuration CSM requires. Or relatively little, I did see you had to contribute a custom split option to get there. Set up the cascade splits, and near/far planes, and the rest is derived from the camera frustum? Very clean. 
3 Likes
Yes I agree! Right now it’s a separate “experimental” plugin and requires bunch of shenanigans to get working. It’d be nice to have it in three.js core.
There’s the famous road demo using CSM from 2013 running on r48.
Then, in r69, CSM stopped working, and so was officially removed in 2015, because “no one was maintaining, nor understanding, the old code”.
2 Likes
Glad to see 5 years later other people arise who share my view 
Sarcasm aside, I still think it’s the best shadowing solution for threejs before we get RTX on webgl or some such
3 Likes
hey
i have a question,how did you build the level ?
1 Like
In Blender. In addition to geometry and materials, I have collisions, spawn points, paths, etc. all defined in Blender using custom properties.
2 Likes
do you have tutorial how can i create in blender that list of properties ?
I haven’t followed any tutorials. It’s pretty simple as far as I’m concerned.
In the object’s custom properties, fill in any data you want. Here I have two keys:
- data = physics
- type = trimesh
When exporting gltf, check Custom properties:
Then once you load your gltf, access your data via userData:
gltf.scene.traverse(function(child)
{
if (child.hasOwnProperty('userData')) {
if (child.userData.hasOwnProperty('data')) {
if (child.userData.data === 'physics') {
if (child.userData.type === 'trimesh')
{
// Create trimesh physics object from child
I’m sure if you google “three.js gltf custom properties” there’ll be links to more detailed tutorials and guides…
6 Likes
thank you very much !
1 Like
It all highly depends on what specifically you want to do with the object in your application…
The name doesn’t matter. ‘trimesh’ is just my attribute that I use.
You can have ‘applyPhysics’ = 1 or ‘fruit’ = ‘banana’. The names don’t do anything on their own, they’re just strings or numbers attached to the object, nothing else. It’ll be whatever you find the most convenient, and then you need to parse and use the data in your application. It all depends on what specifically do you want to do.
Why do you need to use custom attributes? How specifically do you use them? What application are you working with?
Edit: Object names are also irrelevant and don’t do anything in the context of gltf export / import.
1 Like
if(meshes.name === “Ground”){
let ground = new THREE.Mesh(meshes.geometry, meshes.material);
ground.parent = meshes.parent;
ground.children = meshes.children;
ground.scale.copy(meshes.scale);
ground.position.copy(meshes.position);
ground.castShadow = false;
ground.receiveShadow = true;
scene.add( ground );
objects.push(ground);
}
is it correct to add parent and children, or i do need to loop ?
What are you trying to do?
I can’t help you because I don’t know what you are trying to do.
i want build static ground with some static objects and walk around that scene
hey ,i applied material reflection in Blender
and when i loaded to Three.js it looks like this https://a2d2.pw/ but in blender it is different https://a2d2.pw/image.html
how can i fix this issue ? you can see my code in https://a2d2.pw/
i already solved it, but i will create one, with how to set cannon.js with blender shapes