Ways to avoid the cascading of CSS styles onto multiple Three.JS scenes

Question

Ways to avoid the cascading of CSS styles onto multiple Three.JS scenes

It seems like I might have to take the longer route to solve this issue, but let's give it a shot...

I'm facing a challenge when applying CSS to control the opacity of a specific HTML element that acts as a container for a Three.JS scene. In this scenario, there are multiple elements, each serving as containers for their respective scenes. The problem arises when the CSS attributes (even when applied inline) intended for one specific scene-containing element end up being applied to all elements containing scenes, rather than just the targeted one. This phenomenon occurs not only with opacity but with any post-applied CSS attribute.

The reason behind this workaround is that, based on my research, there's no direct method to set opacity on a Three.JS group object that houses multiple meshes. I am attempting - in theory - to avoid defining every material with transparency enabled and then recursively updating all meshes within a Three.JS Group object for a fade in/out animation.

Some of these group objects contain numerous meshes. Instead of individually updating the opacity of each mesh within a Three.JS Group object, my intention was/is to create separate scenes for different animations, allowing for customizable levels of transparency, and simply adjusting the opacity property of the HTML element containing that particular animation.

I've experimented with using both single and multiple cameras without success. I also attempted nesting the containers under an additional element and setting CSS on the parent element, but encountered the same issue. While I haven't explored the option of using multiple renderers, my research indicates potential performance concerns and context limitations associated with this approach. Furthermore, the render loop has "autoClear" disabled to ensure all scenes render simultaneously.

Below is the HTML structure. Note that the first element includes an inline style setting opacity to 0.5, while the second element has no inline styling:

<div class="three-js-container" id="scene-container-1" style="opacity:0.5;"></div>
<div class="three-js-container" id="scene-container-2"></div>

Below is the corresponding Javascript code:

/* Only one renderer instance is created */
var universalRenderer = new THREE.WebGLRenderer({antialias: true, alpha:true});

/* references to all containers are made */
var containerForScene1 = document.getElementById("scene-container-1");
var containerForScene2 = document.getElementById("scene-container-2");

/* two different cameras are created */
var cameraForScene1 = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.001, 1000);
var cameraForScene2 = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.001, 1000);

/* two different scenes are created, one for each element container */
var scene1 = new THREE.Scene();
scene1.userData.element = containerForScene1;

var scene2 = new THREE.Scene();
scene2.userData.element = containerForScene2;

/* the renderer is applied to both scene containers */
containerForScene1.appendChild(universalRenderer.domElement);
containerForScene2.appendChild(universalRenderer.domElement);

Upon playing both animations, both scenes appear at half-opacity instead of just the intended first scene. Why does CSS styling applied to one HTML scene-containing element affect all other scene-containing elements? Must I resort to manually controlling mesh opacity?

Appreciate your insights.

css three.js opacity scene

Answer 1

Answer №1

Learn how to set transparency on a THREE.Group:

In Three.js, a Group acts as a container for objects. While you cannot directly apply transparency to a Group, you can achieve this by manipulating the Material assigned to the individual children within the group. One approach is to use a technique called monkey patching to enable transparency settings on a Group.

// Apply Monkey Patch for Transparency
Object.defineProperty(THREE.Group.prototype, "transparent", {
  set: function(newXP) {
    this.traverse(node => {
      if (node.material) {
        node.material.transparent = newXP
        node.material.opacity = (newXP) ? 0.5 : 1
      }
    })
  }
})

// Set up the renderer and scene

const renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true
})
document.body.appendChild(renderer.domElement)

renderer.setSize(window.innerWidth, window.innerHeight)

const scene = new THREE.Scene()

const size = new THREE.Vector2()
renderer.getSize(size)
const camera = new THREE.PerspectiveCamera(28, size.x / size.y, 1, 1000)
camera.position.set(0, 20, 100)
camera.lookAt(scene.position)
scene.add(camera)

camera.add(new THREE.PointLight(0xffffff, 1))

function render() {
  renderer.render(scene, camera)
}

const axis = new THREE.Vector3(0, 1, 0)

function animate() {
  requestAnimationFrame(animate)
  camera.position.applyAxisAngle(axis, 0.005)
  camera.lookAt(scene.position)
  render()
}
animate()

// Add cube objects to the scene with different materials

const cubeGeometry = new THREE.BoxBufferGeometry(5, 5, 5)

let opaqueCubes = []
let transparentCubes = []

const getRandomPosition = () => Math.random() * ((Math.random() <= 0.5) ? -10 : 10)

const opaqueGroup = new THREE.Group()
scene.add(opaqueGroup)
for (let i = 0; i < 10; ++i) {
  opaqueGroup.add(new THREE.Mesh(cubeGeometry, new THREE.MeshPhongMaterial({
    color: "red"
  })))
  opaqueGroup.children[i].position.set(getRandomPosition(), getRandomPosition(), getRandomPosition())
}

const transparentGroup = new THREE.Group()
scene.add(transparentGroup)
for (let i = 0; i < 10; ++i) {
  transparentGroup.add(new THREE.Mesh(cubeGeometry, new THREE.MeshPhongMaterial({
    color: "green"
  })))
  transparentGroup.children[i].position.set(getRandomPosition(-10, 10), getRandomPosition(-10, 10), getRandomPosition(-10, 10))
}

// Control transparency using input checkbox

const xparent = document.getElementById("xparent")
xparent.addEventListener("change", (e) => {
  transparentGroup.transparent = xparent.checked
})

html,
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#control {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.js"></script>
<div id="control">
  <label>Make the green cubes transparent:<input id="xparent" type="checkbox" /></label>
  <div>

Answer 2

Learn how to set transparency on a THREE.Group:

In Three.js, a Group acts as a container for objects. While you cannot directly apply transparency to a Group, you can achieve this by manipulating the Material assigned to the individual children within the group. One approach is to use a technique called monkey patching to enable transparency settings on a Group.

// Apply Monkey Patch for Transparency
Object.defineProperty(THREE.Group.prototype, "transparent", {
  set: function(newXP) {
    this.traverse(node => {
      if (node.material) {
        node.material.transparent = newXP
        node.material.opacity = (newXP) ? 0.5 : 1
      }
    })
  }
})

// Set up the renderer and scene

const renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true
})
document.body.appendChild(renderer.domElement)

renderer.setSize(window.innerWidth, window.innerHeight)

const scene = new THREE.Scene()

const size = new THREE.Vector2()
renderer.getSize(size)
const camera = new THREE.PerspectiveCamera(28, size.x / size.y, 1, 1000)
camera.position.set(0, 20, 100)
camera.lookAt(scene.position)
scene.add(camera)

camera.add(new THREE.PointLight(0xffffff, 1))

function render() {
  renderer.render(scene, camera)
}

const axis = new THREE.Vector3(0, 1, 0)

function animate() {
  requestAnimationFrame(animate)
  camera.position.applyAxisAngle(axis, 0.005)
  camera.lookAt(scene.position)
  render()
}
animate()

// Add cube objects to the scene with different materials

const cubeGeometry = new THREE.BoxBufferGeometry(5, 5, 5)

let opaqueCubes = []
let transparentCubes = []

const getRandomPosition = () => Math.random() * ((Math.random() <= 0.5) ? -10 : 10)

const opaqueGroup = new THREE.Group()
scene.add(opaqueGroup)
for (let i = 0; i < 10; ++i) {
  opaqueGroup.add(new THREE.Mesh(cubeGeometry, new THREE.MeshPhongMaterial({
    color: "red"
  })))
  opaqueGroup.children[i].position.set(getRandomPosition(), getRandomPosition(), getRandomPosition())
}

const transparentGroup = new THREE.Group()
scene.add(transparentGroup)
for (let i = 0; i < 10; ++i) {
  transparentGroup.add(new THREE.Mesh(cubeGeometry, new THREE.MeshPhongMaterial({
    color: "green"
  })))
  transparentGroup.children[i].position.set(getRandomPosition(-10, 10), getRandomPosition(-10, 10), getRandomPosition(-10, 10))
}

// Control transparency using input checkbox

const xparent = document.getElementById("xparent")
xparent.addEventListener("change", (e) => {
  transparentGroup.transparent = xparent.checked
})

html,
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#control {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.js"></script>
<div id="control">
  <label>Make the green cubes transparent:<input id="xparent" type="checkbox" /></label>
  <div>

Ways to avoid the cascading of CSS styles onto multiple Three.JS scenes

Answer №1

Similar questions

What is the best approach to achieve the old THREE.SpriteAlignment effect in the latest version of three.js?

Enhancing Bootstrap project with personalized CSS styling

Drop-down and autocomplete feature in Material UI design framework

Enhancing image clips using jQuery techniques

Tapping on a DIV element that overlays a YouTube video on an iPad does not trigger any action

Vuetify: how to disable the color transition for v-icon

Applying different styling to the same class within a different element using the + selector

Determining the height of a jQuery mobile page

Unknown CSS element discovered: bootstrap, gradient, carousel

Minimize the entire project by compressing the .css, .js, and .html files

What methods can I implement to prevent my boxes from becoming stretched out?

Optimizing animations in Three.js with skeleton recalculations

Ensuring Your IMG is Perfectly Centered in DIV Across all Browsers

Tips for keeping my background image from shrinking when I resize the window?

What is the most effective method for embedding a Kotlin program into a website?

RectAreaLight in Three js does not produce any light reflection when used with MeshPhongMaterial due to lack of support for OES_texture_half

Embracing the HTML5 Approach to iframes

Displaying a div upon hovering over another div is resulting in numerous server requests and a flickering effect

Is there a way to eliminate the gap between two horizontal rule tags?

Retrieve information from the database and showcase it in a competitive ranking system