Centrer three.js renderer.domElement (canvas) dans une div parente

J'ai du mal à comprendre comment «styliser» la sortie d'un moteur de rendu threejs dans un div html.

Par exemple, voici une scène simple:

jsFiddle

html:

<div id="myPlanet"></div>    

css:

body {
background : #000;
padding : 50px;
margin : 0;
}
#myPlanet {
width : 400px;
min-height: 400px;
margin : auto;
}

et un extrait du js:

// The WIDTH of the scene to render
var __WIDTH__  = 400,

// The HEIGHT ot the scene to render
__HEIGHT__ = 400,
// We need to define the size of the renderer
renderer.setSize(__WIDTH__, __HEIGHT__);

// Let's attach our rendering zone to our page
document.getElementById("myPlanet").appendChild(renderer.domElement);

La sortie est exactement centrée, dans la page résultante, si la largeur de l'élément (en css) correspond exactement à la largeur du rendu. Mais lorsque le div 'myplanet' est étendu (largeur) au delà des 400px du moteur de rendu, (c'est-à-dire en changeant les règles CSS à 600px largeur ou 100%) la sortie jsthree se trouve juste à gauche de l'élément.

Comment cela peut-il être centré? Dans CSS devez-vous créer un cas de règle spécial (par exemple, #myplanet img ou quelque chose) que vous pouvez ensuite styler? J'ai essayé de mettre 'margin: 0 auto;' dans les règles de myplanet mais il ne sera toujours pas centrer la sortie

0

1 Réponses

The

element is treated by default as an inline object, similar to the element. This makes it posibble to mix text and images by using float:left; or float:right; properties. I have added some text inside the parent div and a transparent red background in order to exhibit this behavior.

inline canvas

Dans ce scénario, vous avez deux options.

1) Set margin: auto for canvas element Also specify that the canvas should be treated by the browser's page rendering engine as a block element.

#canvas{
    display: block;
    margin: 0 auto;
}

Vous obtenez ceci:

disaply:block, margin:auto

2) Définissez text-align: center pour la div parente

En option, vous pouvez spécifier la propriété d'alignement vertical des éléments en ligne.

#myPlanet{
    text-align: center;
   /* vertical-align: middle; */
}

Je recommande fortement la première option.

text-align:center

0
ajouté
Brillant - merci Adrian. L'élément Canvas fonctionne très bien.
ajouté l'auteur Craig Wallace, source