'How to place two 3d models in different div? Three.js

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

Image code results

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/[email protected]/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
javascripthtmlthree.js


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Phil N.

Related Questions