Трехмерный график с использованием трех js - PullRequest
Новая
       52

Трехмерный график с использованием трех js

0 голосов
/ 19 июня 2020

Мне нужно построить трехмерный график рассеяния, используя три js. Я попробовал следующий код, о котором упоминал. Код работает, но график похож на 2D-график. Положение камеры можно настроить, чтобы оно выглядело как трехмерный график, но я не могу отобразить точное положение камеры. 

let scene,camera,renderer,axes;
let set = [];

let createGeometry = function()
{
    set.push(new THREE.Vector3(5,5,10) );
    set.push(new THREE.Vector3(10,15,17));
    set.push(new THREE.Vector3(15,20,12));
    set.push(new THREE.Vector3(20,16,10));
    set.push(new THREE.Vector3(17,9,19));
    set.push(new THREE.Vector3(23,2,13));

    let setgeometry = new THREE.BufferGeometry().setFromPoints(set);
    let setmaterial = new THREE.PointsMaterial({ color : 0xff0000 , size : 10 ,sizeAttenuation : false});
    let plot = new THREE.Points( setgeometry , setmaterial );

    scene.add(plot);

}    
let init = function(){
    scene = new THREE.Scene;
    scene.background = new THREE.Color(0x000000);

    camera = new THREE.PerspectiveCamera(25 , window.innerWidth/window.innerHeight , 1 , 1000);
    camera.position.set(20,10,90);

    let axes =new THREE.AxesHelper(25);
    scene.add(axes);

    createGeometry();

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild(renderer.domElement);

};

let mainloop = function(){
    
    renderer.render(scene , camera);
    requestAnimationFrame(mainloop);
};

init();
mainloop();
html, body {margin: 0; padding: 0;overflow: hidden;}
<script src="https://cdn.jsdelivr.net/npm/three@0.117.1/build/three.min.js"></script>

1 Ответ

0 голосов
/ 19 июня 2020

Монитор вашего компьютера представляет собой 2D-плоскость с пикселями только по осям X, Y, поэтому без движения вы рискуете случайно сделать диаграмму плоской. Если вы хотите сделать третье измерение более очевидным, вам нужно просто добавить анимацию. В демонстрации ниже я вращаюсь вокруг центра, обновляя положение камеры на каждом кадре: 

camera.position.set(
    Math.sin(time) * 70,
    70,
    Math.cos(time) * 70);
camera.lookAt(0,0,0);


let scene,camera,renderer,axes;
let set = [];

let createGeometry = function()
{
    set.push(new THREE.Vector3(5,5,10) );
    set.push(new THREE.Vector3(10,15,17));
    set.push(new THREE.Vector3(15,20,12));
    set.push(new THREE.Vector3(20,16,10));
    set.push(new THREE.Vector3(17,9,19));
    set.push(new THREE.Vector3(23,2,13));

    let setgeometry = new THREE.BufferGeometry().setFromPoints(set);
    let setmaterial = new THREE.PointsMaterial({ color : 0xff0000 , size : 10 ,sizeAttenuation : false});
    let plot = new THREE.Points( setgeometry , setmaterial );

    scene.add(plot);

}    
let init = function(){
    scene = new THREE.Scene;
    scene.background = new THREE.Color(0x000000);

    camera = new THREE.PerspectiveCamera(25 , window.innerWidth/window.innerHeight , 1 , 1000);

    let axes =new THREE.AxesHelper(25);
    scene.add(axes);

    createGeometry();

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild(renderer.domElement);

};

let mainloop = function(t){
    let time = t / 1000;
    camera.position.set(
        Math.sin(time) * 70,
        70,
        Math.cos(time) * 70);
    camera.lookAt(0,0,0);
    renderer.render(scene , camera);
    requestAnimationFrame(mainloop);
};

init();
mainloop(0);
html, body {margin: 0; padding: 0;overflow: hidden;}
<script src="https://cdn.jsdelivr.net/npm/three@0.117.1/build/three.min.js"></script>
...