【js&threeJS】入门three，并实现3D汽车展示厅，附带全码

首先放个最终效果图：

 

三维（3D）概念：

三维（3D）是一个描述物体在三个空间坐标轴上的位置和形态的概念。相比于二维（2D）只有长度和宽度的平面，三维增加了高度或深度这一维度

在三维空间中，我们使用三个独立的坐标轴来描述物体的位置。通常使用笛卡尔坐标系，即X、Y和Z轴。其中，X轴表示横向，Y轴表示纵向，Z轴表示纵深或垂直方向。通过在这些轴上的不同值组合，可以确定一个点或对象在三维空间中的位置

大家可以three编辑器中感受一下三维：three.js editor

ps：默认英文，可以切换中文语言

three前提概念

以舞台展示为例：

• 场景 Sence 相当于一个舞台，在这里是布置场景物品和表演者表演的地方
• 相机 Carma 相当于观众的眼睛去观看
• 几何体 Geometry 相当于舞台的表演者
• 灯光 light 相当于舞台灯光照射控制 
• Controls 相当于这出舞台剧的总导演

创建场景与相机

PerspectiveCamera的详细说明：

new THREE.PerspectiveCamera构造函数用来创建透视投影相机，该构造函数总共有四个参数，分别是fov，aspect，near，far 。

fov表示摄像机视锥体垂直视野角度，最小值为0，最大值为180，默认值为50，实际项目中一般都定义45，因为45最接近人正常睁眼角度；aspect表示摄像机视锥体长宽比，默认长宽比为1，即表示看到的是正方形，实际项目中使用的是屏幕的宽高比；near表示摄像机视锥体近端面，这个值默认为0.1，实际项目中都会设置为1；far表示摄像机视锥体远端面，默认为2000，这个值可以是无限的，说的简单点就是我们视觉所能看到的最远距离。

引入模型

国外一个3d模型下载网站，里面有很多免费的模型下载  点击红框处下载

Log in to your Sketchfab account - Sketchfab

加载模型代码讲解：

loader.load 用来加载和解析 glTF 文件，接受四个参数：

• 第一个参数 url 是要加载的 glTF 模型文件的路径。
• 第二个参数是一个回调函数，当模型加载成功时会被调用
• 第三个参数是一个回调函数，用于跟踪加载进度。回调函数的 { loaded, total } 参数表示已加载和总共需要加载的文件数量，通过计算百分比可以得到当前加载进度。
• 第四个参数是一个回调函数，当加载出错时会被调用。

创建灯光

DirectionalLight 和 HemisphereLight 是 Three.js 中的两种灯光类型，分别表示平行光和半球光。它们用于模拟现实世界中的光照效果

此刻模型已经可以看见了，如何你只能看见黑黑的一片，无法看到模型，一般两个原因：

• 模型是否加载成功

try {
     gltf = await loadFile('./assets/scene.gltf');
     console.log('Model loading completed:', gltf);
} catch (error) {
     console.error('Error loading model:', error);
}

• 相机位置偏差，调整下相机(defaultMap)的位置

控制模型

这一步完成之后，模型就可以通过鼠标移动，旋转了

ps：这段代码没问题，可正常运行，前两三个可能会有些引入缺失或者声明变量的缺失，大家参考这个补齐，我就不去查漏补缺了

改变车身颜色

scene 有一个traverse函数，它回调了所有模型的子模型信息，只要我们找到对应name属性，就可以更改颜色，和增加贴图等等

        //设置车身颜色
        const setCarColor = (index) => {
            //Color 是 Three.js 中的一个类，用于表示颜色。它的作用是创建和管理三维场景中物体的颜色
            const currentColor = new Color(colorAry[index])
            // 使用 Three.js 中的 traverse 方法遍历场景中的每个子对象
            scene.traverse(child => {
                if (child.isMesh) {
                    console.log(child)
                    if (child.name) {
                        //将当前子对象的材质颜色设置为 currentColor，实现改变颜色的效果
                        child.material.color.set(currentColor)
                    }
                }
            })
        }

整个的完整代码：

    
    
    



    

        

            

                

            
            

        
        

            

            转动车
            停止
            

            
        
    
    
    
    

完结撒花*★,°*:.☆(￣▽￣)/$:*.°★* 。