Selecting and caluclating area of 'planes' in three.js - javascript

I am trying to calulate the area of a 'plane' of 3d object (.stl mesh object) n in three.js. By selecting it with a mouse click.
For example this area:
We know that all 'triangles' that make up the surface of the 'plane' (since it is an .stl) are attached at the same angle, if the angle changes in comparison to the last triangle, we know that this triangle is not part of the 'plane' anymore.
So knowing this is a property of the surface we are trying to calulate, we can use this in combination with some form of three.js Raycaster to select and calculate an area (by adding all the area's of the triangles with the correct properties together).
For now, we don't need to worry about the size of the selected surface (for example trying to find a 'plane' on a curved surface wouldn't be valid, but we do not need to worry about that now)
How would I go about trying to find the area and 'plane' in three.js. Or more specifically, how do I start reading the .stl format's 'triangles'.
Minimal working example of my current code (with working .stl file included), it can be run using a simple live server, for example in VS Code using Ritwick Dey's plugin, no extra plugins/libraries needed, since it's 'normal' HTML/JS.
The only requirement is that we select the point we are trying to calculate in three.js and give the area (selected triangles) a different colour, in three.js, when they are selected. Any other calculations needed could be done in some kind of backend (Python, Node.js or anything else really), but I see no obvious way of transporting such complicated data between programs.
My minimal reproduction code, see my abovementioned github link for the .stl file used in my picture:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stackoverflow Example</title>
<link rel="stylesheet" type="text/css" href="../style/render.css">
</head>
<body>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r117/build/three.min.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r117/examples/js/loaders/STLLoader.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r117/examples/js/controls/OrbitControls.js"></script>
<script>
function init() {
// Setup some basic stuff
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
// Setup Camera
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 5000);
// Setup renerer and add to page
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Setup Camera Position
camera.rotation.y = 45 / 180 * Math.PI;
camera.position.x = 800;
camera.position.y = 100;
camera.position.z = 1000;
// Add Camera Control through orbit.js
let controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', renderer);
// Add some basic ambient lighting (Does light all parts equally and does not cast shadows)
hlight = new THREE.AmbientLight(0x404040, 20);
scene.add(hlight);
//Add some point lights to simulate real lights
light = new THREE.PointLight(0xc4c4c4, 1, 10000);
light.position.set(0, 300, 500);
scene.add(light);
light2 = new THREE.PointLight(0xc4c4c4, 1, 10000);
light2.position.set(500, 100, 0);
scene.add(light2);
light3 = new THREE.PointLight(0xc4c4c4, 1, 10000);
light3.position.set(0, 100, -500);
scene.add(light3);
light4 = new THREE.PointLight(0xc4c4c4, 1, 10000);
light4.position.set(-500, 300, 0);
scene.add(light4);
controls.update();
// Animation Script
function animate() {
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
// Setup GLTF Loader and load in obj
let loader = new THREE.STLLoader();
loader.load('example.stl', function (geometry) {
// console.log(gltf);
var material = new THREE.MeshPhongMaterial({
color: 0x171717,
shininess: 200
});
var mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
mesh.receiveShadow = true;
mesh.position.set(0, 0, 0);
scene.add(mesh);
renderer.render(scene, camera)
animate();
});
}
// Call method for starting init
init();
</script>
</body>
</html>
EDIT:
Example of my intended output, but in Fusion 360 instead of three.js (Note, the original file is a .stl but since three.js doesn't allow for part viewing, it is converted to .stl in the backend)
Example of the 'triangles' in a .stl file

Related

my three.js scene is not rendering. not sure why

my main.js file contains :-
import './style.css';
import * as THREE from 'three';
//create scene
const scene = new THREE.Scene();
//arguments - field of view, aspect ratio, last 2 are view frustrum(controls which objects are visible relative to the camera)
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth/window.innerHeight,
0.1,
1000,
);
const renderer = new THREE.WebGLRenderer({
//which DOM element to use
canvas: document.querySelector('.canvas'),
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth / window.innerHeight);
camera.position.setZ(100);
//arguments - radius, widthsegments, heightsegements
const geometry = new THREE.SphereGeometry(15, 32, 16);
//wireframe true to get a better look at its geometry
const material = new THREE.MeshBasicMaterial({color: 0xffff00, wireframe: true});
//torus is creating the mesh with geometry and material //mesh = geometry + material
const globe = new THREE.Mesh(geometry, material);
scene.add(globe);
function animate(){
requestAnimationFrame(animate); //optimized rendering
//rotation
globe.rotateOnAxis += 0.01;
renderer.render( scene, camera );
}
animate();
renderer.render(scene, camera);
and my index.html :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Gautam</title>
</head>
<body>
<canvas id="globe">This is the canvas
</canvas>
<script type="module" src="./main.js"></script>
</body>
</html>
All that appears on my screen is :-
[what displays on my browser][1]
[1]: https://i.stack.imgur.com/PQmJu.png
I checked and my main.js file is definitely executing, but nothing is rendering on the screen
You have a few issues.
document.querySelector('.canvas')
This would select elements with the class canvas, but your DOM has no such element. It does have an element with the type canvas and the ID globe, so that line should be one of the following:
document.querySelector('canvas')
document.querySelector('#globe')
document.getElementById('globe')
Next,
renderer.setSize(window.innerWidth / window.innerHeight);
As #Mugen87 points out, this should be
renderer.setSize(window.innerWidth, window.innerHeight);
As you've written it, the renderer's width is being set to the quotient, and its height (the missing second parameter) is being set to undefined, a situation that three.js has no handling for.
And,
globe.rotateOnAxis += 0.01;
rotateOnAxis is a function that takes a vector (the axis of rotation) and a scalar (the rotation angle) as its parameters. By assigning +0.01 to it, you're simply replacing the function itself, not calling the function. If, for example, you want to rotate around the globe's y-axis, you could use
globe.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0.01);
Finally, the second call to renderer.render(...) (the one outside the animate() function) is unnecessary.
renderer.setSize(window.innerWidth / window.innerHeight);
Call the method like so instead:
renderer.setSize(window.innerWidth, window.innerHeight);
//create scene
const scene = new THREE.Scene();
//arguments - field of view, aspect ratio, last 2 are view frustrum(controls which objects are visible relative to the camera)
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000,
);
const renderer = new THREE.WebGLRenderer({
//which DOM element to use
canvas: document.querySelector('#canvas')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(100);
//arguments - radius, widthsegments, heightsegements
const geometry = new THREE.SphereGeometry(15, 32, 16);
//wireframe true to get a better look at its geometry
const material = new THREE.MeshBasicMaterial({
color: 0xffff00,
wireframe: true
});
//torus is creating the mesh with geometry and material //mesh = geometry + material
const globe = new THREE.Mesh(geometry, material);
scene.add(globe);
function animate() {
requestAnimationFrame(animate); //optimized rendering
//rotation
globe.rotateOnAxis += 0.01;
renderer.render(scene, camera);
}
animate();
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.140.2/build/three.min.js"></script>
<canvas id="canvas"></canvas>

three.js - how to render scene.background before a mesh?

I am a novice to Javascript and ThreeJS. I have a 3D rotating cube that appears on top of a static background, but one frustrating property is that the cube typically appears first and then the background image appears. How do I ensure the background is rendered first? Specifically, I always want the background image to appear before the cube.
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
function resize() {
var aspect = window.innerWidth / window.innerHeight;
let texAspect = bgWidth / bgHeight;
let relAspect = aspect / texAspect;
bgTexture.repeat = new THREE.Vector2( Math.max(relAspect, 1), Math.max(1/relAspect,1) );
bgTexture.offset = new THREE.Vector2( -Math.max(relAspect-1, 0)/2, -Math.max(1/relAspect-1, 0)/2 );
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = aspect;
camera.updateProjectionMatrix();
}
const scene = new THREE.Scene();
// Arguments:
// 1) Field of Value (degrees)
// 2) Aspect ratio
// 3) Near clipping plane
// 4) Far clipping plane
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
// Need to set size of renderer. For performance, may want to reduce size.
// Can also reduce resolution by passing false as third arg to .setSize
renderer.setSize( window.innerWidth, window.innerHeight );
// Add the rendered to the HTML
document.body.appendChild( renderer.domElement );
// A BoxGeometry is an object that contains all points (vertices) and fill (faces)
// of the cube
const geometry = new THREE.BoxGeometry();
// Determines surface color (maybe texture?)
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// Mesh takes a geometry and applies the material to it
const cube = new THREE.Mesh( geometry, material );
// Add background image
const loader = new THREE.TextureLoader();
bgTexture = loader.load('https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg' ,
function(texture) {
// Resize image to fit in window
// Code from https://stackoverflow.com/a/48126806/4570472
var img = texture.image;
var bgWidth = img.width;
var bgHeight = img.height;
resize();
});
scene.background = bgTexture;
// By default, whatever we add to the scene will be at coordinates (0, 0, 0)
scene.add( cube );
camera.position.z = 5;
// This somehow creates a loop that causes the rendered to draw the scene
// every time the screen is refreshed (typically 60fps)
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>
This is happening because the texture is taking longer to load than it takes for Three.js to set up the rest of the scene. You already have a handler for the onLoad callback of TextureLoader.load(), so we can use that to adjust the behavior.
Before scene.add( cube );, add a new line:
cube.visible = false;
Now the cube will still be added to the scene, but it won't be visible. Now after the resize() call at the end of function(texture), add
cube.visible = true;
While testing the problem and solution locally, I ran into a few other, less significant issues with your code. You can see all of the changes I had to make to get it running properly at this Gist.

Three.js ply colorless (all black)

I am trying to load my ply file using Three.js. It has worked but I almost don't see any colors. There are some glimpses here and there, but it's mostly black (the first image below). The image opens properly (with colors) in MeshLab (the second image below). I have tried vertexColors: THREE.VertexColors (as suggested in Three.js - ply files - why colorless?) and vertexColors: THREE.FaceColors but nothing seemed to help. I am a three.js newbie, so please tell me what am I doing wrong.
and my code:
<!doctype html>
<html lang="en">
<head>
<title>Icon 7</title>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<script src="js/three.min.js"></script>
<script src="js/PLYLoader.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
// Set up the scene, camera, and renderer as global variables.
var scene, camera, renderer;
init();
animate();
// Sets up the scene.
function init() {
// Create the scene and set the scene size.
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
// Create a renderer and add it to the DOM.
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
// Create a camera, zoom it out from the model a bit, and add it to the scene.
camera = new THREE.PerspectiveCamera(35, WIDTH / HEIGHT, 0.1, 100);
camera.position.set(0,0.15,3);
camera.lookAt(new THREE.Vector3(0,0,0));
scene.add(camera);
// Create an event listener that resizes the renderer with the browser window.
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
// Set the background color of the scene.
renderer.setClearColor(0xd3d3d3, 1);
// Create a light, set its position, and add it to the scene.
var light = new THREE.PointLight(0xffffff);
light.position.set(0,200,100);
scene.add(light);
// Load in the mesh and add it to the scene.
var loader = new THREE.PLYLoader();
loader.load( './models/foot.ply', function ( geometry ) {
geometry.computeVertexNormals();
geometry.center();
var material = new THREE.MeshStandardMaterial ({ shininess: 1000,vertexColors: THREE.FaceColors } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 0;
mesh.castShadow = false;
mesh.receiveShadow = false;
scene.add( mesh );
} );
// Add OrbitControls so that we can pan around with the mouse.
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.userPanSpeed = 0.05;
}
// Renders the scene and updates the render as needed.
function animate() {
// Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
requestAnimationFrame(animate);
// Render the scene.
renderer.render(scene, camera);
controls.update();
}
</script>
</body>
</html>
Edit: as I don't have separate textures, this is not a duplicate question.
Instead of using MeshStandardMaterial use MeshBasicMaterial

three.js: Manually created geometry

I'm trying to create a THREE.Geometry from scratch.
When I try to use it (in a THREE.Mesh), I get
TypeError: faces3 is undefined # three.js:20426
The geometry is created and becomes visible on screen, but execution stops.
Here is the code I'm using:
makePlane = function(width, height)
{
var geom = new THREE.Geometry();
var v0 = new THREE.Vector3(0, 0, 0);
var v1 = new THREE.Vector3(width, 0, 0);
var v2 = new THREE.Vector3(width, height, 0);
geom.vertices.push(v0);
geom.vertices.push(v1);
geom.vertices.push(v2);
var face = new THREE.Face3(0, 1, 2);
geom.faces.push(face);
return geom;
};
What else do I need to do to make it work?
Update:
Still happens in R62. It happens with geometry generated by three.js' built in PlaneGeometry class too, so maybe it's a three.js bug. I'll file a report.
I should also mention that execution does in fact not stop, that was a mistake on my part. I'm just getting the error, and it doesn't feel like I should have any errors if nothing is wrong.
Update 2:
There's an issue logged here, but it's been closed.
Depending on what you do in further computation steps you may need to add these lines before you return the geom-Object:
geom.computeCentroids();
geom.computeFaceNormals();
geom.computeVertexNormals();
First off, make sure you are using the latest version of the three.js library.
In order for geometry to work, you need to make sure you have a few things set up.
You need to have a renderer, camera, scene, and your geometry.
Based on the documentation for Geometry, you need to provide a method to do something with the geometry afterwards such as computeCentroids() and computeBoundingBox().
Returning the value is not necessary here. It will actually prevent your object from showing up. Here is fully functional code for you based on your code. Just make sure your three.js reference is correct:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom Geometry</title>
</head>
<body>
<script src="three.min.js"></script>
<script>
var container,
camera,
scene,
renderer,
geom;
init();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
//renderer
renderer = new THREE.CanvasRenderer(); //Use CanvasRenderer with simple geometry
renderer.setSize(window.innerWidth, window.innerHeight);
//scene
scene = new THREE.Scene();
//camera
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 500;
//Your custom geometry here
makePlane(200, 300);
container.appendChild(renderer.domElement);
renderer.render(scene, camera);
}
function makePlane(width, height) {
var material = new THREE.MeshBasicMaterial({ color: 0x297bbb });
geom = new THREE.Geometry()
geom.vertices.push(new THREE.Vector3(0, 0, 0));
geom.vertices.push(new THREE.Vector3(width, 0, 0));
geom.vertices.push(new THREE.Vector3(width, height, 0));
geom.faces.push(new THREE.Face3(0, 1, 2));
//return geom; //you don't need this
geom.computeBoundingSphere(); //<--add what you need here
geoMesh = new THREE.Mesh(geom, material); //added custom geometry to a mesh with a material
geoMesh.position.y = -50;
scene.add(geoMesh);
};
</script>
</body>
</html>

Three.js mouse action

i asked yesterday about how to draw 3D objects in the browser, be able to manipulate them with the mouse and be sure that it works in every browser. Now i am using three.js and im quite happy because it actually works.
I was able to understand the basic tutorial, draw my first scene and rotate the first cube etc.
Now i want to be able to rotate the complete scene with the mouse, googled and found this link. Works fine in the example and i tried to copy the example. Current code looks like this:
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="three.min.js"></script>
<script src="TrackballControls.js"></script>
<script type="text/javascript">
// Variables
var scene, camera, controls, renderer;
var geometry, material, cube;
init();
animate();
render();
function init() {
// Scene, camera
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 500, window.innerWidth / window.innerHeight, 0.1, 1000 );
// Mouse controls
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
controls.addEventListener('change',test,false);
// Renderer
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Basic cube to show
geometry = new THREE.CubeGeometry(10,10,10);
material = new THREE.MeshBasicMaterial({color:0x00ff00});
cube = new THREE.Mesh(geometry);
scene.add(cube);
camera.position.z = 10;
}
function test() {
alert("hi");
render();
}
function animate() {
requestAnimationFrame(render);
controls.update();
}
function render() {
renderer.render(scene, camera);
//cube.rotation.x += 0.1;
//cube.rotation.y += 0.1;
}
</script>
</body>
But it doesn't work. The testoutput "hi" only appears once. It should appear quite often when using the mouse. What i tried to accomplish is that controls.addEventListener('change',test,false); looks if anything with the mouse changes (position, keydown etc.) and then calls a new renderframe. In the example (Example) it somehow does what i want it to do.
What am i doing wrong here? I just want to be able to rotate the camera with mousedragging. And yes i am totally new to this. Just read about it for 2 hours now.
Thanks in advance.

Categories

Resources