尝试将透明图像放在平面上（三.js）

Question

我是 Three.js 新手，我想在平面上显示图像（具有透明度的 png 图像），但我的代码不起作用...

\n\n

这是我的代码：

\n\n

\r\n

\r\n

var texture = new THREE.TextureLoader().load( \'images/lampedepoche.png\' );\r\n    \r\nvar geometry = new THREE.PlaneGeometry(300, 80);\r\nvar material = new THREE.MeshPhongMaterial({map: texture, color: 0xFFFFFF});\r\nmaterial.emissive.set(0x333333);\r\nmaterial.shininess = 60;\r\n    \r\nvar ldp = new THREE.Mesh(geometry, material);\r\nscene.add(ldp);

\r\n

\r\n

\r\n

\n\n

这是我的图片：

\n\n

\n\n

这是我的全部代码：

\n\n

\r\n

\r\n

window.onload = init();\r\n\r\n\r\nfunction init(){\r\n    // on initialise le moteur de rendu\r\n    renderer = new THREE.WebGLRenderer();\r\n\r\n    renderer.setSize( window.innerWidth, window.innerHeight );\r\n    document.getElementById(\'container\').appendChild(renderer.domElement);\r\n    \r\n    // on initialise la sc\xc3\xa8ne\r\n    scene = new THREE.Scene();\r\n    \r\n    // on initialise la camera que l\xe2\x80\x99on place ensuite sur la sc\xc3\xa8ne\r\n    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 100000 );\r\n    camera.position.set(0, 0, 1000);\r\n    scene.add(camera);\r\n    \r\n    // plane\r\n\tme = new THREE.Mesh(new THREE.PlaneGeometry(900,550), new THREE.MeshPhongMaterial({color: 0xffffff}));\r\n\tscene.add( me );\r\n    \r\n    me.position.x = 130;\r\n    me.position.y = 10;\r\n    me.rotation.y = -20;\r\n    \r\n    var texture = new THREE.TextureLoader().load( \'images/lampedepoche.png\' );\r\n    \r\n    var geometry = new THREE.PlaneGeometry(300, 80);\r\n    var material = new THREE.MeshPhongMaterial({map: texture, color: 0xFFFFFF});  \r\n    material.transparent = true\r\n    var ldp = new THREE.Mesh(geometry, material);\r\n    scene.add(ldp);\r\n    \r\n    ldp.position.x = -410;\r\n    document.getElementById("positionlx").value = 0;\r\n    \r\n    // on cr\xc3\xa9\xc3\xa9 un  cube au quel on d\xc3\xa9finie un mat\xc3\xa9riau puis on l\xe2\x80\x99ajoute \xc3\xa0 la sc\xc3\xa8ne \r\n    cube = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), new THREE.MeshPhongMaterial({color:0x00ffff}) );\r\n    scene.add( cube );\r\n    \r\n    \r\n    cube.position.y = 0;\r\n    cube.position.x = 0;\r\n    cube.position.z = 0;\r\n    cube.rotation.y = 0;\r\n    \r\n    scene.add( new THREE.AmbientLight( 0x212223) );\r\n      \r\n    light = new THREE.SpotLight(0xffffff, 1);\r\n    light.position.set(-320,0,0);\r\n    light.angle = Math.PI/5;\r\n    light.shadowCameraVisible = true;\r\n    scene.add(light);\r\n    \r\n    renderer.shadowMap.enabled = true;\r\n    renderer.shadowMapDarkness = 1;\r\n    \r\n     light.castShadow = true;\r\n     light.intensity = 0.8;\r\n     cube.castShadow = true;\r\n     cube.receiveShadow = true;\r\n     me.receiveShadow = true;\r\n    \r\n     lightHelper = new THREE.SpotLightHelper( light );\r\n     scene.add(lightHelper);\r\n    \r\n    renderer.render( scene, camera );\r\n}

\r\n

\r\n

\r\n

\n\n

可能是我犯了一些错误......就像我是 javascript 初学者一样

\n\n

我需要帮助

\n

Answer 1

您尝试过material.transparent = true吗？