Как вставить 3D модель в блок Div?

Question

Имеется ячейка (DIV), в неё нужно поместить 3D модель ( canvas ). Как я могу это сделать? Пробовал <Sсript> поместить в <Див>, не выходит.

body {
  background: rgb(26, 26, 26);
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: row;
}
#Minecraft3D0bj {
}
.skin {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 300px;
  background: linear-gradient( 140deg,  rgba(30, 30, 30, 0.294) 0%,  rgba(17, 17, 17, 0.5) 100% );
  border: 2.1px solid rgb(70, 70, 70);
  border-radius: 10px;
  padding: 5px;
  margin: 3px;
  margin-right: 110px;
}

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Тесты</title>
    <link rel="stylesheet" href="main.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js "></script>

</head>
<body>
    <div class="skin">        
    </div>
        
    <script>
        scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 0.1, 50);
camera.position.z = 20;
renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});
renderer.setClearColor(0x300000, 3);
renderer. setSize(200, 300);
renderer.domElement.setAttribute("class", "Skin");
renderer.domElement.setAttribute("id", "Minecraft3D0bj");
document.body.insertBefore(renderer.domElement, document. body.firstChild);
scene.add(light);
let loader = new THREE.GLTFLoader();
let obj = null;
loader.load('/Стив.gltf', function(gltf) {
obj = gltf;
obj.scene.scale.set(4.5, 1.5, 4.5);
scene.add(obj. scene);
});

    </script>
</body>
</html>

Answer 1

У меня получилось найти решение. Я поменял document.body на document.getElementsByClassName('skin')[0]

    <script>
document.getElementsByClassName('skin')[0].insertBefore(renderer.domElement, document.getElementsByClassName('skin')[0].firstChild);
    </script>

<body>
    <div class="skin">
    </div>  
</body>

БЛОГ НА HUSL

Как вставить 3D модель в блок Div?

Ответы (1 шт):