对threejs的工作方式感到困惑答案

【问题标题】：Confused upon how threejs works对threejs的工作方式感到困惑
【发布时间】：2019-03-18 18:56:36
【问题描述】：

我在这个 html/css 代码中使用了示例代码和一个旨在使用 three.js 创建 3D 立方体的脚本。

当我打开 HTML 文件时，我会在 chrome 中看到一个空白页面，其中只有“canvas { width: 100%; height: 100% }”

这是我的代码：

<html>
   <head>
      <title>My first Three.js app</title> &lt;style>canvas { width: 100%; 
height: 100% }</style>
   </head>
   <body>
      <script src="js/three.min.js"></script>
      <script>
         var scene = new THREE.Scene();
         var camera = new 
THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 1,10000);
         var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, 
window.innerHeight);document.body.appendChild(renderer.domElement);
         var geometry = new THREE.BoxGeometry(700, 700, 700, 10, 10, 10);
         var material = new THREE.MeshBasicMaterial({color: 0xfffff, 
wireframe: true});
         var cube = new THREE.Mesh(geometry, material); scene.add(cube);
         function render() {
             requestAnimationFrame(render);
             cube.rotation.x += 0.01;
             cube.rotation.y += 0.01;
             renderer.render(scene, camera);
         }
         render();
      </script>
   </body>
</html>

【问题讨论】：

请不要提供您的代码图片。将其复制并粘贴到问题的正文中。

标签： html css three.js 3d

【解决方案1】：

您的相机可能是从立方体内部开始的。

尝试添加：

camera.position.set (0,0,1000)

也许：

camera.lookAt (new THREE.Vector3 (0,0,0))

创建相机之后。

另一种选择是只运行以下 sn-p 然后检查它是否有线索：

var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize( w,h );
document.body.appendChild( renderer.domElement );

var scene = new THREE.Scene();
  	var camera = new THREE.PerspectiveCamera(
	45,		// Field of view
	w/h,	// Aspect ratio
	0.1,		// Near
	10000		// Far
);
camera.position.set( 15, 10, 15 );
camera.lookAt( scene.position );
controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.PointLight( 0xFFFF00 );
light.position.set( 20, 20, 20 );
scene.add( light );
var light1 = new THREE.AmbientLight( 0x808080 );
light1.position.set( 20, 20, 20 );
scene.add( light1 );
var light2 = new THREE.PointLight( 0x00FFFF );
light2.position.set( -20, 20, -20 );
scene.add( light2 );
var light3 = new THREE.PointLight( 0xFF00FF );
light3.position.set( -20, -20, -20 );
scene.add( light3 );
  
var sphereGeom = new THREE.SphereGeometry(5,16,16);
for(var i=0;i<sphereGeom.vertices.length;i++){
  var v = sphereGeom.vertices[i];
  if(v.y<0) v.y=0;
}
sphereGeom.verticesNeedUpdate = true;
sphereGeom.computeFaceNormals();
sphereGeom.computeVertexNormals();

var material = new THREE.MeshLambertMaterial( { color: 0x808080 } );
var mesh = new THREE.Mesh( sphereGeom, material );
scene.add( mesh );
renderer.setClearColor( 0xdddddd, 1);


(function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
})();

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

【讨论】：

不幸的是，我仍然以“canvas { width: 100%; height: 100% }”的空白屏幕结束

【解决方案2】：

您的 sn-p 表明您在开头的 <style> 标签上有错字：

<title>My first Three.js app</title> &lt;style>canvas { width: 100%; height: 100% }</style>

应该是：

<title>My first Three.js app</title> <style>canvas { width: 100%; height: 100% }</style>

我怀疑这就是您看到页面上显示的文本的原因。

因此，画布可能会显示为 0x0，因此您看不到立方体。

调整样式标签，看看效果如何？

编辑：事实上，我认为 body 标签也需要设置为 100%，否则文档将没有任何高度。不妨试试这种风格标签：

<style>
  html, body { height: 100%; width: 100%; }
  canvas { width: 100%; height: 100% }
</style>

【讨论】：

我尝试了第二个样式标签，它清除了页面上显示的文本。不幸的是，我仍然看不到立方体，但这可能是由于我在正文中的代码？
是的，我会看看这个然后查看源代码 - threejs.org/docs/scenes/geometry-browser.html#BoxGeometry - 我看到你创建了一个 700x700x700 的盒子，正如 @manthrax 指出的那样，它可能会把你放在里面。我也不确定当你在没有任何照明的情况下设置场景时会发生什么。
你在学习什么教程？
好的，我会检查一下并考虑放置照明！
教程在这里：awwwards.com/…

【解决方案3】：

我发现我做错了什么：我错误地调用了three.js文件。

原来是：

<script src="js/three.min.js"></script>

但应该是：

<script src="./three.js"></script>

【讨论】：

Threejs 如果你正在为此苦苦挣扎，可能会有点吃力。可能有一百万种“画布”看起来“空白”的原因。从甚至没有画布到无法正确绘画。
如果您加载了一个没有任何 JavaScript 的 html 页面，您可能会发现这些问题，而不会像现在这样复杂。