Three.js:我可以创建网格来替换很多对象吗

Three.js : Can i create mesh to replace lot of object

本文关键字：替换 多对象 网格 js 我可以 创建 Three      更新时间：2024-05-14

这是我工作的链接：maison.whiteplay.fr

我想做的是一个3D吃豆人，但看看代码，我正在使用网格来构建我的关卡，除了气泡（黄色圆圈），你需要吃才能获胜。它们都是不同的物体，但因为它们很多，它是滞后的，我能对气泡使用相同的技术（我想是网格）吗？如果是，如何？

代码：

var geometrySphere = new THREE.SphereGeometry( 5, 32, 32 ); 
var bille = function(x,z){ 
    this.bille = new THREE.Mesh(
        geometrySphere, 
        new THREE.MeshBasicMaterial( {color: 0xffff00} )
    );
    this.bille.position.x = (x-15.5)*100; this.bille.position.y = 100;  
    this.bille.position.z = (z-15.5)*100; scene.add(this.bille); 
}

感谢您的阅读，如果您对我的代码有任何建议，请不要犹豫：D

您也可以重用您的材料，而不是一直创建新实例：

var geometrySphere = new THREE.SphereGeometry( 5, 32, 32 ); 
var billeMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var bille = function(x,z){ 
    this.bille = new THREE.Mesh(
        geometrySphere, 
        billeMaterial
    );
    this.bille.position.x = (x-15.5)*100; this.bille.position.y = 100;  
    this.bille.position.z = (z-15.5)*100; scene.add(this.bille); 
}

重复使用材料对性能有很好的影响。

如何复制网格/对象？

您的代码几乎是正确的。

在特定情况下，对于N个相等的球，必须有N个网格，但只有一种材质。

这样，如果你只想给一个球上色（只是举个例子），你必须给它应用一种新的材料，否则你会给所有的球应用新的颜色。

在您的情况下，滞后可能是由于球体结构造成的。

您可以清楚地从文档中复制和粘贴，而无需事先阅读。

var geometrySphere = new THREE.SphereGeometry( 5, 32, 32 );

其中，如文件中所述：

radius — sphere radius. Default is 50.
widthSegments — number of horizontal segments. Minimum value is 3, and the default is 8.
heightSegments — number of vertical segments. Minimum value is 2, and the default is 6.

32*32对于你的小单色泡泡来说太多了，没有意义。

该值越高，绘制每帧的复杂度就越高。

我建议您创建具有少量垂直/水平线段的球体（8*8可能可以）。

看看这个演示。

相关文章：