时间戳

首页 > 解决方案 > 使用 three.js 的 3D 图

javascript - 使用 three.js 的 3D 图

问题描述

我必须使用three.js绘制一个 3D 散点图。我尝试了我提到的以下代码。代码正在运行，但图形看起来类似于 2D 图形。可以调整相机的位置以使其看起来像 3D 图形，但我无法映射相机的确切位置。

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>

标签： javascriptgraphthree.js3d

解决方案

您的计算机显示器是一个 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>

推荐阅读