我已将我的标签 Canvas 放入一个 div 中,用于 Bootstrap 布局,但 Canvas 比 div 容器大,并且它不会自行调整为 div 大小。我不明白这是什么原因。 现场示例:http://www.felpone.netsons.org/web-threejs/
<div class="row">
<div class="col-sm-8" style="background-color:lavenderblush;" id="ThreeJS" data-toggle="context" data-target="#context-menu"></div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
#ThreeJS canvas {
position: static!important;
padding: 1px!important;
margin: 1px!important;
background-color: rgba(188, 188, 188, 0.44)!important;
}
这是我的 threejs 代码:
var SCREEN_WIDTH = window.innerWidth-5, SCREEN_HEIGHT = window.innerHeight-5;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.01, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
var r = 4, phi = Math.PI/4, theta = Math.PI/4;
camera.position.set(r*Math.cos(phi)*Math.sin(theta),r*Math.sin(phi), r*Math.cos(phi)*Math.cos(theta));
// RENDERER
if ( Detector.webgl )
renderer = new THREE.WebGLRenderer( {antialias:true} );
else
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.autoClear = false;
// CONTAINER
container = document.getElementById( 'ThreeJS' );
container.appendChild( renderer.domElement );
// EVENTS
THREEx.WindowResize(renderer, camera);
THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
// CONTROLS
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.target = new THREE.Vector3(0, 0, 0);
最佳答案
您将渲染器大小(= Canvas )设置为 (window.innerWidth-5)/(window.innerHeight-5),几乎整页。首先在SCREEN_WIDTH
和SCREEN_HEIGHT
之前定义container
,然后将它们替换为:
var containerStyle = getComputedStyle(container,null);
var SCREEN_HEIGHT = parseInt(containerStyle.getPropertyValue('height')),
SCREEN_WIDTH = parseInt(containerStyle.getPropertyValue('width'));
在 THREEx.WindowResize
函数中相同:找到定义高度和宽度的位置,并将它们替换为这些值。
关于javascript - Threejs Canvas 不会调整到标签 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27723190/