Rendre Three.js dans un élément div

Je suis en utilisant Three.js. Avoir un site en html avec deux éléments div, est-il possible de rendre juste dans un élément div?

Code HTML:

<body>
    <div id="twocols">
        <div id="detailinfo">
            <span class="c">Detailinformationen:</span><br/>
            <span id="tb" class="g"></span><br/>
            <span class="c">Grafiken:</span>
            <div id="chart"></div>
            <div id="chart2"></div>
        </div>
        <div id="city">
        </div>                  
    </div>      
</body>

Je veux rendre dans la ville, div.

Three.js Code:

function initScene() {

            //container = document.createElement('div');
            //document.body.appendChild(container);

            scene = new THREE.Scene();
            createCamera();
            createLight();
            createProjector();
            createRenderer();
            createControls();

            //...
        }

createRenderer:

function createRenderer() {
            renderer = new THREE.WebGLRenderer({
                antialias : ANTIALIAS, 
                preserveDrawingBuffer : DRAWINGBUFFER
            });

            renderer.setSize(document.getElementById("city").offsetWidth, document.getElementById("city").offsetHeight);
            document.getElementById("city").appendChild(renderer.domElement);

            THREEx.Screenshot.bindKey(renderer); //add the printscreen shortcut with "p"
        }

createControls:

function createControls() {
            controls = new InteractionManager(camera, document.getElementById("city"));
            //...
        }

InteractionManager.js

initialize: function(camera, domElement) {

    this.object = camera;
    this.domElement = (domElement !== undefined) ? domElement : document;
    this.target = new THREE.Vector3( 0, 0, 0 );
    //this.chartManager = new ChartsManager();

    if ( this.domElement === document ) {
        this.viewHalfX = window.innerWidth / 2;
        this.viewHalfY = window.innerHeight / 2;
    } else {
        this.viewHalfX = this.domElement.offsetWidth / 2;
        this.viewHalfY = this.domElement.offsetHeight / 2;
        //alert(domElement.offsetWidth + "  " + domElement.offsetHeight);
        //this.domElement.setAttribute( 'tabindex', -1 );
    }

    //...
},

jusqu'à présent..

Salut, j'ai mis à jour mon premier post.

OriginalL'auteur MrGreen | 2012-04-26

  1. 3

    Au lieu de:

    container = document.createElement('div');

    Utilisation:

    container = document.getElementById('city');
    merci, pour le moment, je ne utilisez un récipient plus, mais ne fonctionne pas ainsi.
    Dur à dire. L'utilisation du débogueur (F12). Vérifiez ce que vous obtenez à partir de document.getElementById("city"). Et à propos de votre question initiale, sur le rendu dans un div, regardez cet exemple: jsfiddle.net/eLudu
    Le violon ci-dessus ne fonctionne pas pour moi, Juan. Affiche simplement une bordée boîte avec rien dedans.
    Essayez de jsfiddle.net/eLudu/81
    Presto! Comme par magie!

    OriginalL'auteur Juan Mellado