Question 335903 in Html Question posted in
Some basic documentation can be found here.

Html – How can I center threejs object inside div?

I have this JS code, I am trying to center my object inside the div for my website. However I am unable to do it. I have tried posted solution but they did not work. I appreciate your help.

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);
});


});

Here is my html.

<!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 file.

@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%;
}

Here is how I need it to be.

enter image description here

I have tried fixing the camera positions and CSS script but it does not work.

Tags:

2

Answers


  1. 0

    In the end… This way is very easy. Just nest (put) them inside a container div.

    #leftbox {
        float: left;
        background: Red;
        width: 25%;
        height: 280px;
    }

    #middlebox {
        float: left;
        background: Green;
        width: 50%;
        height: 280px;
    }

    #rightbox {
        float: right;
        background: blue;
        width: 25%;
        height: 280px;
    }

    Taken from: geekforgeeks

    Login or Signup to reply.
  2. 0

    Try this. Keep in mind that you need to watch not only the position of the div’s, but also the positioning on the canvas. Think of it as a box within a box of the biggest box.

    body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }

        #container {
            display: flex;
            height: 100%;
        }

        #left {
            flex: 75%;
            background-color: black;
        }

        #right {
            flex: 35%;
            background-color: blue;
            position: relative;
        }

        canvas {
            width: 100%;
            height: 100%;
        }
    <script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/[email protected]/build/three.module.js",
      "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
    }
  }
</script>

<div id="container">
        <div id="left"></div>
        <div id="right"></div>
</div>


<script type="module">
import * as THREE from "three";
import GUI from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth * 0.3 / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor(0x000000, 0);
renderer.setSize(window.innerWidth * 0.3, window.innerHeight);
document.getElementById('right').appendChild(renderer.domElement);
camera.position.z = 5;

const geometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);
const material = new THREE.MeshBasicMaterial({
    color: 0xff00ff,
    wireframe: true
});
const cylinder = new THREE.Mesh(geometry, material);
scene.add(cylinder);

const gui = new GUI()
gui.add(cylinder.position, 'x', -5, 5).name('Position X');

function onWindowResize() {
camera.aspect = window.innerWidth * 0.3 / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth * 0.3, window.innerHeight);
}

window.addEventListener('resize', onWindowResize);
function animate() {
requestAnimationFrame(animate);
cylinder.rotation.y += 0.001;
renderer.render(scene, camera);
}
animate();
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search