Question

我找到了一个用于创建带正方形的2D图的三个.js的示例：

// Global vars...
var container, camera, scene, geometry, mesh, renderer, controls, particles, colors;

// DOM element...
container = document.createElement('div');
document.body.appendChild(container);

// Camera...
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(00, 0, 75);

// Scene...
scene = new THREE.Scene();
scene.add(camera);

// Renderer...
renderer = new THREE.WebGLRenderer({
    clearAlpha: 1
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);                 

// Scatter plot...
scatterPlot = new THREE.Object3D();
scene.add(scatterPlot);

// Make grid...
xzColor = 'black';
xyColor = 'black';
yzColor = 'black';

// Plot some random points...
geometry = new THREE.Geometry();
colors = [];

for (var i = 0; i < 50; i++) {

    colors[i] = new THREE.Color(1, 1, 1);
    colors[i].setHSL(1000 / 2000, 1, 0.5);

    var material = new THREE.PointCloudMaterial({
        size: 5,
        vertexColors: THREE.VertexColors,
        transparent: true,
        useScreenCoordinates: false
    });

    material.color.setHSL(1.0, 0.2, 0.7);

    var vertex = new THREE.Vector3();

    var max = 50;
    var min = -50;

    vertex.x = Math.random() * (max - min) + min;
    vertex.y = Math.random() * (max - min) + min;
    vertex.z = Math.random() * (max - min) + min;

    geometry.vertices.push(vertex);

}

particles = new THREE.PointCloud(geometry, material);
particles.sortParticles = true;
scatterPlot.add(particles);

geometry.colors = colors;

animate();

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

它在网页上绘制正方形，但我想绘制圆圈。但是，我没有在代码中看到任何绘制正方形的位置。我的猜测＆＃39;可能是THREE.PointCloudMaterial设置了形状，但three.js documentation似乎没有记录。

所以任何想法如何绘制圆圈，以及在哪里找到文档......？

如何使用three.js绘制圆圈而不是正方形？

0 个答案: