Please have a look into this.
Can anyone identify what kind or what format of 3D object is loaded in this. I tried in the Network and resources from developer tools, But I couldn’t find.
It seems you share a link that leads to a 403 page.
Can you please try it now
is it working now? @Mugen87
Yep. It seems the website uses glTF.
I think so. But while trying to check the exact size of the gltf throught network in developer tools, I couldn’t find the gltf file. Then how this file is imported
Look for glb
files.
yes @Mugen87. I check glb also. I couldn’t find the base object. Just 20 small glb files only there. Total size of that is 4 MB. and when I try to download and open. It doesn’t get opened.
How to find the file which is used in this, We can find there are three .json files are available named as New_setting.json, AnimationData.json, materials.json. And also we can find the some other js file called draco_wasm_wrapper_gltf.js . So what is the relation between these. Because other than this, there is no raw glb or gltf file is available. @Mugen87 @donmccurdy @looeee @prisoner849 . I am just tagging these experts for getting answer quickly lol
I would recommend reaching out to the creators of this website to see if they are willing to share the content. Alternatively, there are many car models on Sketchfab — some for free, others require a small payment to the artist:
Thank you for your reply @donmccurdy. Actually I dont need any car models. I need to know, in which format and which type this model is imported in that Website. Because while checking the network section in developer tools of the chrome browser, I couldn’t find any object files such as .gltf, .fbx . I can see only some .js files which having the json format of the object. I am having an object already in gltf format. But the size of it is 35 mb. So I feel , this is not efficient for web. So I need to know, how this objects are imported using different .js or .json files.
This website is using about 5 MB of .glb
models, and 1 MB of .webp
textures.
If you have a glTF model of your own that is 35 MB and you would like to know how to reduce its size, I would recommend posting information about your model, or the model itself, and others will be able to help you compress it. The first step is usually to identify whether the model is large because of geometry or because of textures.
Yes @donmccurdy. this website having the car model as separate part like wheel, door, body. then the textures of those parts also being as individual as .webp files. So only the size is reduced. My doubt is, if an object is separated like this. Then how to combine those files within three js to build it to original car object.
GLTFLoader does not currently support .webp
files. Your application would need to know the names of the textures and load them separately, then attach them to the right materials.
If you’re sure that using .webp
textures is the solution that you need, I would suggest beginning to work on that, and then post your code if you get stuck.
Thank you for your explanation @donmccurdy. I am having another doubt also.
Please see this example http://carvisualizer.plus360degrees.com/threejs/
The Cubetexture is used here to create an environment like a car garage .
now the official example for cubetexture in this example https://threejs.org/examples/?q=cube#webgl_lightprobe_cubecamera
In this the distance between the object and the cubetexture is infinite. But in the first example, the car is placed on the bottom side of the cubetexture.
What makes this different.
I need to create an cubetexture like the car garage. How to do this. Can you please explain
The first link is not using a cube texture — they’ve used a fully 3D model for the room. You can see the 3D effect in the shadows and the grates above the car.
Try using glb
files instead of gltf
- it’s the same model format (glTF) but in binary instead of plain JSON text. It’s usually significantly smaller in size.
But I thought that shadow effect is created by setting environment to the material of the car object.
Please have a look into these two.
Please check the network section in developer tools. you will find the 6 images of the cubetexture. And I opened the source from the developer section. In that also, I found the cubetexture function. Can you please see these references. @donmccurdy
Yes, you are right @mjurczyk. But if we separate the file as part by part, then the files will be loaded parallelly. So, it will take less time to load the full object while comparing the object is being a single object.
The cube texture is probably being used for reflections on the surface of the car. That’s what the material.envMap
property does. The scene around the car is designed to match, but is a full 3D model. You cannot cast shadows on an environment map or cube texture alone.