平面上に透明な画像（3つの.js）を入れようとします

Question

私はthree.jsで新しく、平面上に画像を表示したいのですが、コードが機能しません。

これは私のコードです：

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);

これが私のイメージである：

と、これはすべて私のコードです：

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 
 
\t me = new THREE.Mesh(new THREE.PlaneGeometry(900,550), new THREE.MeshPhongMaterial({color: 0xffffff})); 
 
\t 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); 
 
}

は、私はいくつかのミスをしたことがあります...のように私は

が、私は助けを必要とJavaScriptで初心者です

Answer 1

material.transparent = trueを試しましたか？