前言
在学习ThreeJs中，因为对参数和三要素（模型、相机、场景）的不理解，会踩很多坑，今天给大家分享一些我遇到的问题以及排查思路
问题：看不见模型
如果模型看不见，第一步就是看控制台有没有报错，排查方向就是按着三要素走，接下来就是真正的柯南环节
场景原因
- 如果页面为白色背景，那么很有可能是因为场景元素没有加入到指定的位置，可以打开
f12，检查是否有对应的canvas元素 - 如果页面为黑色背景，那么大概率是没有将元素加入到场景中，将模型加入场景即可
scene.add(mesh);
相机原因
在上篇文章中我们知道如果想要看的见模型需要将模型置于相机的截锥体里面，否则的话是看不见的
这时候我们就可以使用相机控件OrbitControls，它可以帮助我们实现以目标为焦点的旋转缩放,同时平移相机观察场景的操作
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
const controls = new OrbitControls(camera, renderer.domElement);
function render() {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
模型原因
如果上面两个都是没有问题，那么就是模型的问题，模型的话可能是因为选择的材质的问题，选择材质时需要分清楚是标准材质MeshStandardMaterial还是基础材质MeshBasicMaterial，如果是标准材质的话是需要有光源才可以看到,下面展示如何加入一个平行光源
const light = new THREE.AmbientLight(0x404040, 1);
scene.add(light);
以上就是一些新手比较容易踩的坑，后续我会继续分享我遇到的问题，也欢迎大家在评论区分享自己的疑难杂症！
