Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在Three.js中向顶点添加点_Javascript_Three.js - Fatal编程技术网

Javascript 在Three.js中向顶点添加点

Javascript 在Three.js中向顶点添加点,javascript,three.js,Javascript,Three.js,我有一个线框球体,我想在顶点上添加点。类似于此: .: 以下是我所有的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(

我有一个线框球体,我想在顶点上添加点。类似于此:

.:

以下是我所有的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();


如何为每个顶点添加一个点?

下面是一个示例,说明如何获得类似的结果

我添加了一个名为“二十面体几何”的额外几何体类型,我使用它的顶点为线创建点,我使用的线是
MeshPhongMaterial
,线框设置为true

可以更改点的大小,也可以将其替换为形状/纹理

//额外的几何图形
三.二十面体几何=功能(半径、细节){
var t=(1+Math.sqrt(5))/2;
变量顶点=[-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
];
风险值指数=[
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
];
多面体几何。调用(此,顶点,索引,半径,细节);
this.type=‘二十面体几何’;
这个参数={
半径:半径,
细节:细节
};
};
三。二十面体几何。原型=对象。创建(三。多面体几何。原型);
三。二十面体几何。原型。构造器=三。二十面体几何;
//场面
var scene=new THREE.scene();
var摄像机=新的三透视摄像机(75,window.innerWidth/window.innerHeight,0.11000);
var renderer=new THREE.WebGLRenderer({
反别名:1
});
renderer.setClearColor(0xF7F7);
renderer.setSize(window.innerWidth、window.innerHeight);
document.body.appendChild(renderer.doElement);
scene.fog=新的3.fog(0xD4,8,20);
//创建顶点
var mesh=新的三面体。二十面体几何(10,1);//半径、细节
var顶点=网格顶点;
var positions=新的Float32Array(顶点.length*3);
对于(var i=0,l=vertices.length;i
正文{
保证金:0;
}
帆布{
宽度:100%;
身高:100%
}


不错,但是您的变量名令人难以置信地困惑
mesh
是几何体,
sphere
是点云,
mesh2
是Object3D
transparent
应该是一个布尔值。@WestLangley我已重命名它们以使其更有意义,并删除了
transparent
,因为该参数不适用于
LineBasicMaterial
是的。这是
材质的属性
。完美!谢谢大家