sami54 sami54 - 1 month ago 16
Javascript Question

try to put a image with transparency on a plane (three.js)

I am new with three.js and I want show a image ( png image with transparency ) on a plane but my code don't work...

this is my code:



var texture = new THREE.TextureLoader().load( 'images/lampedepoche.png' );

var geometry = new THREE.PlaneGeometry(300, 80);
var material = new THREE.MeshPhongMaterial({map: texture, color: 0xFFFFFF});
material.emissive.set(0x333333);
material.shininess = 60;

var ldp = new THREE.Mesh(geometry, material);
scene.add(ldp);





this is my image:

lampe de poche

and this is all my code:



window.onload = init();


function init(){
// on initialise le moteur de rendu
renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById('container').appendChild(renderer.domElement);

// on initialise la scène
scene = new THREE.Scene();

// on initialise la camera que l’on place ensuite sur la scène
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.set(0, 0, 1000);
scene.add(camera);

// plane
me = new THREE.Mesh(new THREE.PlaneGeometry(900,550), new THREE.MeshPhongMaterial({color: 0xffffff}));
scene.add( me );

me.position.x = 130;
me.position.y = 10;
me.rotation.y = -20;

var texture = new THREE.TextureLoader().load( 'images/lampedepoche.png' );

var geometry = new THREE.PlaneGeometry(300, 80);
var material = new THREE.MeshPhongMaterial({map: texture, color: 0xFFFFFF});
material.transparent = true
var ldp = new THREE.Mesh(geometry, material);
scene.add(ldp);

ldp.position.x = -410;
document.getElementById("positionlx").value = 0;

// on créé un cube au quel on définie un matériau puis on l’ajoute à la scène
cube = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), new THREE.MeshPhongMaterial({color:0x00ffff}) );
scene.add( cube );


cube.position.y = 0;
cube.position.x = 0;
cube.position.z = 0;
cube.rotation.y = 0;

scene.add( new THREE.AmbientLight( 0x212223) );

light = new THREE.SpotLight(0xffffff, 1);
light.position.set(-320,0,0);
light.angle = Math.PI/5;
light.shadowCameraVisible = true;
scene.add(light);

renderer.shadowMap.enabled = true;
renderer.shadowMapDarkness = 1;

light.castShadow = true;
light.intensity = 0.8;
cube.castShadow = true;
cube.receiveShadow = true;
me.receiveShadow = true;

lightHelper = new THREE.SpotLightHelper( light );
scene.add(lightHelper);

renderer.render( scene, camera );
}





May be I did some mistake ... like I am beginner in javascript

I need help

Answer

Have you tried material.transparent = true ?

Comments