@Deltakosh: pickResult.hit is TRUE in babylon environment, however its FALSE When i convert this babylon code to a reactJS class component, I dont get the same results, the distance is wrong, as the points are not selected. can you see what is wrong with my code ?
import React, { Component } from ‘react’;
import * as BABYLON from ‘babylonjs’;
import {ArcRotateCamera, HemisphericLight, Vector3, MeshBuilder} from “@babylonjs/core”;
import BabylonScene from ‘./BabyLonScene’;
import axios from “axios”;
export default class Viewer extends Component<{}, {}> {
state = {
termUrl: ‘https://cdn.jsdelivr.net/gh/BabylonJSGuide/oddsNEdnds@86e4f9e4faf9c5f47232ebac12ad0b6d7509e5bf/dudeRabbit.js’,
scanData: ,
error: null,
data: null
}
constructor(props) {
super(props);
this.state = {
list: [],
termUrl : this.state.termUrl,
scanData: [],
data: null
};
}
componentDidMount() {
const that = this;
axios.get(this.state.termUrl)
.then((response) => {
this.setState({list: response.data});
//console.log("what is fetched: " + this.state.list);
//console.log("newDAta"+ newData);
const arrayData = this.get3DArray(response.data);
that.setState({
scanData: this.state.list,
data: arrayData
}, () => {
console.log('data in state', this.state.data)
});
})
.catch((error) => {
console.log("FAILED", error);
});
}
meshPicked(mesh) {
console.log('mesh picked:', mesh)
}
get3DArray = (data) => {
var positions = [];
positions = data;
return positions;
}
onSceneMount = (e: SceneEventArgs) => {
// This creates a basic Babylon Scene object (non-mesh)
let {canvas, engine} = e;
let scene = new BABYLON.Scene(this.engine);
this.scene = scene;
// Scene to build your environment, Canvas you need to attach your camera.
var camera = new ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 8, 15, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas)
var customMesh = new BABYLON.Mesh("custom", scene);
new HemisphericLight('light', Vector3.Up(), scene);
//MeshBuilder.CreateBox('box', {size: 3}, scene)
/* Some preparation */
const dArray = this.get3DArray();
var newData = [];
newData = this.state.data.replace(/(^.*\[|\].*$)/g, '');
var b = newData.split`,`.map(x => +x);
var arr = "[" + newData + "]";
//Assign positions to vertex, morphing feature
var dudePositions = b;
console.log("These are my " + dudePositions);
var vertexData = new BABYLON.VertexData();
vertexData.positions = dudePositions;
//if length not divided, the screen freezes
if (arr) {
var l = arr.length / 3;
//console.log("length is "+ l);
} else {
var l = null;
}
var colors = new Array(4 * l);
colors = colors.fill(0).map((x) => {
return Math.random();
})
vertexData.colors = colors;
//Apply vertexData to custom mesh
vertexData.applyToMesh(customMesh, true);
var mat = new BABYLON.StandardMaterial("mat", scene);
mat.emissiveColor = new BABYLON.Color3(1, 1, 1);
mat.pointsCloud = true;
mat.pointSize = 2;
customMesh.material = mat;
//mark two points on the Vector3
var firstClick = true;
let firstClickPosition;
let secondClickPosition;
//render the uncompressed points.
var firstClickPos = null;
// Ball impostor or create a point
var ball = BABYLON.Mesh.CreateSphere("sphere", 2, 0.5, scene);
ball.isPickable = false;
var tempx = ball.position.x;
console.log("tempx:", tempx);
var temp = ball.position;
console.log("temp:", temp);
//rendering the scene.
scene.getEngine().runRenderLoop(() => {
if (scene) {
scene.render();
}
});
//pointer events
scene.onPointerDown = function (evt, pickResult) {
var pickResult = scene.pick(scene.pointerX, scene.pointerY);
console.log(pickInfo.hit); //always gives false.
if (pickInfo.hit) {
if (firstClick) {
firstClickPosition = pickResult.ray.origin.add(pickResult.ray.direction.scale(pickResult.distance));
console.log("first click done and false: " + firstClickPosition);
//overwrite the existing ball point position to selected pickPoint on a mesh
ball.position = firstClickPosition;
temp = ball.position;
tempx = ball.position.x;
firstClick = false;
} else if (!firstClick) {
console.log("must be second click, first click is : " + firstClick);
console.log("Read the second point and calculate distance");
console.log("Distance formula ");
secondClickPosition = pickResult.ray.origin.add(pickResult.ray.direction.scale(pickResult.distance));
console.log(secondClickPosition)
//add a second point location for marking.
ball.position = secondClickPosition;
console.log(BABYLON.Vector3.Distance(secondClickPosition, firstClickPosition));
var diff = BABYLON.Vector3.Distance(secondClickPosition, firstClickPosition);
//show distance in axis
firstClick = true;
showAxis(temp, ball.position, diff.toPrecision(2));
}
}
};
//show the distance line on a plane.
var showAxis = function (previous, current, size) {
const styles = {
alpha: 1,
backgroundColor: "white",
borderColor: "white",
color: "black",
fontFamily: "Arial",
fontSize: 16,
fontWeight: "300",
height: 30,
hoverCursor: "pointer",
width: 30,
};
var makeTextPlane = function (text, color, size) {
// GUI
color = "white";
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
dynamicTexture.hasAlpha = true;
//dynamicTexture.drawText(text, 5, 60, "bold 36px Arial", color , "transparent", true);
var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
return plane;
};
var axisX = BABYLON.Mesh.CreateLines("axisX", [
previous, current], scene);
axisX.color = new BABYLON.Color3(5, 0, 0);
};
engine.runRenderLoop(() => {
if (scene) {
scene.render();
}
});
}
render(){
// if your API call hasn't finished
if (!this.state.data || !this.state.scanData) {
return null
}
return (
<BabylonScene onSceneMount={this.onSceneMount}/>
)
}
}
