Question

我正在使用Three.js。有一个带有两个div元素的html站点，是否可以在一个div元素中呈现？

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>

我想渲染到城市div。

Three.js代码：

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

    //...
},

到目前为止..

Answer 1

而不是：

container = document.createElement('div');

使用：

container = document.getElementById('city');

将Three.js渲染为div元素

1 个答案: