"Exploring the world of ThreeJS Hemis

Question

"Exploring the world of ThreeJS Hemis

Just a quick question - I'm attempting to create a 3D hemisphere in ThreeJS.

I've managed to make a hemisphere using the Circle or CircleBuffer geometry, but there's an issue with the flat side being empty.

I've tried adding a circle to fill the gap, but it hasn't worked out so far.

I believe I just need to instruct the geometry to add another face there, but I'm not sure how to do it!

javascript three.js

Answer 1

Answer №1

Creating a 5 kopeikas model: Hemisphere + Circle

import numpy as np
import matplotlib.pyplot as plt

x = np.linspace(0, 10, 100)
y = np.sin(x)

plt.plot(x, y)
plt.show()

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

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

const 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));

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

scene.add(hemiSphere);

render();

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

Answer 2

Creating a 5 kopeikas model: Hemisphere + Circle

import numpy as np
import matplotlib.pyplot as plt

x = np.linspace(0, 10, 100)
y = np.sin(x)

plt.plot(x, y)
plt.show()

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

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

const 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));

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

scene.add(hemiSphere);

render();

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

Answer 3

Answer №2

Here's how you can achieve it:

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

Answer 4

Here's how you can achieve it:

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

Answer 5

Answer №3

//Snippet to transform a sphere into a hemisphere
var sphereGeometry = new THREE.SphereBufferGeometry(1,16,16);
let vertices = sphereGeometry.attributes.position.array
for(var index=0;index<vertices.length;index+=3){
  if(vertices[index+1]<0)
      vertices[index+1]=0;
}
sphereGeometry.computeFaceNormals();
sphereGeometry.computeVertexNormals();
//sphereGeometry.verticesNeedUpdate = true;
//See the working code snippet below...

var renderer = new THREE.WebGLRenderer();
var width = 300;
var height = 200;
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);
    
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(
        45,     // Field of view
        width/height,    // 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 sphereGeometry = new THREE.SphereBufferGeometry(5,16,16);
let vertices = sphereGeometry.attributes.position.array
for(var index=0;index<vertices.length;index+=3){
  if(vertices[index+1]<0)
      vertices[index+1]=0;
}
sphereGeometry.computeFaceNormals();
sphereGeometry.computeVertexNormals();

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

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

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f08498829595b0c0dec9c4dec0">[email protected]</a>/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99edf1ebfcfcd9a9b7a0adb7a9">[email protected]</a>/examples/js/controls/OrbitControls.js"></script>

Answer 6

//Snippet to transform a sphere into a hemisphere
var sphereGeometry = new THREE.SphereBufferGeometry(1,16,16);
let vertices = sphereGeometry.attributes.position.array
for(var index=0;index<vertices.length;index+=3){
  if(vertices[index+1]<0)
      vertices[index+1]=0;
}
sphereGeometry.computeFaceNormals();
sphereGeometry.computeVertexNormals();
//sphereGeometry.verticesNeedUpdate = true;
//See the working code snippet below...

var renderer = new THREE.WebGLRenderer();
var width = 300;
var height = 200;
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);
    
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(
        45,     // Field of view
        width/height,    // 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 sphereGeometry = new THREE.SphereBufferGeometry(5,16,16);
let vertices = sphereGeometry.attributes.position.array
for(var index=0;index<vertices.length;index+=3){
  if(vertices[index+1]<0)
      vertices[index+1]=0;
}
sphereGeometry.computeFaceNormals();
sphereGeometry.computeVertexNormals();

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

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

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f08498829595b0c0dec9c4dec0">[email protected]</a>/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99edf1ebfcfcd9a9b7a0adb7a9">[email protected]</a>/examples/js/controls/OrbitControls.js"></script>

"Exploring the world of ThreeJS Hemis

Answer №1

Answer №2

Answer №3

Similar questions

What are the steps to develop a React iOS app that can be used offline?

import all mongoose models in the express app.js

What is the best way to include a property with a name in quotes to an object after it has already been declared?

Embedding the view in a partial with Handlebars.js: A comprehensive guide

Argument-based recursive method

Engage in Step 2: Receive a response from the server via AJAX request

Leveraging traditional code methods within AngularJs

Reduce XSLTProcessor output by 50%

The media print is not displaying correctly when attempting to print with JavaScript

Display a hidden div on hover using JQUERY

Adding JQuery elements to the map pane

A comprehensive guide on personalizing Bootstrap 4 tooltips to suit your specific needs

Integrate birthday validation using the validate.js library in a React application

The AJAX Modal Popup Extender is not being displayed due to an error with the undefined Sys

`Arc canvas countdown timer`

How can I delete the Location Box from Google Maps that appears in the top left corner?

Learn how to toggle multiple class elements with jQuery, and how to hide the ones that have

Is it possible to execute in a specific context using npm?

When utilizing jQuery, I implemented this code but it does not display anything. I am unsure of the error within the code

"Is there a way to determine the height of an inline element, such as a span element,