Using Three.js to add points to the scene but they are not visible

Question

Using Three.js to add points to the scene but they are not visible

Hi there, I have a question that I need help with:

I recently studied the PointsMaterial API documentation for Three.js and adapted an example to work with my existing code.

The goal of my project is to render points on top of a model that is loaded when the user clicks on a specific position.

Here is the code snippet that contains the important logic in the file "logic.js":

... (code snippet here) ...

Although I have successfully added points to the scene using the raycaster, they do not render or show up. I'm not sure if they are too small or if the color is blending in with the background.

Here is an image showing the issue: https://i.sstatic.net/k9aWx.png

I believe the problem could be related to the point size, as the example I referenced uses larger points and a camera positioned farther away from the points.

If you have any insights or suggestions, I would greatly appreciate your help.

Additional code for handling the NRRD file and canvas display can be found below:

... (additional code snippet here) ...

Furthermore, I noticed that the example points are created with a larger size of 0.05 and the camera is positioned further away from them for visibility.

Here are the links to the relevant examples for reference:

Points Material Example

Interactive Raycasting Points Example

If you have any thoughts on this issue, please feel free to share them. Thank you!

javascript events three.js mouse render

Answer 1

Answer №1

To utilize THREE.BufferGeometry() along with .setDrawRange(), follow the code snippet below:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(1, 5, 5);
camera.lookAt(scene.position);
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 mesh = new THREE.Mesh(new THREE.SphereBufferGeometry(3, 32, 24), new THREE.MeshBasicMaterial({
  wireframe: true,
  color: "red"
}));
scene.add(mesh);

var idx = 0;
var maxIdx = 10;

var points = [];
for (let i = 0; i < maxIdx; i++) {
  points.push(new THREE.Vector3());
}
var geometry = new THREE.BufferGeometry().setFromPoints(points);
geometry.setDrawRange(0, idx);

var points = new THREE.Points(geometry, new THREE.PointsMaterial({
  size: 0.125,
  color: "yellow"
}));
scene.add(points);

window.addEventListener("mousemove", onMouseMove, false);
window.addEventListener("mousedown", onMouseDown, false);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];

function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

function onMouseDown(event) {
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(mesh);
  if (intersects.length === 0) return;

  if (idx == maxIdx) return;

  let p = intersects[0].point;
  geometry.attributes.position.setXYZ(idx, p.x, p.y, p.z);
  geometry.attributes.position.needsUpdate = true;
  idx++;
  geometry.setDrawRange(0, idx);
}

render();

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

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 2

To utilize THREE.BufferGeometry() along with .setDrawRange(), follow the code snippet below:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(1, 5, 5);
camera.lookAt(scene.position);
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 mesh = new THREE.Mesh(new THREE.SphereBufferGeometry(3, 32, 24), new THREE.MeshBasicMaterial({
  wireframe: true,
  color: "red"
}));
scene.add(mesh);

var idx = 0;
var maxIdx = 10;

var points = [];
for (let i = 0; i < maxIdx; i++) {
  points.push(new THREE.Vector3());
}
var geometry = new THREE.BufferGeometry().setFromPoints(points);
geometry.setDrawRange(0, idx);

var points = new THREE.Points(geometry, new THREE.PointsMaterial({
  size: 0.125,
  color: "yellow"
}));
scene.add(points);

window.addEventListener("mousemove", onMouseMove, false);
window.addEventListener("mousedown", onMouseDown, false);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];

function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

function onMouseDown(event) {
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(mesh);
  if (intersects.length === 0) return;

  if (idx == maxIdx) return;

  let p = intersects[0].point;
  geometry.attributes.position.setXYZ(idx, p.x, p.y, p.z);
  geometry.attributes.position.needsUpdate = true;
  idx++;
  geometry.setDrawRange(0, idx);
}

render();

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

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Using Three.js to add points to the scene but they are not visible

Answer №1

Similar questions

Interop-require-default is nowhere to be found in the babel-runtime

fixing errors with express, angularJS, and socket.io

Attempting to initiate an AJAX request to an API

Unsync animation timing for multiple models within useFrame() in react-three-fiber

After a successful login, learn how to implement a bottom tab menu in React Native

The error message "ERR_CONNECTION_TIMED_OUT when trying to access Google APIs fonts

Inject the content loaded from the server into a div element, and insert that div at the

Creating dynamic URL routes for a static website using Vue

Discover distinct and recurring elements

Locate the parent and child elements within an array

Refresh the dataTable following the form submission within the colorbox

The resizing issue persists with Angularjs charts

Operating with a multidimensional entity

Navigating the parent navController in Ionic 2: A step-by-step guide

Does the functionality of Protractor rely on a specific version of AngularJS?

Exploring the Concept of Event Bubbling in ReactJS

The issue at hand is that one of the JavaScript buttons is functioning properly, while the other is not playing the video as intended. What steps can

What causes the website to malfunction when I refresh the page?

Updating div content dynamically with Jquery and PHP variable

Troubleshooting: WordPress post not uploading to custom PHP file - Issue causing ERROR 500