Three.js基础入门系列（十）--END

01

Three.js性能优化建议

尽量共用相同的几何体和材质

如果你需要创建三百个简单的相同颜色的立方体模型：

我们尽量共用相同的几何体和材质：

删除模型时，将材质和几何体从内存中清除

使用remove()将模型从场景内删除掉，大家会发现内存基本上没有怎么降低。因为几何体和材质还保存在内存当中，我们需要手动调用dispose()方法将其从内存中删除。

在循环渲染中避免使用更新

这里的更新指的是当前的几何体、材质、纹理等发生了修改，需要Three.js重新更新显存的数据，具体包括：

几何体：

材质：

纹理：

如果它们发生更新，则将其设置为true，Three.js会通过判断，将数据重新传输到显存当中，并将配置项重新修改为false。

这是一个很耗运行效率的过程，所以我们尽量只在需要的时候修改，不要放到render()方法当中循环设置。

只在需要的时候渲染

如果在没有操作的时候，让循环一直渲染，属于浪费资源，接下来我来带给大家一个只在需要时渲染的方法。

1️⃣ 首先在循环渲染中加入一个判断，如果判断值为true时，才可以循环渲染：

2️⃣ 然后设置一个延迟器函数，每次调用后，可以将renderEnabled设置为true，并延迟三秒将其设置为false，这个延迟时间大家可以根据需求来修改：

3️⃣ 接下来，我们在需要的时候调用这个timeRender()方法即可，比如在相机控制器更新后的回调中：

如果相机位置发生变化，就会触发回调，开启循环渲染，更新页面显示。

4️⃣ 如果我们添加了一个模型到场景中，直接调用一下重新渲染即可：

02

代码封装案例

代码封装：让代码复用、让代码更清晰、容易维护。

案例截图：

案例目录结构

index.html文件

index.js文件

03

模型拖拽案例

引入相关文件和插件

完整代码