The page has a divs with classes "skin", "skin2", "skin3"... And for each class you need to place your 3d model.
I'm trying to do this, but all the 3d models, are tied to the first model.
I want to do this using the example of this site minecraft-skins
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 0.1, 50);
camera.position.z = 20;
camera.position.y = 1.5;
camera.position.x = 0;
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setClearColor(0x000000, 0);
renderer.setSize(200, 300);
renderer.gammaOutput = true;
var light = new THREE.AmbientLight();
scene.add(light);
let loader = new THREE.GLTFLoader();
loader.load('/Стив.gltf', function (gltf) {
let obj = gltf;
document.getElementsByClassName('skin')[0].insertBefore(renderer.domElement, document.getElementsByClassName('skin')[0].firstChild);
scene.add(obj.scene);
obj.scene.scale.set(4.8, 1.5, 4.9);
obj.scene.rotation.y += 3.6;
obj.scene.rotation.x += 0.06;
});
loader.load('/Стив1.gltf', function (gltf2) {
let obj = gltf2;
document.getElementsByClassName('skin1')[0].insertBefore(renderer.domElement, document.getElementsByClassName('skin1')[0].firstChild);
scene.add(obj.scene);
obj.scene.scale.set(4.8, 1.5, 4.9);
obj.scene.rotation.y += 3.6;
obj.scene.rotation.x += 0.06;
});
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
<!DOCTYPE html>
<htm>
<head>
<title>Skins</title>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
</head>
<body>
<div class="block">
<div class="skin">
</div>
</div>
<div class="block">
<div class="skin1">
</div>
</div>
<script src="./script_01.js"></script>
</body>
</html>
Your code creates one renderer. On the first call to .insertBefore(), that renderer puts its context in the skin div. On the second call to .insertBefore(), that context is moved out of the skin div and into the skin1 div; at that point, there's no rendering being done inside of skin.
To achieve what you want, it's best to create a renderer that covers the whole window. Then you can use the renderer's .setScissor() method to render inside the limits of each div. Three.js provides an example of this.