I am creating a scene with some parts which are loaded from a JSON file.
I can hide and show every single object. But now I want to set the opacity/transparent for a single object.
I creating the objects with this code.
geometryArray = new Object();
var loader = new THREE.JSONLoader();
for(var i = 0; i < jsonFileNames.length; i++){
var layerName = jsonFileNames[i].split("/")[1].slice(0, -5);
loader.load(layerName, jsonFileNames[i], function(geometry, materials, layerName){
mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({vertexColors: THREE.FaceColors, side:THREE.DoubleSide, transparent: true}));
mesh.scale.set(scaleFactor, scaleFactor, scaleFactor);
mesh.name = layerName;
scene.add(mesh);
geometryArray[layerName] = mesh;
}, layerName);
}
And I can show/hide the objects with this code
geometryArray[layerName].visible = true;
But how can I set the opacity/transparent for an object?
I have tried to work with this code but this doesnt work.
geometryArray[layerName].materials[0].opacity
You have to also set
geometryArray[layerName].materials[0].transparent = true
on the material for it to use the opacity.
material.transparent only accepts Boolean value not number value
WRONG !!!!! material.transparent = 0 or material.transparent = 1
RIGHT ------> material.transparent = true or material.transparent = false
Related
I am working on a geometric visualization using Trois.js. My goal is to color the nodes of the mesh according to their values. For that, i have already created the nodes and i would first like to import the values from a file.dat, then assign the nodes with these values, in order to change the colors of the nodes according to their assigned values.
Here is the code.js I am using to create the nodes:
jsonURL = "/resources/datasets/Mesh.json";
var colors = ['#898ec1', '#9193bd', '#9999ba', '#a19eb7', '#a8a4b4', '#aea9b1', '#b5afae', '#bbb5ac', '#c1bbaa', '#c7c0a9', '#cdc6a8', '#d2cca8', '#d8d2a8', '#ded8a9', '#e3ddab', '#e8e3ae', '#ede9b2', '#f2efb9', '#f7f4c2', '#fcface', '#fff5d1', '#ffeac2', '#ffe0b3', '#fdd6a6', '#fbcc99', '#f7c38c', '#f3b980', '#efb075', '#eaa76a', '#e49e61', '#de9558', '#d88d4f', '#d18448', '#c97c41', '#c1753b', '#b86d37', '#b06733', '#a66030', '#9c5a2e', '#92542e'];
$.getJSON(jsonURL , function setPoints(dataset) {
var timestamp=1565715018;
for (i=0; i<dataset.humidity.length;i++){
if (dataset.humidity[i].time == timestamp){
for (ii=0; i<dataset.humidity[i].data.length;ii++)
{
var dotPz = dataset.humidity[i].data[ii].x;
var dotPx = dataset.humidity[i].data[ii].y;
var dotPy = dataset.humidity[i].data[ii].z;
var dotGeometry = new THREE.Geometry();
dotGeometry.vertices.push(new THREE.Vector3( dotPx, dotPy, dotPz));
var dotMaterial = new THREE.PointsMaterial( {
size: 0.0002,
color: "#ffffff",
blending: THREE.AdditiveBlending,
transparent: true,
depthTest: false,
sizeAttenuation: true,
} );
scene.add(new THREE.Points(dotGeometry, dotMaterial));
}
};
}
});
Does anyone know how to assign nodes with values imported from a file.dat? Any ideas would be very helpful!
Thank you
I have a problem to use CSG on imported meshes, here's my code:
var a;
var b;
BABYLON.SceneLoader.ImportMesh("", "./public/Models/", "model1.stl", scene, function (newMeshes) {
// Set the target of the camera to the first imported mesh
camera.target = newMeshes[0];
a = newMeshes[0];
});
BABYLON.SceneLoader.ImportMesh("", "./public/Models/", "model2.stl", scene, function (newMeshes) {
// Set the target of the camera to the first imported mesh
//camera.target = newMeshes[0];
b = newMeshes[0];
});
var aCSG = BABYLON.CSG.FromMesh(a);
var bCSG = BABYLON.CSG.FromMesh(b);
"var a" and "var b" are undefined and Debug told me that
"BABYLON.CSG: Wrong Mesh type, must be BABYLON.Mesh"
Is there any method to convert imported mesh to BABYLON.MESH?
Thank you very much
This is because the ImportMesh is async, you have to move your code in the callbacks section:
BABYLON.SceneLoader.ImportMesh("", "./public/Models/", "model1.stl", scene, function (newMeshes) {
// Set the target of the camera to the first imported mesh
camera.target = newMeshes[0];
a = newMeshes[0];
BABYLON.SceneLoader.ImportMesh("", "./public/Models/", "model2.stl", scene, function (newMeshes) {
// Set the target of the camera to the first imported mesh
//camera.target = newMeshes[0];
b = newMeshes[0];
var aCSG = BABYLON.CSG.FromMesh(a);
var bCSG = BABYLON.CSG.FromMesh(b);
});
});
Picking and objects code is one of the most popular:
function Picking(event) {
var raycaster = new THREE.Raycaster();
event.preventDefault();
mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
if (INTERSECTED != intersects[0].object) {
}
} else {
INTERSECTED = null;
}
}
The description: in scene are two objects - cube and sphere. Sphere is first to camera and cube is second. The Sphere has ID1 and cube ID2. Picking is working.
The problem: after deleting the sphere (scene.remove(sphere)); Picking is giving the ID1, so, it seems like sphere is invisible. What is the problam?
The picture of the example: Picture
This code is not giving the result:
for (i = sphere.children.length - 1; i >= 0 ; i--) {
object = sphere.children[i];
object.geometry.remove;
object.material.remove;
object.geometry.dispose();
object.material.dispose();
scene.remove(object);
sphere.remove(object);
}
or
recur(sphere);
for (var i in objects) {
objects[i].geometry.remove;
objects[i].material.remove;
objects[i].geometry.dispose();
objects[i].material.dispose();
scene.remove(objects[i]);
sphere.remove(objects[i]);
}
function recur(obj) {
if (obj instanceof THREE.Mesh) {
objects.push(obj);
}
for (var i in obj.children) {
recur(obj.children[i]);
}
}
The code that add objects:
var ObjLoader = new THREE.ObjectLoader();
var ii;
var group = new THREE.Object3D();
var oldModel = scene.getObjectByName('group');
if (oldModel !== undefined) { scene.remove(oldModel); }
ObjLoader.load("path/model.json", addModelToScene);
group.name = "group";
scene.add(group);
function addModelToScene(model) {
recur(model);
for (var i in objects) {
objects[i].castShadow = true;
objects[i].receiveShadow = true;
}
model.name = "ModelName";
group.add(model)
}
So, The .json model consists of some objects (1..n);
This .json model is added into group.
With picking the side of the cube (may be material) is selectable, but not removable. but the position can be changed.
Thank you.
Change your picking logic a little, store all your objects into array when creating them:
/*var objects = [];
var group = new THREE.Object3D();
create your mesh add to array*/
objects.push(MyMesh);
/*now we have a reference all the time in objects[0] , objects[1]*/
objects[0].displose(); check syntax been a while*/
customMaterial = new THREE.ShaderMaterial(
{
uniforms: customUniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
//wireframe: true,
side: THREE.FrontSide
} );
function ground (){
var map = new THREE.PlaneGeometry(1024,1024, 128, 128);//Use planebufferGeo
map.dynamic = true;
_terrain = new THREE.Mesh( map, customMaterial );
_terrain.material.needsUpdate = true;
_terrain.geometry.dynamic = true;
_terrain.geometry.vertexColors = true;
_terrain.material.uvsNeedUpdate = true;
_terrain.geometry.normalsNeedUpdate = true;
_terrain.rotation.x = -Math.PI / 2;
objects.push(_terrain);
scene.add(_terrain );
}
So I used this in a situation where it was a picking game type, I used an array to store the mesh and i could manipulate the vertices / faces etc edit the array to make changes.
It was an easier way to compare things and check data.
function animate() {
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(objects);
if ( intersects.length > 0 ) {
var faceIndex = intersects[0].faceIndex;
var obj = intersects[0].object;
var geom = obj.geometry;
//etc
I want my objects inherit the shadow of other figures. But I have problems if I put:
objMesh.receiveShadow = true;
I get this error:
http://imgur.com/GWU3qJG
in my code this is what I have more or less.
renderer.shadowMapEnabled = true;
spotlight var = new THREE.SpotLight (0xffffff);
spotLight.position.set (2.4457938219139463,0, 17.37913738929295);
scene.add (Spotlight)
material = new THREE.MeshPhongMaterial ({color: 0x7777ff});
objMesh = new THREE.Mesh (extrude_geometry, material);
objMesh.castShadow = true;
objMesh.receiveShadow = true;
if I remove this line:
objMesh.receiveShadow = true;
my error does not appear.
I can do ?, or what would be the solution?
I am making a flame using the THREE.js and spark.js, but when I render the world I can't see the flame and the world is empty. I saw the console for the error but there is no error regarding this. I tried a lot but can't find out the actual error. Here is the code.
threexSparks = new THREEx.Sparks({
maxParticles : 400,
counter : new SPARKS.SteadyCounter(300)
});
//threexSparks.position.x = 1000;
// setup the emitter
//var emitter = threexSparks.emitter();
var counter = new SPARKS.SteadyCounter(500);
var emitter = new SPARKS.Emitter(counter);
var initColorSize = function() {
this.initialize = function(emitter, particle) {
particle.target.color().setHSV(0.3, 0.9, 0.4);
particle.target.size(150);
};
};
emitter.addInitializer(new initColorSize());
emitter.addInitializer(new SPARKS.Position(new SPARKS.PointZone(new THREE.Vector3(1000, 0, 0))));
emitter.addInitializer(new SPARKS.Lifetime(0, 0.8));
emitter.addInitializer(new SPARKS.Velocity(new SPARKS.PointZone(new THREE.Vector3(0, 250, 00))));
emitter.addAction(new SPARKS.Age());
emitter.addAction(new SPARKS.Move());
emitter.addAction(new SPARKS.RandomDrift(1000, 0, 1000));
emitter.addAction(new SPARKS.Accelerate(0, -200, 0));
Thanks
Tere is strange problems with particles and WebGL render. It will be good if you're using CanvasRender. But for WebGL not.
Also in your code you forgot about creating threejs objects for particles. Sparks.js allows only interface for particles. But you need to create particles itself.
You can look at my jsfiddle example. there I use modified version of sparks.js library. Changes just to be able to override VectorPool behaviour.
http://jsfiddle.net/YeJ4X/35/
Main part there is:
var particleCount = 1800,
particles = new THREE.Geometry(), //store particle vertices
pMaterial = new THREE.ParticleBasicMaterial({
size: 10,
map: txture, //in jsfiddle i create texture from canvas
transparent: true
});
var particleSystem = new THREE.ParticleSystem(particles, pMaterial); //threejs particle system
//initialize our particles (and set that are dirty). sparkjs initialize it later for us
for(var p = 0; p < particleCount; p++) {
v = new THREE.Vector3(numMax,numMax,numMax);
v.isDirty=true;
particles.vertices.push(v);
}
SPARKS.VectorPool.__pools = particles.vertices; //initialize vectors pool
And there is my new vector pool for sparksjs
SPARKS.VectorPool = {
__pools: [],
get: function() {
var ret = _.find(this.__pools, function(v){return v.isDirty});
ret.isDirty=false;
return ret;
},
release: function(v) {
v.isDirty=true;
v.set(numMax,numMax,numMax);
}
};
Of course you must care about count of partices that are used in sparks.js and precreated by hands.
My sparkjs fork is here: https://github.com/elephanter/sparks.js there I fix problem with lastest tweenjs and add other little changes I described before.