我正在尝试在 Threejs（Plexus 样式）上制作连接点的 3d 图，但由于某种原因，线条是“平坦的”（呈现在平面上而不是 3d 空间中）。
这是代码：
// Variables
var showred = false;
var nx = 0;
var ny = 0;
var radius = 20;
var randomcounter = 0;
var rotSpeed = 2.0;
// set up the scene
var scene = new THREE.Scene();
// set up the threejscamera to see the actual scene
var threejscamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100000);
scene.add(threejscamera);
threejscamera.position.x = -4000 + Math.random() * 2000;
threejscamera.position.y = 1000;
var cameracontrols = new THREE.OrbitControls(threejscamera);
cameracontrols.autoRotate = true;
cameracontrols.update();
// set up the renderer
var renderer = new THREE.WebGLRenderer();
window.onload = function() {
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 0);
document.body.appendChild(renderer.domElement);
}
// make the canvas adaptable to the window screen
window.addEventListener('resize', function() {
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
threejscamera.aspect = width / height;
threejscamera.updateProjectionMatrix();
});
// create the particle variable
var particlesCount = 150;
var particles = new THREE.Geometry();
var particlesMaterial = new THREE.PointsMaterial({
color: 0xffffff,
transparent: true,
opacity: 1.0,
sizeAttenuation: false,
size: 2
});
for (var i = 0; i < particlesCount; i++) {
var px, py, pz;
var lat = (i / particlesCount) * Math.PI;
for (var j = 0; j < particlesCount; j++) {
var lon = (j / particlesCount) * (Math.PI * 2);
var index = i * j + i;
var particle = particles.vertices[index];
var v = radius;
px = v * Math.sin(lat) * Math.cos(lon);
py = v * Math.sin(lat) * Math.sin(lon);
pz = v * Math.cos(lat);
// add the particle to the array
var particle = new THREE.Vector3(px, py, pz);
particles.vertices.push(particle);
}
}
// Add the line geometry to the code, connected to the particle system
var lines = new THREE.Geometry();
var lol = 0;
for (var i = 0; i < particlesCount; i++) {
var a = particles.vertices[i];
for (var j = 0; j < particlesCount; j++) {
var b = particles.vertices[j];
lines.vertices.push(a);
lines.vertices.push(b);
}
}
var line = new THREE.Line(lines, new THREE.LineBasicMaterial({
color: 0x00FFFF,
opacity: 0.1,
transparent: true
}));
scene.add(line);
// Create a new particle system with the particles and the material
var ParticleSystem = new THREE.Points(particles, particlesMaterial);
// Add the particle system to the scene
scene.add(ParticleSystem);
// Lights
var light = new THREE.PointLight(0x555555, 1, 10000, 2);
scene.add(light);
light.position.set(0, 1000, 0);
// red light, connected to the red particle system
var redlight = new THREE.PointLight(0xDE0000, .5, 20000, 2);
scene.add(redlight);
redlight.position.set(0, 1300, 0);
// update function
const updateThreejs = function() {
for (var i = 0; i < particlesCount; i++) {
// latitude for the spherical coordinate system
var lat = i / particlesCount * Math.PI;
for (var j = 0; j < particlesCount; j++) {
// longitude for the spherical coordinate system
var lon = j / particlesCount * Math.PI;
// Get the index of this particle
var index = i + j * particlesCount;
// get a copy of the particles
var particle = particles.vertices[index];
// get the new values
var v = radius;
// Spherical coordinates
var sinlat = Math.sin(lat);
var coslat = Math.cos(lat);
var coslon = Math.cos(lon);
var sinlon = Math.sin(lon);
particle.x = v * sinlat * coslon;
particle.y = v * sinlat * sinlon;
particle.z = v * coslat;
}
}
// flag to the particle system and the lines geometry
// that we've changed its vertices.
particles.verticesNeedUpdate = true;
lines.verticesNeedUpdate = true;
lines.__dirtyvertices = true;
cameracontrols.update();
};
// render function
var render = function() {
// let's render the actual scene, first parameter is the scene, second the threejscamera
renderer.render(scene, threejscamera);
};
// Game Loop function (update, render, repeat)
var drawThreejs = function() {
requestAnimationFrame(drawThreejs);
// update and render
updateThreejs();
render();
};
drawThreejs();
结果如下：
这些线在 3d 世界中的 2d 表面上渲染，但它们不是 3d 的（所有点都应该相互连接）。
谢谢！
编辑：最终结果应该与此类似，如果点在草图开始时处于一定距离，则它们会相互连接（不关心形状，而是关心它是如何渲染的，而我的草图仅在一个二维平面）。
