положение трех js геометрий не меняется - PullRequest
Новая
       84

положение трех js геометрий не меняется

0 голосов
/ 22 марта 2020

Я поместил несколько сфер на свой холст, используя Три. 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). и на холсте я мог видеть только одну сферу.

Согласно трем документам. js, мне нужно go с vector3, чтобы указать позицию, но не похоже, что она работает.

Может ли кто-нибудь мне помочь?

1 Ответ

1 голос
/ 22 марта 2020

Геометрия не имеет положения в сцене - это просто группа треугольников. Вызов geometry.center() не принимает аргумента, а просто сдвигает все вершины в геометрии, чтобы они центрировались вокруг 0,0,0.

Если вам нужны разные сетки с одинаковой формой (геометрией) в разных местах, переместите каждую me sh в сцене, а не изменяйте геометрию . 

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.
...