threejs, adding points to scene and not seeing them

Hello I have one doubt:

I have studied:

And I have adapted the example to work with my existing code.

The aim is to render points on top of the model which we have loaded on click position.

Here we have the code, the important part is onDocumentMouseDown(), the file, logic.js:

if (!Detector.webgl) Detector.addGetWebGLMessage();

// global variables for this scripts
let OriginalImg,

var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var mousePressed = false;
var clickCount = 0;


// initilize the page
function init() {
    let filename = "models/nrrd/columna01.nrrd"; // change your nrrd file
    let idDiv = 'original';
    OriginalImg = new InitCanvas(idDiv, filename);

    filename = "models/nrrd/columnasegmentado01.nrrd"; // change your nrrd file
    idDiv = 'segment';
    SegmentImg = new InitCanvas(idDiv, filename);

let originalCanvas = document.getElementById('original');
originalCanvas.addEventListener('mousedown', onDocumentMouseDown, false);
originalCanvas.addEventListener('mouseup', onDocumentMouseUp, false);

function onDocumentMouseDown(event) {
    mousePressed = true;


    mouse.x = ( ( event.clientX - OriginalImg.renderer.domElement.offsetLeft ) / OriginalImg.renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = -( ( event.clientY - OriginalImg.renderer.domElement.offsetTop ) / OriginalImg.renderer.domElement.clientHeight ) * 2 + 1

    console.log('Mouse x position is: ', mouse.x, 'the click number was: ', clickCount);
    console.log('Mouse Y position is: ', mouse.y);

    var objects = raycaster.intersectObjects(OriginalImg.scene.children);

    var pointGeometry = new THREE.Geometry();

    var position = new THREE.Vector3();
    position.x = objects[0].point.x;
    position.y = objects[0].point.y;
    position.z = objects[0].point.z;


    var pointMaterial = new THREE.PointsMaterial({color: 0x888888});

    var point = new THREE.Points(pointGeometry, pointMaterial);



function onDocumentMouseUp(event) {
    mousePressed = false

function animate() {



And we do add the points to the scene, but in fact they do not render, they do not show, and I wonder why?:

enter image description here

As you could see in the image we see that the raycaster intercepts those new created points, however the do not get drawn.

I wonder if they are too small, or just the color hides them with the background.

Could you help me please?.

Additional code:

// this class handles the load and the canva for a nrrd
// Using programming based on prototype:
// This class should be improved:
//   - Canvas Width and height

InitCanvas = function (IdDiv, Filename) {

    this.IdDiv = IdDiv;
    this.Filename = Filename

InitCanvas.prototype = {

    constructor: InitCanvas,

    init: function () {

        this.container = document.getElementById(this.IdDiv);

        // this should be changed.
        this.container.innerHeight = 600;
        this.container.innerWidth = 800;

        //These statenments should be changed to improve the image position = new THREE.PerspectiveCamera(60, this.container.innerWidth / this.container.innerHeight, 0.01, 1e10); = 300;

        let scene = new THREE.Scene();

        // light

        let dirLight = new THREE.DirectionalLight(0xffffff);
        dirLight.position.set(200, 200, 1000).normalize();;;

        // read file

        let loader = new THREE.NRRDLoader();
        loader.load(this.Filename, function (volume) {

            //z plane
            let sliceZ = volume.extractSlice('z', Math.floor(volume.RASDimensions[2] / 4));

            this.container.innerWidth = sliceZ.iLength;
            this.container.innerHeight = sliceZ.jLength;


            console.log('Our slice is: ', sliceZ);


        this.scene = scene;

        // renderer

        this.renderer = new THREE.WebGLRenderer({alpha: true});
        this.renderer.setSize(this.container.innerWidth, this.container.innerHeight);

        // add canvas in container


    animate: function () {



I wonder about the point size because if we see this example they are made with 0.05 of size:

And in the example we see the camera being quite far away from the points being generated and they are visible:

What do you think?

three.js bind Plane to proxy Object transformations

I’m trying to transform a Plane according to a Object3D (position and rotation). That Plane is used as a clippingPlane.

If I call Plane.applyMatrix4( Object.matrixWorld ) it just applies the matrix once, and doesn’t bind the Plane to that matrix for future transformations.
However if I call the same function in a loop the transformations applied to the Plane are continuous.
EG if I call Object.rotate.z = 1 once, and then Plane.applyMatrix4( Object.matrixWorld ) in a loop, the Plane rotates 1 unit along the Z axis at every loop.

Any ideas?

Being this Plane used as a clipping plane, I also tried to transform it in the shader material of the mesh being clipped, and it maybe would be the best performance-wise, but I’m not so skilled to accomplish that.

Terrain intersection perfomance

I create var geometry = new THREE.PlaneGeometry(512,512,255,255); then parse jpg heightmap and change verticles’ positions to receive deformed plane. Than I cast ray from the sky to the ground in the animate() function to get intersection point:

var raycaster = new THREE.Raycaster( new THREE.Vector3(player.x, 100, player.z), new THREE.Vector3(0, -1, 0) );
var intersects = raycaster.intersectObject( ground, true );
if(intersects.length == 1) {
    mesh.position.set(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z);

But FPS become very low (<20). I also tried to get y-position through the height map, but texture is only 256 x 256, so if I want to make mesh follow the terrain the y-coordinate is jerking.

How to find intersection of objects in three.js?

I load 20 objects which have random position. I need to make it so that the objects have random position but don’t intersect.
How to fint the intersection of thee objects and check intersection?

 for (var i = 0; i < 20; i++) {
        // Create a material
        var textureLoader = new THREE.TextureLoader();
        var map = textureLoader.load('./models/test_2.png');
        var material = new THREE.MeshPhongMaterial({ map: map });

        var shipMtl = new MTLLoader();
        var loader = new this.THREE.OBJLoader();

        shipMtl.load('./models/test.mtl', function(materials) {

            loader.load('./models/test.obj', function(object) {
                object.traverse(function(node) {
                    if (node.isMesh) node.material = material;

                object.position.x = Math.random() * 500 - 250;
                object.position.y = Math.random() * 500 - 250;
                object.position.z = Math.random() * 500 - 250;
                object.scale.x = Math.random() * 2 + 40;
                object.scale.y = Math.random() * 2 + 40;
                object.scale.z = Math.random() * 2 + 40;
                object.rotation.x = Math.random() * 2 * Math.PI;
                object.rotation.y = Math.random() * 2 * Math.PI;
                object.rotation.z = Math.random() * 2 * Math.PI;
                var obj = object; // put your object as global

    raycaster = new THREE.Raycaster();

    mouse = new THREE.Vector2();
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);

Camera Autorotate threejs

How can I make camera to autorotate when i hit any obstacle in threejs. I referred the following link
where the rendering restarts when it hits any obstacle. I tried implementing in my project but that doesn’t works. How can i implement that in my project?

My map.ts code is

private renderer: THREE.WebGLRenderer;
  private camera: THREE.PerspectiveCamera;
  public scene: THREE.Scene;

  public fieldOfView: number = 10;
  public nearClippingPane: number = 1;
  public farClippingPane: number = 1000;

  public controls: THREE.OrbitControls;

  private canvasRef: ElementRef;

  constructor(public loadingCtrl: LoadingController) {

    this.render = this.render.bind(this);
    this.onModelLoadingCompleted = this.onModelLoadingCompleted.bind(this);


  private get canvas(): HTMLCanvasElement {
    return this.canvasRef.nativeElement;

  private createScene() {
    this.scene = new THREE.Scene();
    var loader = new THREE.ColladaLoader();
    loader.load('assets/Buildings/Block.DAE', this.onModelLoadingCompleted);


  private onModelLoadingCompleted(collada) {
     const loading = this.loadingCtrl.create({
      content:'Loading Please Wait...'

    var modelScene = collada.scene;
     modelScene.rotation.x = -0.01 * Math.PI;
    // modelScene.rotation.z = 0.03 * Math.PI;


  private createCamera() {
    let aspectRatio = this.getAspectRatio(); = new THREE.PerspectiveCamera(

    // Set position and look at = 1; = 0.4; = 16;

  private createLight(){
    var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
        this.scene.add( ambientLight );
        var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
        directionalLight.position.set( 1, 1, 0 ).normalize();
        this.scene.add( directionalLight );


  private getAspectRatio(): number {
    let height = this.canvas.clientHeight;
    if (height === 0) {
      return 0;
    } = "100%"; = "100%";
    return this.canvas.clientWidth / this.canvas.clientHeight;

  private startRendering() {
    this.renderer = new THREE.WebGLRenderer({
      canvas: this.canvas,
      antialias: true
    this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);

    this.renderer.shadowMap.enabled = true;
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    this.renderer.setClearColor(0xffffff, 1);
    this.renderer.autoClear = true;

    let component: MapComponent = this;

    (function render() {

  public render() {



  public addControls() {
    this.controls = new THREE.OrbitControls(;
    this.controls.rotateSpeed = 1.0;
    this.controls.zoomSpeed = 1.2;
    this.controls.addEventListener('change', this.render);


  /* EVENTS */

  public onMouseDown(event: MouseEvent) {

    // Example of mesh selection/pick:
    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();
    mouse.x = (event.clientX / this.renderer.domElement.clientWidth) * 2 - 1;
    mouse.y = - (event.clientY / this.renderer.domElement.clientHeight) * 2 + 1;

    var obj: THREE.Object3D[] = [];
    this.findAllObjects(obj, this.scene);
    var intersects = raycaster.intersectObjects(obj);
    console.log("Scene has " + obj.length + " objects");
    console.log(intersects.length + " intersected objects found")
    intersects.forEach((i) => {
      console.log(i.object); // do what you want to do with object


  private findAllObjects(pred: THREE.Object3D[], parent: THREE.Object3D) {
    // NOTE: Better to keep separate array of selected objects
    if (parent.children.length > 0) {
      parent.children.forEach((i) => {
        this.findAllObjects(pred, i);

  public onMouseUp(event: MouseEvent) {

  @HostListener('window:resize', ['$event'])
  public onResize(event: Event) { = "100%"; = "100%";
    console.log("onResize: " + this.canvas.clientWidth + ", " + this.canvas.clientHeight); = this.getAspectRatio();;
    this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);


  @HostListener('document:keypress', ['$event'])
  public onKeyPress(event: KeyboardEvent) {
    console.log("onKeyPress: " + event.key);

  ngAfterViewInit() {

And map.html is

<canvas #canvas (mousedown)="onMouseDown($event)" (mouseup)="onMouseUp($event)"></canvas>

How can I solve z-fighting using Three.js

I’m learing three.js and I faced a z-fighting problem.


There are two plane object, one is blue and the other is pink.
And I set the positions using the flowing codes:


Is there any solution in three.js to fix all the z-fighting problem in a big scene?

I ask this problem because I’m working on render a BIM(Building Information Model, which is .ifc format) on the web.
And the model itself have so much faces which are so closed to each other. And it cause so much z-fighting problems as you can see:


Is three.js provide this kind of method to solve this problem so that I can handle this z-fighting problem just using a couple of code?

How to make a button that allows a WebGL model to go back to its initial orientation?

I am building a plugin for Grafana. In this plugin, I load a model with a .fbx extension, using threejs, orbitcontrols and FBXLoader. The plugin gets data from Grafana and uses this to update the Roll, Pitch and Yaw of the model.

However, because I have added controls, it is possible to zoom in/zoom out or to look at the model from a different angle.

Now I want to create a button that gets the model back to its initial orientation when it is clicked on. I think I have to make a button that calls a function backToInitial() or something, and then this function has to change the position and rotation of the camera (so not from the model itself?) to its initial state. I have tried multiple things, but nothing has worked yet. I am having the most trouble with putting the button in the right place and adding an event listener that reacts when the button is clicked (because the html and js are in separate files).

Does anyone know if this idea is logical and how to do this?

Thanks a lot in advance!

Rotate a face along one of its edges

Given two faces f and f’ with a common edge e, i’m looking for a way to rotate f around e.

See: illustration of f/f’ and e

My goal is to unfold f and f’ so they can be mapped on the same plan. More specifically, I want the coordinate of the vertex r of f that is not part of e after such unfolding (r’).

See: after unfolding with r/r’

Currently i’ve tried to apply the method described here:

In the case from the screenshot, i’ve simplified it as the rotation axis is already on the Z-axis. So my code looks like this:

// Object contains only two faces
var geometry = object.children[0].geometry;
var f = geometry.faces[0];
var fprime = geometry.faces[1];

// Find two vertices in common
var edge = [f.a, f.b];
if (f.a != fprime.a && f.a != fprime.b && f.a != fprime.c) {
    edge = [f.b, f.c];
} else if (f.b != fprime.a && f.b != fprime.b && f.b != fprime.c) {
    edge = [f.a, f.c];

var v1 = geometry.vertices[edge[0]];
var v2 = geometry.vertices[edge[1]];

polyhedron.translateOnAxis(v1, -1);
polyhedron.rotateOnAxis(v2, THREE.Math.degToRad(90));
polyhedron.translateOnAxis(v1, 1);

But this only send my object into space:



Without the rotation, the object does not move (as expected). Any hints on how to fix the rotation ?

Change GLTF material in Aframe

I’m trying to make some flame in Aframe using a mesh I get on Sketchfab. My problem is the flame mesh have shadow and is dark. How can i change this ? I try setting material emissive and emissiveIntensity but it doesn’t affect the result…

Here is the code rendered by Chrome and a screenshot

<a-entity gltf-model="#fire1"
 position="1 1 1"
 scale="0.2 0.2 0.2"
 rotation="0 15 0"

   <a-light position=""

A not so flamish flame

Thanks !