My attempt at centering an object inside a div on my website using JS code has hit a roadblock. Despite trying various posted solutions, I haven't been successful. Any assistance would be greatly appreciated.
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js';
// Scene 1 - Landing Page
container = document.getElementById('canvas');
document.body.appendChild( container );
const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
container.appendChild( renderer.domElement );
const div = document.getElementById('container');
div.appendChild(renderer.domElement);
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( div.clientWidth, div.clientHeight,false);
const scene = new THREE.Scene();
const clock = new THREE.Clock();
const camera = new THREE.PerspectiveCamera(
50,
div.clientWidth / div.clientHeight,
0.1,
1000
);
const orbit = new OrbitControls(camera, renderer.domElement);
camera.position.x = 0
camera.position.y = 2
camera.position.z = 6
orbit.enabled = false
orbit.minDistance = 7;
orbit.maxDistance = 7;
orbit.update();
const gltfLoader = new GLTFLoader();
const rgbeLoader = new RGBELoader();
renderer.linearEncoding = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 10;
let obj1;
rgbeLoader.load('./assets/MR_INT-005_WhiteNeons_NAD.hdr', function(texture) {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.environment = texture;
scene.background = null;
gltfLoader.load( './assets/scene.gltf', function ( gltf ) {
model = gltf.scene;
scene.add(model);
var textureLoader = new THREE.TextureLoader();
textureLoader.load( "./textures/material0_baseColor.png", function ( map ) {
model.material.map = map;
model.material.map.encoding = THREE.sRGBEncoding;
model.material.map.flipY = false;
model.material.needsUpdate = true;
});
mixer = new THREE.AnimationMixer( model );
gltf.animations.forEach( ( clip ) => {
mixer.clipAction( clip ).play();
obj1 = model;
} );
});
function animate(time) {
requestAnimationFrame( animate );
if (mixer)
delta = clock.getDelta();
mixer.update(delta);
renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);
window.addEventListener('resize', function() {
camera.aspect = div.clientWidth / div.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize( div.clientWidth, div.clientHeight,false);
});
});
This is the HTML structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="container">
<div id="canvas"></div>
</div>
<div id="container2">
<h1>
<span class="box"></span><span class="text"></span><span class="cursor">_</span>
</h1>
</div>
<script src="./js/scripts.js" type="module"></script>
<script src="./js/app.js" type="module"></script>
<!--
npm install @parcel/config-default -d
"staticFiles": {
"staticOutPath": "static"
}
-->
</body>
<script src="./js/scripts.js" type="module"></script>
<script src="./js/app.js" type="module"></script>
</html>
And the CSS styling.
@import url('https://fonts.cdnfonts.com/css/modern-typewriter');
html {
background-color: black;
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
#container{
background-color: blue;
float: right;
width: 500;
height: 500;
}
h1 {
position: relative;
font-size: 2vw;
font-weight: bold;
padding-top: 20vw;
padding-left: 5vw;
overflow: hidden;
color: aliceblue;
}
h1 .text {
font-family: 'MODERN TYPEWRITER', sans-serif;
font-weight: normal;
}
#container2{
float: left;
width: 50%;
}
The desired outcome can be seen https://i.sstatic.net/yc6JL.png.
Despite adjusting the camera positions and CSS script, the issue persists.