Estoy usando Three.js. Tener un sitio html con dos elementos div, ¿es posible renderizar solo en un elemento div?Renderizar Three.js en un elemento div
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>
Quiero rendir en el div ciudad.
Three.js Código:
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);
}
//...
},
hasta ahora ..
Hola, he actualizado mi primer post. – MrGreen