three.js 初学技巧「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」本文总结几条

「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」

本文总结几条three.js的技巧，对于初学者经常问的为什么我什么都看不到？，做了总结。

背景

对于初学者可能已经学习了threejs的几个基本教程，看文档操作一切都很好。但是现在您正在创建自己的应用程序，并且您已经按照教程中的说明进行了所有设置。最后你什么都看不见！有过吗？？

如果有过可以看看下面几个技巧同时也可以采取以下措施来帮助自己找出问题所在。

对的，对于初学者要学会查看浏览器，检查浏览器报错，查看是否有错误信息，如果有你可以解决它。

是的，如果背景是一块黑色画布，物体也是黑色,那即使画布上有物体，你也看不见；如果你只能看到黑色，那么就很难判断是否正在发生某些事。可以尝试将背景颜色设置为红色：

import { Color } from "./vendor/three/build/three.module.js";

scene.background = new Color("red");

这样你得到一个红色的画布，那么至少你的renderer.render方法是正常工作的，你可以找出还有什么其他问题。

就像在现实世界中一样，three.js 中的大多数材质都需要光线才能看到，除一些自发光的材质。

let light = new THREE.AmbientLight( 0x404040 ); // soft white light 
scene.add( light );

MeshBasicMaterial是一种不需要光线就能看到的材料。如果无法显示对象，可以使用MeshBasicMaterial临时替代场景中的所有材质。如果你这样做时，物体神奇地出现了，那么你的问题是光线不足。

import { MeshBasicMaterial } from "./vendor/three/build/three.module.js";

scene.overrideMaterial = new MeshBasicMaterial({ color: "blue" });

如果对象不在视锥体内，它将被剪裁。尝试将远剪裁平面变大：

camera.far = 100000;
camera.updateProjectionMatrix();

记住这只是为了测试！相机的平截头体是以米为单位测量的，为了获得最佳性能，你应该尽可能地缩小它。一旦场景设置好并正常工作，就尽可能减小平截头体的大小。

默认情况下，所有内容都在原点（0,0,0）处创建。确保您已将相机向后移动，以便可以看到您的场景！

camera.position.z = 5;

因为threejs的一个单元在是一米，初学者很容易搞错单位，导致渲染的比例不对，如果太大就有可能看不见，太小就是一个点。

let camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );