Make three.js object invisible

[nofear87]

I have used the following code to create a mesh object

var defaultPartGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
var defaultPartMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: false});
default = new THREE.Mesh(defaultPartGeometry, defaultPartMaterial); 
default.position.set(0,0.25,0); 
scene.add(default)

How can I make this invisible? Setting the opacity for this object to null did not work.

 

I adress the object by its ID and then try to set the opacity (I also have tried to adress the material (object.material))

object = .scene.getObjectByName(ID);

tweens.push(tl.to(object, 2, {opacity: 0}, e.time));

Tween the position is working:

tweens.push(tl.to(object.position, 2, {x: target.X, z: target.Y}, e.time))

Hope you can help.

[OSUblake]

This is a question for more for three.js support. But you need to set the transparent flag on your material.

[nofear87]

that was the problem. thanks!

[nofear87]

any idea how to do this on collada model?

[OSUblake]

I'm not familiar with Collada, but it seems like it would be the same. Maybe it's a child material you need to change? I'm sure if you asked this on threejs chat or Stackoverflow that you'd get a better answer.

[Jonathan]

nofear87, Like OSUblake advised above have you checked the ThreeJS docs? :

 

http://threejs.org/docs/#Reference/Materials/Material

http://threejs.org/docs/#Reference/Renderers/WebGLRenderer

 

taken form the ThreeJS docs:
 

.opacity

Float in the range of 0.0 - 1.0 indicating how transparent the material is. A value of 0.0 indicates fully transparent, 1.0 is fully opaque. If transparent is not set to true for the material, the material will remain fully opaque and this value will only affect its color.
 

Default is 1.0.
 

 .transparent

Defines whether this material is transparent. This has an effect on rendering as transparent objects need special treatment and are rendered after non-transparent objects. For a working example of this behavior, check the WebGLRenderer code.
When set to true, the extent to which the material is transparent is controlled by setting opacity.
 

Default is false.

 

Also GSAP can tween any javascript numerical object so why not just pass in your ThreeJS material object into GSAP and animate the opacity:

// GSAP parameters for to() method .. takes an object
TweenMax.to(object, duration, properties);

// maybe something like this
yourMeshObject.material.transparent = true;
TweenMax.to(yourMeshObject.material, 1, {opacity: 0});

I haven't tested the above    ..but based on the ThreeJS docs you have to set the material transparent flag to true like Blake advised above. And then try to pass the object and property you want animated to GSAP.

 

I hope this helps