如何让三个js画布居中？
Edd*_*nck 1 javascript css canvas three.js
我的三个 js 画布有一个非常奇怪的（可能是故意的？）错误。我想让它不填满整个页面并将画布置于 div 内。
正如您在下面的代码中看到的，画布位于 div 内部。我什至添加了一些测试标题，以确保我不会在这里发疯，但画布似乎会自行移动到 div 之外，我不知道如何解决这个问题。
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
#test {
width: 100px;
height:100px;
margin: 0px auto;
border: 1px solid red;
}
</style>
<style type="text/css" src="css/main.css"></style>
</head>
<body>
<div id="test">
<h1>test1</h1>
<canvas id="canvasID"></canvas>
<h2>test2</h2>
</div>
<script src="https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js"></script>
<script src="three.js-master/build/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var canvas = document.getElementById("canvasID");
var renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize( window.innerWidth*0.9, window.innerHeight*0.9 );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function render() {
requestAnimationFrame( render );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
render();
if (Detector.webgl) {
init();
animate();
} else {
var warning = Detector.getWebGLErrorMessage();
document.getElementById('container').appendChild(warning);
}
</script>
</body>
正如您所看到的，画布已“神奇地”移动到其父 div 之外
在您的代码中，您有这一行将document.body.appendChild( renderer.domElement );画布附加到标签的末尾<body>。因此，您要在所需的 div 之外添加画布。
您可以使用简单的 javascript 选择器在该 div 中添加画布，例如：
document.getElementById('test').appendChild( renderer.domElement );
或者
document.querySelector('#test').appendChild( renderer.domElement );
这样，您就可以将渲染器添加到带有 .div 扩展名的 div内id="test"。让我知道它是否有效。