Issue with Transparency in Background Loading of FBX Files using Three.js

Question

Issue with Transparency in Background Loading of FBX Files using Three.js

I am currently exploring three.js and have encountered an issue with transparency not working as expected. Despite trying various settings, I cannot seem to achieve a transparent background - it always defaults to black or interprets the values as an RGB value. I've experimented with different configurations based on recommendations from other users:

scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000, 0); (This line seems to be treated as an RGB value?)
scene.background = null;

renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setClearColor(0x000000, 0);

The FBX file is loaded within an iframe, and I have verified the transparency settings on the iframe. Can anyone provide some insight into this issue?

When the transparent call is made, the initial code looks like this...


import * as THREE from '../build/three.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { FBXLoader } from './jsm/loaders/FBXLoader.js';

var container, controls;
var camera, scene, renderer, light;

var clock = new THREE.Clock();

var mixer;

init();
animate();

function init() {

    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(500, 10, 500);

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x000000, 0);
    scene.background = null;

javascript three.js

Answer 1

Answer №1

Issue resolved! Instead of overthinking the solution, I realized I just needed to make a simple adjustment (DUH! *facepalm*). Initially, I mistakenly set the background css on the iframe as:

background:#;

when it should have been:

background-color:rgba(0,0,0,0);

I had actually made this change earlier, but it didn't reflect because the css was cached.

Big thank you to user manthrax for providing assistance and apologies for wasting your time. I'll now quietly retreat for a bit.

Answer 2

Issue resolved! Instead of overthinking the solution, I realized I just needed to make a simple adjustment (DUH! *facepalm*). Initially, I mistakenly set the background css on the iframe as:

background:#;

when it should have been:

background-color:rgba(0,0,0,0);

I had actually made this change earlier, but it didn't reflect because the css was cached.

Big thank you to user manthrax for providing assistance and apologies for wasting your time. I'll now quietly retreat for a bit.

Answer 3

Answer №2

Perhaps consider avoiding setting the background color altogether?

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  margin: 0;
}
#c {
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
}
#content {
  font-size: 7vw;
  font-family: sans-serif;
  text-align: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="content">
  <div>
    <h1>Cubes-R-Us!</h1>
    <p>We make the best cubes!</p>
  </div>
</div>
<canvas id="c"></canvas>
  
<script type="module">
// Three.js - Transparent Canvas
// from https://threejsfundamentals.org/threejs/threejs-tips-transparent-canvas.html

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({
    canvas,
    alpha: true,
    premultipliedAlpha: false,
  });

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 5;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const scene = new THREE.Scene();

  {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(-1, 2, 4);
    scene.add(light);
  }

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  function makeInstance(geometry, color, x) {
    const material = new THREE.MeshPhongMaterial({
      color,
    });

    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    cube.position.x = x;

    return cube;
  }

  const cubes = [
    makeInstance(geometry, 0x44aa88,  0),
    makeInstance(geometry, 0x8844aa, -2),
    makeInstance(geometry, 0xaa8844,  2),
  ];

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render(time) {
    time *= 0.001;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    cubes.forEach((cube, ndx) => {
      const speed = 1 + ndx * .1;
      const rot = time * speed;
      cube.rotation.x = rot;
      cube.rotation.y = rot;
    });

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();
</script>

Answer 4

Perhaps consider avoiding setting the background color altogether?

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  margin: 0;
}
#c {
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
}
#content {
  font-size: 7vw;
  font-family: sans-serif;
  text-align: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="content">
  <div>
    <h1>Cubes-R-Us!</h1>
    <p>We make the best cubes!</p>
  </div>
</div>
<canvas id="c"></canvas>
  
<script type="module">
// Three.js - Transparent Canvas
// from https://threejsfundamentals.org/threejs/threejs-tips-transparent-canvas.html

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({
    canvas,
    alpha: true,
    premultipliedAlpha: false,
  });

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 5;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const scene = new THREE.Scene();

  {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(-1, 2, 4);
    scene.add(light);
  }

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  function makeInstance(geometry, color, x) {
    const material = new THREE.MeshPhongMaterial({
      color,
    });

    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    cube.position.x = x;

    return cube;
  }

  const cubes = [
    makeInstance(geometry, 0x44aa88,  0),
    makeInstance(geometry, 0x8844aa, -2),
    makeInstance(geometry, 0xaa8844,  2),
  ];

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render(time) {
    time *= 0.001;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    cubes.forEach((cube, ndx) => {
      const speed = 1 + ndx * .1;
      const rot = time * speed;
      cube.rotation.x = rot;
      cube.rotation.y = rot;
    });

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();
</script>

Issue with Transparency in Background Loading of FBX Files using Three.js

Answer №1

Answer №2

Similar questions

Extract specific nested elements

Tips for transferring the data from one yform value to another field

What is the best way to trigger a function in my JavaScript code when the console log is opened on my webpage?

Displaying an 'undefined' message in a JavaScript alert box

How do three buttons display identical content?

Discovering the data from a JSON serialization in JavaScript

Tips for passing multiple parameters to Web API controller methods in Angular 4

AngularJS - one-time execution of view generation from .NET controller

Invoking a function from the main window within a child window specified in Angular

Extension Overlay for Chrome

Exploring AngularJS routing integration with Rails

Adding a new row to a Bootstrap table while maintaining the consistent style

Most effective method for streamlining conditional checks in JavaScript

Managing active dropdown menus in VueJS

What is the method to alter the color of an SVG source within an image tag?

Using PHP to set an array value as a closure for a JavaScript function: Is it possible?

What is the most effective method for creating unit testing functions in JavaScript?

Unlocking route access through server-side Firebase authentication

Attempting to dynamically insert a new row into a table using jQuery, with the added condition of limiting the total number of rows to four

Using Angular's Jasmine SpyOn function to handle errors in $resource calls