三个 js 几何的位置不变

Question

我使用 Three.js 在画布上放置了几个球体。 为了显示不同位置的多个球体， 我使用如下代码。 但是，我只看到一个球体并检查我所做的球体的位置 console.log(xxx.clone());

var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 )
var camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 3000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// end template here


var coord =[{"x":10,"y":0,"z":10},{"x":20,"y":0,"z":30},{"x":30,"y":0,"z":50},
            {"x":40,"y":0,"z":70},{"x":50,"y":0,"z":90},
            {"x":60,"y":0,"z":110},{"x":70,"y":0,"z":90},
            {"x":80,"y":0,"z":70},{"x":90,"y":0,"z":50},
            {"x":100,"y":0,"z":30},{"x":110,"y":0,"z":10}]
var sphr =[];

function drawsphre(){
    for (let i =0; i<coord.length; i++){

        var geom = new THREE.SphereGeometry( 100, 50, 50);
        var a = new THREE.Vector3(coord[i].x*100, coord[i].y, coord[i].z*10)
        geom.center(a)
        var mat = new THREE.MeshBasicMaterial({color: "yellow"});
        sphr[i] = new THREE.Mesh( geom, mat);
        sphr[i] = new THREE.Mesh(geom,mat);
        scene.add(sphr[i]);
        console.log(sphr[i].clone())

    }
}
drawsphre();

camera.position.x = 400;
camera.position.y = 300;
camera.position.z = 1000;

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

// White directional light at 70% intensity shining from the top.
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
scene.add( directionalLight );

// movement


renderer.render(scene, camera);

然而， 控制台日志显示所有球体的默认位置为 (0,0,0)。 在画布上我只能看到一个球体。

根据three.js文档，我需要用vector3来指定位置，但它似乎不起作用。

有什么可以帮助我的吗？

Answer 1

几何体在场景中没有位置——它只是一堆三角形。调用geometry.center() 不需要参数，只是移动几何中的所有顶点，使它们以0,0,0 为中心。

如果您希望在不同位置具有相同形状（几何）的不同网格，请重新定位场景中的每个网格，而不是修改几何。

var geometry = new THREE.SphereBufferGeometry( 100, 50, 50);
var material = new THREE.MeshBasicMaterial({color: "yellow"});

for ( var v of coords ) {
  var mesh = new THREE.Mesh( geometry, material );
  mesh.position.set( v.x, v.y, v.z );
  scene.add( mesh );
}

其他几点说明：

• 尽可能重复使用几何图形和材质是最有效的。
• 使用*BufferGeometry 类而不是*Geometry 效率最高。