How to work with Geometry from AMFLoader in THREE.js? - javascript

I am using STLLoader and AMFLoader to load models in a scene. When the file is an STL file, I load the file and calculate the bounding box along with my own functions for calculating the volume and surface area:
var loader = new THREE.STLLoader();
loader.load('file.stl'', function ( geometry ) {
var material = new THREE.MeshLambertMaterial( { color: 0xeaeaea/*, specular: 0x111111, shininess: 100*/ } );
geometry.computeBoundingBox(geometry);
bBox = geometry.boundingBox;
geometry.computeVertexNormals();
// convert buffergeometry to geometry so attributes can be used to calculate volume and area
var calcGeometry = new THREE.Geometry().fromBufferGeometry(geometry);
// calculate Volume
modelVolume = calculateVolume(calcGeometry);
// calculate Surface Area
modelArea = calculateArea(calcGeometry);
meshMain = new THREE.Mesh( geometry, material );
meshMain.position.set( 0, 0, 0 );
meshMain.rotation.set( 0, - Math.PI / 2, 0 );
meshMain.scale.set( 1, 1, 1 );
// center the rotational pivot point on center of geometry
meshMain.translation = geometry.center();
// bounding box info
showBoundingBox = new THREE.BoxHelper(meshMain, bBoxColor);
meshMain.castShadow = true;
meshMain.receiveShadow = true;
scene.add( meshMain );
});
However, it seems that the AMFLoader returns the Mesh. How do I work with the geometry of the returned mesh? This is what I've tried:
var loader = new THREE.AMFLoader();
loader.load( 'file.amf', function ( amfobject ) {
console.log(amfobject.geometry); // undefined
scene.add( amfobject );
} );
EDIT
This is what I am attempting to do:
amfobject.children.forEach(function (child) {
child.geometry.computeFaceNormals();
child.geometry.computeVertexNormals();
child.geometry.computeBoundingBox();
});
but it says that child.geometry is undefined.

Related

Three.js | Raycasting imported .obj model via blender

I have loaded a 3D terrain via Blender with the OBJLoader. I have also created a mesh (yellow pointer on the picture below) which i want to follow the mouse while it's on the terrain.
I tried to use the raycaster method but i don't know exactly how to apply it to my .obj as it seems that I can't access it outside the loader.
How can i make my pointer(yellow mesh) stick to my terrain (loaded .obj) while it's following the mouse ?
Please help a total three.js noob...
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );
var renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera.position.z = 150;
camera.position.y=300;
camera.position.x=350;
var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
scene.add( light );
var controls= new THREE.OrbitControls(camera,renderer.domElement);
controls.enableDamping=true;
controls.campingFactor=0.25;
controls.enableZoom=true;
controls.minDistance= 1;
controls.maxDistance=3000;
controls.minPolarAngle= -Math.PI/2;
controls.maxPolarAngle= Math.PI/2;
var terrain;
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load('models/terrain.mtl',
(materials) => {
materials.preload();
var loader = new THREE.OBJLoader();
loader.setMaterials(materials);
loader.load(
'models/terrain.obj',
function ( object ) {
terrain = object;
scene.add( terrain );
});
}
);
var Cylindergeometry = new THREE.CylinderGeometry( 5, 0, 8, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( Cylindergeometry, material );
var Torusgeometry = new THREE.TorusGeometry( 7, 0.5, 8, 6);
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var torus = new THREE.Mesh( Torusgeometry, material);
Torusgeometry.rotateX(1.5708);
Torusgeometry.translate(0,-4.5,0);
//Merge the two parts to make it one mesh (yellow pivot)
var PivotGeometry = new THREE.Geometry();
PivotGeometry.merge(Cylindergeometry);
PivotGeometry.merge(Torusgeometry);
var pivot = new THREE.Mesh(PivotGeometry, material);
scene.add(pivot);
// Trying to Raycast the terrain to make the pivot follow the mouse while it's on it
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onMouseMove( event ) {
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
// See if the ray from the camera into the world hits one of our meshes
var intersects = raycaster.intersectObject( terrain,true );
// Toggle rotation bool for meshes that we clicked
if ( intersects.length > 0 ) {
pivot.position.set( 0, 0, 0 );
pivot.lookAt( intersects[ 0 ].face.normal );
pivot.position.copy( intersects[ 0 ].point );
}
}
//Met à jour l'affichage de la scène
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
My loaded .obj terrain
You have the following line in your code:
var intersects = raycaster.intersectObjects( object );
I don't see where object as a variable is declared. I suggest you declare this variable in your module scope, assign the loaded OBJ file to it and then use this code instead:
var intersects = raycaster.intersectObject( object, true );
OBJLoader.load() returns an object of type THREE.Group which is in some sense a container holding an arbitrary number of meshes. Hence, you want to raycast recursively.

Having problems to set a glTF object to a different layer in Three.js

I´m trying to make use of layers in Three.js.
I have this script with a sphere, a triangle and a glTF object (car).
I made a second layer enable: camera.layers.enable(1);
Set the sphere, the triangle and the glTF object to the layer 1:
car.layers.set( 1 );
sphere.layers.set( 1 );
triangle.layers.set( 1 );
But when i set the camera to the layer 1 ( camera.layers.set(1); ), the glTF object does not display, but other elements do. So, it seens like i can´t set the glTF object to a different layer then default layer.
Here is the code. What could be wrong?
Thanks for the attention!
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 3000);
camera.position.set( 0, 0.1, 1 );
camera.layers.enable(1);
camera.layers.set(1);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor("#f5e5e5");
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// LIGHT ------------------------------------------------------------------------------>
var dLight = new THREE.DirectionalLight( 0x0000ff, 6.5 );
dLight.position.set(1500, -700, 500);
dLight.castShadow = true;
dLight.layers.set(1);
scene.add( dLight);
// Load a glTF resource -------------------------------------------------------->
var loader = new THREE.GLTFLoader();
var car;
loader.load('car.gltf', function ( gltf ) {
car = gltf.scene.children[0];
car.scale.set(0.5, 0.5, 0.5);
car.position.z = 0;
car.position.y = -0.095;
car.layers.set(1);
scene.add( gltf.scene );
render();
});
// SPHERE --------------------------------------------------------------->
var material = new THREE.MeshLambertMaterial();
var geometry = new THREE.SphereGeometry(0.05, 20, 20);
var sphere = new THREE.Mesh(geometry, material);
sphere.position.x = 0.25;
scene.add(sphere);
sphere.layers.set( 1 );
// TRIANGLE ------------------------------------------------------------->
var geometre = new THREE.Geometry();
geometre.vertices.push(new THREE.Vector3(-0.25, -0.1, 0));
geometre.vertices.push(new THREE.Vector3(0, 0.30, 0));
geometre.vertices.push(new THREE.Vector3(0.25, -0.1, 0));
geometre.vertices.push(new THREE.Vector3(-0.25, -0.1, 0));
var triangle= new THREE.Line(geometre, new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 12 }));
triangle.layers.set( 1 );
scene.add(triangle);
// POST-PROCESSING ------------------------------------------------------->
var composer = new THREE.EffectComposer(renderer);
var renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
var pass1 = new THREE.GlitchPass(0);
composer.addPass(pass1);
// RENDER -------------------------------------------------------------->
requestAnimationFrame(render);
function render(){
sphere.rotation.y += -0.02;
car.rotation.y += 0.01;
composer.render();
requestAnimationFrame(render);
};
</script>
You have to set layers recursively for the entire hierarchy of objects like so:
gltf.scene.traverse( function( object ) {
object.layers.set( 1 );
} );
By default, a layer configuration does not automatically apply to its descendant nodes in the scene graph.
three.js r116

Three.js: object light & displacementMap

I'm trying to make a realistic silver ring like this:
with different colors and size.
This is my result at this moment:
As you can see my ring is not smooth.
I don't know if it's a problem of the model, or of the code:
There are my models ( i'm using 2 model, one for the light silver and another for the dark one )
light: http://www.websuvius.it/atma/myring/assets/3d/anello-1/interno.obj
dark: http://www.websuvius.it/atma/myring/assets/3d/anello-1/esterno.obj
This is part of my code:
...
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45, containerWidth / containerHeight, 0.1, 20000 );
scene.add(camera);
camera.position.set( 0, 150, 400 );
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setClearColor( 0xf0f0f0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( containerWidth, containerHeight );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = false;
var ambientlight = new THREE.AmbientLight( 0xffffff );
scene.add( ambientlight );
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {};
var onProgress = function ( xhr ) {};
var onError = function ( xhr ) {};
var loader = new THREE.OBJLoader( manager );
var textureLoader = new THREE.TextureLoader( manager );
loader.load( path + '/assets/3d/anello-1/interno.obj', function ( object ) {
var backgroundTexture = textureLoader.load( path + '/assets/3d/texture/argento_standard_512_1024.jpg');
backgroundTexture.flipY = false;
var background = new THREE.MeshPhongMaterial({
map: backgroundTexture,
envMap: textureCube,
reflectivity:0.5
});
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material = background;
}
});
object.position.y =-50;
scene.add(object);
}, onProgress, onError );
loader.load( path + '/assets/3d/anello-1/esterno.obj', function ( object ) {
var geometry = object.children[ 0 ].geometry;
var materials = [];
var scavoTexture = textureLoader.load( path + '/assets/3d/texture/argento_scuro_512_1024.jpg');
var material = new THREE.MeshPhongMaterial({
map: scavoTexture,
envMap: textureCube,
reflectivity:0.5
});
materials.push(material);
var customTexture = textureLoader.load( path + "/" + immagine);
customTexture.flipY = false;
var custom = new THREE.MeshPhongMaterial({
map: customTexture,
transparent: true,
opacity: 1,
color: 0xffffff
});
materials.push(custom);
esterno = THREE.SceneUtils.createMultiMaterialObject(geometry, materials);
esterno.position.y=-50;
scene.add(esterno);
}, onProgress, onError );
container = document.getElementById( 'preview3d' );
container.appendChild( renderer.domElement );
animate();
How can i get a better result?
I have to change my models? My code? Both?
Thanks
[EDIT]
Thanks, everyone for the comments.
This is the result now:
Now, i have another question. Is there a way to extrude the text and other elements? I have only a png element of the central part.
Thanks
[EDIT 2]
Now I'm making some experiment with displacementMap.
This is the result at this moment:
Now the problem is: the browser freeze due to heavily subdivided mesh.
This is a part of my code:
var external = new THREE.CylinderBufferGeometry( 3.48, 3.48, 4, 800, 400, true, -1.19, 5.54 );
var materials = [];
var baseMaterial = new THREE.MeshPhongMaterial({
color: 0x222222
});
materials.push(baseMaterial);
var textureMaterial = new THREE.MeshPhongMaterial({
map: image, //PNG with text and symbols
transparent: true,
opacity: 1,
reflectivity:0.5,
color: 0xc0c0c0,
emissive: 0x111111,
specular: 0xffffff,
shininess: 34,
displacementMap: image, //same as map
displacementScale: 0.15,
displacementBias: 0
});
materials.push(textureMaterial);
var externalObj = THREE.SceneUtils.createMultiMaterialObject(external, materials);
I think that the problem is the 800x400 segments of cylinder, that generate a mesh with 320000 "faces". There is a way to optimize the performance keeping this level of detail?
Thanks again.
P.s. maybe I have to open a new question?
Answering your new question: you could use your png also as displacement map. Have a look at the official example: https://threejs.org/examples/webgl_materials_displacementmap.html
But you probably need to heavily subdivide your "central part" for displacement.
Maybe in your case there will be your png as bump map sufficient enough, then you you might check out this example: https://threejs.org/examples/webgl_materials_bumpmap.html

Threejs TextureLoader CubeGeometry

I am learning threejs and I want that my cube has 6 different textures on each side. I did make that with loadTexture
var material3 = new THREE.MeshPhongMaterial( {map: THREE.ImageUtils.loadTexture('textures/ps.png')} );
I did save 6 of this materials in array and then use THREE.MeshFaceMaterial. But there is problem with THREE.ImageUtils.loadTexture because it is deprecated and I should use THREE.TextureLoader and I do not know how to load 6 textures in this way.
This is what I have:
function texture()
{
var loader = new THREE.TextureLoader();
loader.load( 'textures/ps.png', function ( texture )
{
var geometry = new THREE.CubeGeometry( 10, 10, 10 );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
mesh = new THREE.Mesh( geometry, material );
mesh.position.z = -50;
scene.add( mesh );
} );
}
I think this is close to what you are looking for:
function MultiLoader(TexturesToLoad, LastCall, ReturnObjects) {
if (TexturesToLoad.length == 0) return;
if (!ReturnObjects) ReturnObjects = [];
var loader = new THREE.TextureLoader()
//Pop off the latest in the ,
//you could use shift instead if you want to read the array from
var texture = TexturesToLoad.shift()
loader.load(texture,
function (texture) {
ReturnObjects.push(texture);
if (TexturesToLoad.length > 0) {
MultiLoader(TexturesToLoad, LastCall, ReturnObjects)
} else {
LastCall(ReturnObjects)
}
},
LoadProgress,
LoadError);
}
function LoadProgress(xhr) {
console.log(('Lodaing ' + xhr.loaded / xhr.total * 100) + '% loaded ');
}
function LoadError(xhr) {
console.log('An error happened ');
}
call it with this
var TexturesToLoad = []
TexturesToLoad.push("../surfacemap.jpg")
TexturesToLoad.push("../normalmap.jpg");
TexturesToLoad.push("../spekularmap.jpg");
var ReturnedMaterials=[];
var ReturnMaterials=[];
var LastCall=function(ReturnedMaterials)
{
var surfaceMap = ReturnedMaterials[0];
var normalMap = ReturnedMaterials[1];
var specularMap = ReturnedMaterials[2];
var decalMaterial = new THREE.MeshPhongMaterial(
{
map: surfaceMap,
normalMap: normalMap,
normalScale: new THREE.Vector2( 1, 1 ),
specularMap: specularMap,
transparent:false,
wireframe: false
} );
var globeGeometry = new THREE.SphereGeometry(100.0, SPHERE_SIDES, SPHERE_SIDES);
mesh = new THREE.Mesh( globeGeometry, decalMaterial );
mesh.rotation.x=Math.PI/2;
};
MultiLoader(TexturesToLoad,LastCall,ReturnMaterials)
Explanation:
The new THREE.TextureLoader, uses a callback function. This ensures that the ressource you are using is really loaded when you need to add it.
Callbacks are difficult however if you want to use a lot of material.
above MultiLoader allows you to call recursivly and then call back to the function you want to use all your materials at. The materials are collected into an array (ReturnObjects) .
There are many ways to achieve it. I'll show you 2;
1)
Make your object (cube) using own vertices and faces
.vertices.push( new THREE.Vector3( x, y, z ) );
.faces.push( new THREE.Face3( x, y, z ) );
I've prepared an example in jsfiddle.
2)
Using UV map. So first you need to prepare object with UV map in 3D software like Blender and export it as a JSON file.
I've also prepared an example in jsfiddle.
If you are not familiar with UV map or Blender, check toturials.

three.js load object/model and then manipulate sub-parts/children

I have a 3D model of a robot arm, that I want displayed and manipulated in the browser.
My question is: how do I load the model into three.js, so that I can manipulate all sub-parts of the robot arm.
As an example I have a rotary motor and a shaft attached as an assembly in Inventor.
Image: http://i.stack.imgur.com/custz.png
This is exported as an stl file and imported in Three.js using STLLoader.js.
Image: http://i.stack.imgur.com/nLmBe.png
I want to know how I can manipulate the shaft to turn to a specified angle.
I have loaded the model using the following code:
<div id="container"></div>
<script src="three.js\build\three.min.js"></script>
<script src="js\STLLoader.js"></script>
<script>
// Set size variables
var SIZE_x = 400, SIZE_y = 400;
// Set three main THREE variables
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, SIZE_x/SIZE_y, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
// Set renderer options
renderer.setSize(SIZE_x, SIZE_y);
renderer.setClearColor(0xEEEEEE, 1.0);
renderer.clear();
// Append to HTML Dom
//document.body.appendChild(renderer.domElement);
$('#container').append(renderer.domElement);
// Create light
var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
scene.add(pointLight);
// Move camera
camera.position.x = 0;
camera.position.y = 20;
camera.position.z = 20;
var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
var geometry = event.content;
var material = new THREE.MeshLambertMaterial( { ambient: 0xff5533, color: 0xff5533 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
mesh.traverse(function ( child ) {
//if ( child instanceof THREE.Mesh ) {
console.log("Hej: " + child);
//}
});
//scene.add( new THREE.Mesh( geometry ) );
console.log('Loaded');
} );
loader.load( 'models/AssemblySimple1.stl' );
// Render loop
var render = function () {
requestAnimationFrame(render);
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
render();
</script>
Any points and hints are welcome. Also if there is a preferred export file format. I have both SolidWorks and Inventor at my disposal. Or if I've taken a completely wrong approach to the problem, please let me know of other ways.
Thanks
Three js has function called THREE.STLLoader() .This one can be used to load stl file.
Here is the way how it is loaded
var loader = new THREE.STLLoader();
var group = new THREE.Object3D();
loader.load("../lib/SolidFz.stl", function (geometry) {
console.log(geometry);
var mat = new THREE.MeshLambertMaterial({color: 0x7777ff});
group = new THREE.Mesh(geometry, mat);
group.rotation.x = -0.5 * Math.PI;
group.scale.set(0.6, 0.6, 0.6);
scene.add(group);
});
Here scene
var scene new THREE.Scene();
After that you have a created 3d object and loaded one added into that 3d object.Then you can control that 3d object as you wish. According to this way you can load several parts and do the what you want to do with that

Categories

Resources