Displaying model and object in same scene

Questions
1

I tried to display a .gltf model and a 3d geometry in a single scene. But seems like its not working.

<!DOCTYPE html>

<script>
  let scene, camera, renderer;
  function init() {
    //creating screen
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xdddddd);
    //creating camera
    camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
    camera.rotation.y = 45/180*Math.PI;
    camera.position.x = 800;
    camera.position.y = 100;
    camera.position.z = 1000;
    //rendering
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild(renderer.domElement);
    controls = new THREE.OrbitControls(camera, renderer.domElement );
    //lights       
    hlight = new THREE.AmbientLight (0x404040,100);
    scene.add(hlight);
    directionalLight = new THREE.DirectionalLight(0xffffff,100);
    directionalLight.position.set(0,1,0);
    directionalLight.castShadow = true;
    scene.add(directionalLight);
    light = new THREE.PointLight(0xc4c4c4,10);
    light.position.set(0,300,500);
    scene.add(light);
    light2 = new THREE.PointLight(0xc4c4c4,10);
    light2.position.set(500,100,0);
    scene.add(light2);
    light3 = new THREE.PointLight(0xc4c4c4,10);
    light3.position.set(0,100,-500);
    scene.add(light3);
    light4 = new THREE.PointLight(0xc4c4c4,10);
    light4.position.set(-500,300,500);
    scene.add(light4);
    //cube
    var geometry = new THREE.BoxGeometry( 100, 100, 100 );
    var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    console.log("cube added")


    
    //loading model
    let loader = new THREE.GLTFLoader();
    loader.load('scene.gltf', function(gltf){
      car = gltf.scene.children[0];
      car.scale.set(0.25,0.25,0.25);
      car.position.set(0,0,100);

      scene.add(gltf.scene);
      animate();
    });
 
  }
  function animate() {
    renderer.render(scene,camera);
    requestAnimationFrame(animate);
  }
  init();
</script>

GLTFLoader.js (81.6 KB) index.html (2.6 KB) OrbitControls.js (25.0 KB) scene.gltf (161.0 KB) styles.css (79 Bytes) three.min.js (596.3 KB)

alloy_metallicRoughness
alloy_metallicRoughness512×512 154 KB
alloy_metallicRoughness
alloy_metallicRoughness512×512 154 KB
alloy_metallicRoughness
alloy_metallicRoughness512×512 154 KB
alloy_metallicRoughness
alloy_metallicRoughness512×512 154 KB
headlights_normal
headlights_normal512×512 293 KB
license_baseColor
orange_glass_normal
orange_glass_normal512×512 293 KB
alloy_metallicRoughness
alloy_metallicRoughness512×512 154 KB
Plane.035__0_baseColor
Plane.035__0_baseColor2048×4096 32.2 KB
Plane.035__0_metallicRoughness
Plane.035__0_metallicRoughness512×512 154 KB
stickers_baseColor
stickers_baseColor1024×1024 122 KB
tire_metallicRoughness
tire_metallicRoughness2048×2048 2.58 MB

2

Please always share the asset (in this case scene.gltf) with all related textures if you are reporting such issues.

1 Like
3

I have added the file :slight_smile:

4

Like I said in the previous post, please share all related textures and the respective .bin file. Otherwise it’s not possible to load the asset.

5

Thankyou for the patience. I think its all uploaded now

6

I can’t find scene.bin. BTW: Consider to pack everything into a glb file which is actually the recommended format if you use the glTF asset in production. You can perform the conversion with this tool:

7

She will not be able to upload it, unfortunately,

  "buffers": [
    {
      "byteLength": 79061648,
      "uri": "scene.bin"
    }

this forum only allows 4M

8

Good point. In this case it’s actually better to share a github repo with the entire app.

10

@Mugen87 I got to bring both model and object to same scene.

  1. But here I need to scale the object like object1.scale.set(40,40,40) and car like car.scale.set(0.25,0.25,0.25) to be seen like this. Can I scale both together?
  2. The object should be attached to model. Any way to do that?
    Screenshot (30)
    Screenshot (30)1656×801 71.1 KB
11

Have you considered to add the object as a child to the model?

car.add( object1 );

When doing so the scaling of the car will also affect the scaling of object1.

12

@Mugen87 I tried doing that, but then when I use car.add(object1) the object1 is too tiny to be seen on the screen(as shown below).

Screenshot (33)
Screenshot (33)1919×849 123 KB
Screenshot (34)
Screenshot (34)1919×825 64 KB

And adding object as child of car is not making the object attached(merge) to the car :thinking:

13

Do you get better results by doing this:

car.attach( object1 );
14

@Mugen87 Unfortunately, there are no visible changes.
This is something that I am trying to achieve (ignoring the background, a car with a camera coverage as shown):
00011_PSISDG11143_111430C_page_11_2

15

If car’s scale is 0.25 and object1’s scale is 40, then after making the object1 a child of the car, it’s scale gets influenced by the parent and becomes 40 * 0.25 = 10. Your `object1 becomes 4 times smaller.

I think object3D.scale is meant more for many or continuous changes, as it uses matrices internally.

My recommendation would be to use geometry.scale instead of mesh.scale if you want to use one-time scaling, like adjusting models’ sizes before adding them to the scene. This way, parent-children hierarchies won’t get messed up.

16

@DolphinIQ Then how do we know that the scaling of object1 syncs with object2 ?

17

BufferGeometry.scale() does not affect parent-child relations, so you will be able to freely scale both objects without worry.

18

The thing is that the size of child should be relative to parent as well :pleading_face:

19

You can scale them both with parent.scale or individually with each object.geometry.scale (but dont scale geometry in a loop)