Having issues with loading a texture and set on plane geometry

Questions
, ,
1

Hello, I am following a Three.js tutorial for beginners by Red Stapler, specifically the Thanos portal but I am having issue with displaying the smoke in the viewport. I am at the point where it’s suppose to load the image using TextureLoader and set the mesh. Supposedly, the smoke should be statically displayed in the viewport but I don’t see mine.

In the tutorial, his looks like this.
image

I’m trying it out using glitch if you want to see, otherwise the code is like this:

function particleSetup() {
    let loader = new THREE.TextureLoader()
    let result = loader.load("https://cdn.glitch.global/0be44fce-7f68-4bcc-92aa-1de6f40962e8/cloud.png?v=1689044367190", function(texture){
        // THREE.PlaneGeometry(width, height)
        portalGeometry = new THREE.PlaneGeometry(350, 350)
        portalMaterial = new THREE.MeshStandardMaterial({
            map: texture,
            transparent: true
    })

    let particle = new THREE.Mesh(portalGeometry, portalMaterial)
    particle.position.set(2,2,2)
    scene.add(particle)

    renderer.render(scene, camera)
  })
}

initScene()

i tried using loadAsync but i could be using it incorrectly

async function particleSetup() {
  let loader = new THREE.TextureLoader()
  const [ texture ] = await Promise.all( [loader.loadAsync( 'https://cdn.glitch.global/0be44fce-7f68-4bcc-92aa-1de6f40962e8/cloud.png?v=1689044367190' )] );
  portalGeometry = new THREE.PlaneGeometry(350, 350)
  portalMaterial = new THREE.MeshStandardMaterial({
    map: texture,
    transparent: true
  })

  let particle = new THREE.Mesh(portalGeometry, portalMaterial)
  particle.position.set(2,2,2)
  scene.add(particle)

  renderer.render(scene, camera)
}
2

There is no problem with the first particleSetup. I tried it and it works. Maybe something else in your code prevents this?

  • have you added lights to the scene?
  • do you call particleSetup?
  • is your camera correctly positioned in respect to the plane geometry (good position and good orientation)?
  • have you declared portalGeometry and portalMaterial ?

https://codepen.io/boytchev/full/poQdMoy

image

Edit: try this quick test: instead of MeshStandardMaterial use MeshBasicMaterial

3

I do have a directional light in my initScene

function initScene() {
    scene = new THREE.Scene()
    sceneLight = new THREE.DirectionalLight(0xffffff, 0.5)
    sceneLight.position.set(0, 0, 1)
    camera = new THREE.PerspectiveCamera(80, window.innerWidth/window.innerHeight, 1, 1000)
    camera.position.z = 1000;
    scene.add(camera)

    renderer = new THREE.WebGLRenderer()
    renderer.setClearColor(0x000000, 1)
    renderer.setSize(window.innerWidth, window.innerHeight)
    $("body").append(renderer.domElement);

    particleSetup()
}

Edit: yes using MeshBasicMaterial worked. i guess will also have to learn the different material types. thanks