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

Question

The problem : The Three.js 3d cube I created has a wireframe or outline mode attribute enabled. 问题：我创建的Three.js 3d多维数据集启用了线框或轮廓模式属性。 It works correctly on desktop/tablet but when constrained down to mobile, it becomes extremely thin and unusable. 它可以在台式机/平板电脑上正常工作，但是如果仅限于移动设备，它会变得非常薄且无法使用。 I would like to stop this from happening and keep the same desktop/tablet wireframe weight but for mobile as well. 我想阻止这种情况的发生，并保持相同的台式机/平板电脑线框重量，但也适用于移动设备。

Examples: Here are a list of screen shots demonstrating the behavior. 示例：以下是演示此行为的屏幕截图的列表。

desktop (constrained to mimic iPhone 6 size in chrome browser) - 桌面（仅限于在Chrome浏览器中模仿iPhone 6尺寸）-

mobile (actual iPhone 6 size in ios chrome browser) - 移动版（iOS chrome浏览器中的实际iPhone 6尺寸）-

Here is my current code: 这是我当前的代码：

 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>

Answer 1

Try adding this line to the your <head> section 尝试将此行添加到您的<head>部分

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

See this MDN article for what setting the viewport does 请参阅此MDN文章以了解viewport设置

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-07-19 00:06:53

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-07-19 00:06:53

解决方案1
0 已采纳 2016-07-19 00:06:53