La página tiene un divs con clases "skin" , "skin2" , "skin3" ... Y para cada clase necesitas colocar tu modelo 3d.
Estoy tratando de hacer esto, pero todos los modelos 3D están vinculados al primer modelo.
Quiero hacer esto usando el ejemplo de este sitio minecraft-skins
Resultados del código de imagen
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>Su código crea un renderizador. En la primera llamada a .insertBefore() , ese renderizador pone su contexto en el skin div . En la segunda llamada a .insertBefore() , ese contexto se mueve fuera del skin div y dentro del skin1 div ; en ese momento, no se realiza ninguna representación dentro de skin .
Para lograr lo que desea, es mejor crear un renderizador que cubra toda la ventana. Luego puede usar el método .setScissor() del renderizador para renderizar dentro de los límites de cada div . Three.js proporciona un ejemplo de esto.