ThreeJS半球

Question

这很可能是一个非常简单的问题，所以提前道歉。

我正试着用ThreeJS制作一个3D半球。

我可以创建一个半球(如果我用错了词，一个球体，切成两半！)外部使用圆或CircleBuffer几何图形，但由于缺少更好的词，这会使平坦的一面“空”。

我试着用一个圆圈来填充它，但是没有成功。

我确信这只是一个添加一些东西来告诉几何体在那里添加另一个面的情况，但我不知道怎么做！

Answer 1

我的5克培卡。半球+圆：

​

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 5, 8);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
scene.add(new THREE.AxesHelper(5));

var radius = 3;
var radialSegments = 32;
var material = new THREE.MeshStandardMaterial({
  color: "blue"
});
var hemiSphereGeom = new THREE.SphereBufferGeometry(radius, radialSegments, Math.round(radialSegments / 4), 0, Math.PI * 2, 0, Math.PI * 0.5);
var hemiSphere = new THREE.Mesh(hemiSphereGeom, material);
var capGeom = new THREE.CircleBufferGeometry(radius, radialSegments);
capGeom.rotateX(Math.PI * 0.5);
var cap = new THREE.Mesh(capGeom, material);
hemiSphere.add(cap);

scene.add(hemiSphere);

render();

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

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.94.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.94.0/examples/js/controls/OrbitControls.js"></script>

​

Answer 2

你可以做到

new THREE.SphereGeometry(1, 32, 32, 0, 2*Math.PI, 0, Math.PI/2);

Answer 3

//Here's some code to modify a sphere into a hemisphere
var sphereGeom = new THREE.SphereBufferGeometry(1,16,16);
let verts = sphereGeom.attributes.position.array
for(var i=0;i<verts.length;i+=3){
  if(verts[i+1]<0)
      verts[i+1]=0;
}
sphereGeom.computeFaceNormals();
sphereGeom.computeVertexNormals();
//sphereGeom.verticesNeedUpdate = true;
//Working snippet is below...

​

var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
    renderer.setSize( w,h );
    document.body.appendChild( renderer.domElement );
    
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(
        45,     // Field of view
        w/h,    // Aspect ratio
        0.1,        // Near
        10000       // Far
    );
    camera.position.set( 15, 10, 15 );
    camera.lookAt( scene.position );
controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.PointLight( 0xFFFF00 );
light.position.set( 20, 20, 20 );
scene.add( light );
var light1 = new THREE.AmbientLight( 0x808080 );
light1.position.set( 20, 20, 20 );
scene.add( light1 );
    var light2 = new THREE.PointLight( 0x00FFFF );
light2.position.set( -20, 20, -20 );
scene.add( light2 );
var light3 = new THREE.PointLight( 0xFF00FF );
light3.position.set( -20, -20, -20 );
scene.add( light3 );
var sphereGeom = new THREE.SphereBufferGeometry(5,16,16);
let verts = sphereGeom.attributes.position.array
for(var i=0;i<verts.length;i+=3){
  if(verts[i+1]<0)
      verts[i+1]=0;
}
sphereGeom.computeFaceNormals();
sphereGeom.computeVertexNormals();

var material = new THREE.MeshLambertMaterial( { color: 0x808080 } );
var mesh = new THREE.Mesh( sphereGeom, material );
scene.add( mesh );
renderer.setClearColor( 0xdddddd, 1);

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

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

​