Want to add another model over current model

Questions
1

Hi, I am new to threejs and unable to figure out how can I render one model over the other
I have two models one is of a man and another is of its cloth and I want to add those cloths over that man using threejs

Man Model - https://drive.google.com/file/d/1zcsy8Gui2or8MrST1HVBhk4E_TlXxrZn/view?usp=sharing

Cloths Model - https://drive.google.com/file/d/1pRbqYdfc5nz8ohAC3s_W9a7t9mlumrtL/view?usp=sharing

2

Hi, welcome to three.js.

Have you started to write some code ?
If so, post it here and be explicit about the problem you are encountering.
If not, here is a general article about importing things in three.js that might help you getting started.

3

import * as THREE from “three”;
import { GLTFLoader } from “three/examples/jsm/loaders/GLTFLoader”;
import { OrbitControls } from “three/examples/jsm/controls/OrbitControls”;

let scene: THREE.Scene,
camera: THREE.Camera,
renderer: THREE.WebGLRenderer,
model: THREE.Object3D;

function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}

export const init = (modelDivId: string) => {
//Scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);

//Renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.toneMappingExposure = 0.9;

//Ambient Light
const ambiLight = new THREE.AmbientLight(0xfffef2, 1);
ambiLight.castShadow = true;
scene.add(ambiLight);

//Spot Light
const spotLight = new THREE.SpotLight(0xf6cdb8, 1.05);
spotLight.position.set(140, 320, 300);
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1000;
spotLight.shadow.mapSize.height = 1000;
spotLight.shadow.camera.near = 0.2;
spotLight.shadow.camera.far = 2000;
scene.add(spotLight);

// var helper = new THREE.CameraHelper(spotLight.shadow.camera);
// scene.add(helper);

//Floor
const meshFloor = new THREE.Mesh(
new THREE.PlaneGeometry(500, 500, 500, 500),
new THREE.MeshPhongMaterial({ color: 0xececec })
);
meshFloor.position.set(-200, 0, -200);
meshFloor.rotation.x -= Math.PI / 2;
meshFloor.receiveShadow = true;
scene.add(meshFloor);

//Camera
camera = new THREE.PerspectiveCamera(
40,
window.innerWidth / window.innerHeight,
0.1,
5000
);
camera.position.z = 700;
camera.position.y = 200;

const modelDiv = document.getElementById(modelDivId);
if (!modelDiv) {
throw new Error(“No model container”);
}

modelDiv.appendChild(renderer.domElement);
new OrbitControls(camera, renderer.domElement);

const loader = new GLTFLoader();
loader.load("./model/FBX1.glb", function (gltf) {
gltf.scene.traverse(function (child) {
child.castShadow = true;
child.receiveShadow = true;
});
model = gltf.scene.children[0];
model.scale.set(1, 1, 1);
scene.add(gltf.scene);
animate();
});
};

4

Next time you post code, please use the “Preformatted text” option of this forum, it makes it easier to read for the three.js users who would like to help you.

Firstly I don’t understand why you have that at the beginning :

let scene: THREE.Scene,
camera: THREE.Camera,
renderer: THREE.WebGLRenderer,
model: THREE.Object3D;

Since you define everything lower with the global THREE.

Secondly, you’re not being very explicit about the issue you have… I will assume that you’ve tried to import a second model separately, and it was offseted relatively to your man model. In that case, you should import all your models in your favorite 3D software (the man and its cloths), position them, name them, and export in one glb file. Then when you import, you could do something like this :

const group = new THREE.Group();
scene.add( group );

let man, cloth;

loader.load( 'path/to/your/model.glb', (glb)=> {

  man = gltf.scene.getObjectByName('man');
  cloth = gltf.scene.getObjectByName('cloth');

  group.add( man, cloth );

});

This way you have a common space to move the man and its cloth around ( group ), but you can still access the meshes individually to hide/show them and update their materials.