I am a beginner with three.js and I'm trying to display an image (PNG image with transparency) on a plane, but my code isn't working...
Here is the code I've written:
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 the image I want to use:
https://i.sstatic.net/B70i6.png
Below is the entire code I have written:
window.onload = init();
function init(){
// Initializing the renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById('container').appendChild(renderer.domElement);
// Initializing the scene
scene = new THREE.Scene();
// Placing the camera in the scene
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.set(0, 0, 1000);
scene.add(camera);
// Creating a 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;
// Creating a cube
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 );
}I may have made some mistakes since I am still learning JavaScript.
I would greatly appreciate any help. Thank you!