在Three.js中添加點到頂點

Question

我有一個線框球體，我想向頂點添加點。類似這樣的東西：

：

這裏是我所有的JS：

var scene = new THREE.Scene(); 

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

var renderer = new THREE.WebGLRenderer({ alpha: true }); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

var geometry = new THREE.SphereGeometry(3.25, 32, 20); 
var material = new THREE.MeshLambertMaterial({ color: 0x43CC4C, wireframe: true }); 

var sphere = new THREE.Mesh(geometry, material); 
scene.add(sphere); 

var pointLight = new THREE.PointLight(0xFFFFFF); 
pointLight.position.x = 80; 
pointLight.position.y = 80; 
pointLight.position.z = 130; 
scene.add(pointLight); 

camera.position.z = 5; 

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

render(); 

[codepen here]

如何添加一個圓點，每個頂點？

Answer 1

下面是一個如何實現類似結果的示例。

我已經添加了一個名爲IcosahedronGeometry的額外幾何體類型，我使用它的頂點來創建點，因爲我使用的線條MeshPhongMaterial和wireframe設置爲true。

您可以更改點的大小或將其替換爲形狀/紋理。

// Extra geometry 
 
THREE.IcosahedronGeometry = function(radius, detail) { 
 
    var t = (1 + Math.sqrt(5))/2; 
 
    var vertices = [-1, t, 0, 1, t, 0, -1, -t, 0, 1, -t, 0, 
 
    0, -1, t, 0, 1, t, 0, -1, -t, 0, 1, -t, 
 
    t, 0, -1, t, 0, 1, -t, 0, -1, -t, 0, 1 
 
    ]; 
 
    var indices = [ 
 
    0, 11, 5, 0, 5, 1, 0, 1, 7, 0, 7, 10, 0, 10, 11, 
 
    1, 5, 9, 5, 11, 4, 11, 10, 2, 10, 7, 6, 7, 1, 8, 
 
    3, 9, 4, 3, 4, 2, 3, 2, 6, 3, 6, 8, 3, 8, 9, 
 
    4, 9, 5, 2, 4, 11, 6, 2, 10, 8, 6, 7, 9, 8, 1 
 
    ]; 
 
    THREE.PolyhedronGeometry.call(this, vertices, indices, radius, detail); 
 
    this.type = 'IcosahedronGeometry'; 
 
    this.parameters = { 
 
    radius: radius, 
 
    detail: detail 
 
    }; 
 
}; 
 

 
THREE.IcosahedronGeometry.prototype = Object.create(THREE.PolyhedronGeometry.prototype); 
 
THREE.IcosahedronGeometry.prototype.constructor = THREE.IcosahedronGeometry; 
 

 
// Scene 
 
var scene = new THREE.Scene(); 
 
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
 

 
var renderer = new THREE.WebGLRenderer({ 
 
    antialias: 1 
 
}); 
 

 
renderer.setClearColor(0xf7f7f7); 
 
renderer.setSize(window.innerWidth, window.innerHeight); 
 
document.body.appendChild(renderer.domElement); 
 

 
scene.fog = new THREE.Fog(0xd4d4d4, 8, 20); 
 

 
// Create vertex points 
 
var mesh = new THREE.IcosahedronGeometry(10, 1); // radius, detail 
 
var vertices = mesh.vertices; 
 
var positions = new Float32Array(vertices.length * 3); 
 
for (var i = 0, l = vertices.length; i < l; i++) { 
 
    vertices[i].toArray(positions, i * 3); 
 
} 
 

 
var geometry = new THREE.BufferGeometry(); 
 
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3)); 
 

 
var material = new THREE.PointsMaterial({ 
 
    size: 0.4, 
 
    vertexColors: THREE.VertexColors, 
 
    color: 0x252525 
 
}); 
 
var points = new THREE.Points(geometry, material); 
 

 
var object = new THREE.Object3D(); 
 

 
object.add(points); 
 

 

 

 
object.add(new THREE.Mesh(
 
    mesh, 
 
    new THREE.MeshPhongMaterial({ 
 
    color: 0x616161, 
 
    emissive: 0xa1a1a1, 
 
    wireframe: true, 
 
    fog: 1 
 
    }) 
 

 
)); 
 

 
scene.add(object); 
 

 
camera.position.z = 20; 
 

 
var render = function() { 
 
    requestAnimationFrame(render); 
 

 
    object.rotation.x += 0.01; 
 
    object.rotation.y += 0.01; 
 

 
    renderer.render(scene, camera); 
 
}; 
 

 
render();

body { 
 
    margin: 0; 
 
} 
 
canvas { 
 
    width: 100%; 
 
    height: 100% 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>