Geek Answers Handbook

Render Three.js to div element

I am using Three.js. Having an html site with two div elements, is it possible to display only one div element?

HTML code:

<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>

I want to do in a city 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 );
    }

    //...
},

still..

+5
source share
1 answer

Instead:

container = document.createElement('div');

Using:

container = document.getElementById('city');
+3
source

More articles:


All Articles