问题:我创建的 Three.js 3d 立方体启用了线框或轮廓模式属性。它在台式机/平板电脑上可以正常工作，但是当限制在移动设备上时，它会变得非常薄且无法使用。我想阻止这种情况发生并保持相同的台式机/平板电脑线框重量，但也适用于移动设备。
示例:以下是展示该行为的屏幕截图列表。
- 桌面(限制在 chrome 浏览器中模仿 iPhone 6 的大小)-
- 手机(iOS Chrome 浏览器中的实际 iPhone 6 尺寸)-
这是我当前的代码:
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, window.innerHeight );
document.body.appendChild( renderer.domElement );
//makes the site responsive
window.addEventListener('resize', function(){
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
var geometry = new THREE.BoxGeometry( 1.5, 1.5, 1.5 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function render() {
requestAnimationFrame( render );
cube.rotation.x += 0.025;
cube.rotation.y += 0.025;
renderer.render( scene, camera );
}
render();html,body {
margin: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
background-color: black;
}
h1 {
font-family: 'Maven Pro', sans-serif;
font-size: 3em;
}
p {
font-family: 'Lato', sans-serif;
font-size: 1em;
}
#textthing {
position: absolute;
margin-bottom: 60px;
color: #00FF00;
/**height: 90%;**/
width:100%;
text-align: center;
bottom: 0;
}
<link href='https://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>
<div id="textthing">
<h1>weeflix LLC</h1>
<!--<h2>Coming soon.</h2>-->
<p>Jake Schnieder || Thomas Bisnitsz</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>
最佳答案
尝试将此行添加到您的 <head>节
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
关于javascript - 如何修复 Three.js Cube 细线框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38447445/