我不确定为什么此 html 中有以下 css:
<!DOCTYPE html>
<html>
<head>
<title>Three.js</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src = "three.js"></script>
<script src = "script.js"></script>
</body>
</html>
似乎不影响 script.js:
var resolutionDivisor = 2;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth / resolutionDivisor, window.innerHeight / resolutionDivisor);
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;
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
render();
我正在尝试让three.js以一半的屏幕分辨率渲染，以提高渲染速度，并使用CSS将 Canvas 拉伸(stretch)到屏幕大小，但CSS似乎并没有影响 Canvas ，所以 Canvas 不占全屏。
我正在使用谷歌浏览器。
可以找到下载here .
最佳答案
问题是您正在设置渲染器大小，如下所示。
renderer.setSize(window.innerWidth / resolutionDivisor, window.innerHeight / resolutionDivisor);
因此您的 Canvas 将始终以主体高度和宽度的一半呈现。
此外，canvas 通过在 canvas 元素本身上放置 width/height 属性来工作。可以在此处找到有关使用 !important 的 hacky/不完整工作 http://jsfiddle.net/thewolff/3onsp221/2/ .
但实际上您应该在调整窗口大小时更新宽度/高度以保持比例准确。
关于javascript - CSS 不适用于设置 Canvas 大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28441505/