Question

问题：我创建的Three.js 3d多维数据集启用了线框或大纲模式属性。它可以在台式机/平板电脑上正常工作，但当受限于移动时，它变得非常薄且无法使用。我想阻止这种情况发生，并保持相同的桌面/平板电脑线框重量，但也适用于移动设备。

示例：以下是展示行为的屏幕截图列表。

桌面（限制在Chrome浏览器中模仿iPhone 6大小） -

mobile（ios chrome浏览器中的实际iPhone 6尺寸） -

这是我目前的代码：

＆＃13;

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();

＆＃13;

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;

}

＆＃13;

   
<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>

＆＃13;

Answer 1

尝试将此行添加到您的setup()部分

<head>

See this MDN article for what setting the viewport does

如何修复Three.js Cube细线框？

1 个答案: