Display or conceal objects within a 3D model with an HTML checkbox

Question

Display or conceal objects within a 3D model with an HTML checkbox

I have utilized JavaScript, CSS, and Three.js to create a 3D model.

The project comprises a total of 5 JS files, 1 CSS file, and 1 HTML file.

Here is an overview of the model:

[]

Showers have been incorporated for each cubicle, which should only be visible when the user selects the checkbox corresponding to a specific cubicle.

For example, if the user ticks the 'cubicle 1 checkbox', the shower should appear in cubicle 1.

Below is a relevant segment of code from the responsible JavaScript file:


        function createPartition() {
            // Code snippet here...
        }
        
        // Additional section of code related to adding showers
        shower = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.11, 0.45), wallMaterial);
        showerhead = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, -0.04), wallMaterial);

        partitionLeft.add(shower);
        partitionLeft.add(showerhead);
        
        // Positioning of elements
        shower.position.set(0.4, 0.5, -1.312);
        showerhead.position.set(0.4, 0.4, -1.112);

The checkboxes' values are defined in the index.html file:


        <input type="checkbox" name="cube1" value="cube1"> Cubicle 1 <br>
        <input type="checkbox" name="cube2" value="cube2" checked> Cubicle 2 <br>

Does anyone have any suggestions on how to display the 'shower' when a specific checkbox is selected by the user?

javascript three.js 3d-modelling 3d-model

Answer 1

Answer №1

To conceal a shower using only JavaScript, you can start by assigning a class to the shower element and setting its display property to none in your CSS. Make sure each of your shower heads is assigned an ID as well.

Your CSS code would resemble the following:

#showerHead1{
     display:none;
}
.displayShower{
     display:block;
}

Next, create an if statement to check if either checkbox for cube1 or cube 2 is selected, then run:

document.getElementById("showerHead1").className = "displayShower";

This line of code will override the default class for showerHead1 specified in the CSS file.

If you need to remove the class later on, simply use document.getElementById("showerHead1").classList.remove("displayShower");

For further information, consult these resources:

Adding a class: https://www.w3schools.com/jsref/prop_html_classname.asp

Removing a class: https://www.w3schools.com/howto/howto_js_remove_class.asp

Answer 2

To conceal a shower using only JavaScript, you can start by assigning a class to the shower element and setting its display property to none in your CSS. Make sure each of your shower heads is assigned an ID as well.

Your CSS code would resemble the following:

#showerHead1{
     display:none;
}
.displayShower{
     display:block;
}

Next, create an if statement to check if either checkbox for cube1 or cube 2 is selected, then run:

document.getElementById("showerHead1").className = "displayShower";

This line of code will override the default class for showerHead1 specified in the CSS file.

If you need to remove the class later on, simply use document.getElementById("showerHead1").classList.remove("displayShower");

For further information, consult these resources:

Adding a class: https://www.w3schools.com/jsref/prop_html_classname.asp

Removing a class: https://www.w3schools.com/howto/howto_js_remove_class.asp

Answer 3

Answer №2

When incorporating JavaScript into your code, consider adding an onclick event to the button along with an external function to easily add or remove a specific mesh.

I personally tested this method and found success with it.

I hope you find this solution helpful as well.

Answer 4

When incorporating JavaScript into your code, consider adding an onclick event to the button along with an external function to easily add or remove a specific mesh.

I personally tested this method and found success with it.

I hope you find this solution helpful as well.

Answer 5

Answer №3

Here's a basic idea of how you might approach this:

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 3, 5);
camera.lookAt(scene.position);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function createCube(id, color, position, isVisible) {
  let cube = new THREE.Mesh(new THREE.BoxGeometry(2, 3, 2), new THREE.MeshBasicMaterial({
    color: color,
    wireframe: true
  }));
  cube.position.copy(position);
  cube.visible = isVisible;
  scene.add(cube);

  let checkboxId = "cube" + id;
  let checkbox = document.createElement("INPUT");
  checkbox.setAttribute("type", "checkbox");
  checkbox.checked = isVisible;
  checkbox.id = checkboxId;
  checkbox.addEventListener("click", function() {
    cube.visible = !cube.visible;
  });

  chbxContainer.appendChild(checkbox);
}

createCube("1", "red", new THREE.Vector3(-2, 0, 0), true);
createCube("2", "blue", new THREE.Vector3(2, 0, 0), false);

animate();

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

#chbxContainer {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script>
<div id="chbxContainer"></div>

Answer 6

Here's a basic idea of how you might approach this:

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 3, 5);
camera.lookAt(scene.position);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function createCube(id, color, position, isVisible) {
  let cube = new THREE.Mesh(new THREE.BoxGeometry(2, 3, 2), new THREE.MeshBasicMaterial({
    color: color,
    wireframe: true
  }));
  cube.position.copy(position);
  cube.visible = isVisible;
  scene.add(cube);

  let checkboxId = "cube" + id;
  let checkbox = document.createElement("INPUT");
  checkbox.setAttribute("type", "checkbox");
  checkbox.checked = isVisible;
  checkbox.id = checkboxId;
  checkbox.addEventListener("click", function() {
    cube.visible = !cube.visible;
  });

  chbxContainer.appendChild(checkbox);
}

createCube("1", "red", new THREE.Vector3(-2, 0, 0), true);
createCube("2", "blue", new THREE.Vector3(2, 0, 0), false);

animate();

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

#chbxContainer {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script>
<div id="chbxContainer"></div>

Display or conceal objects within a 3D model with an HTML checkbox

Answer №1

Answer №2

Answer №3

Similar questions

The image is experiencing difficulty loading from the Express static directory

Exploring the world of Bootstrap Twitter 3.0 alongside the wonders of Knockout

Experiencing difficulty with loading elements into their respective containers

Creating flexible items with a 1:1 ratio and ensuring that the padding on the left and right of the flex container remains consistent

ESLint is parsing through alternative configurations

Use jQuery to extract data from the URL instead of relying on PHP

Inaccurate Guild Member Filtering

JSON objects not loading properly in Bootstrap table

JavaScript functions smoothly on Google Chrome but is restricted on Internet Explorer

Having trouble retrieving information using JSON from openweather.com

Firebase Error: Trying to access properties of null object (indexOf)

What could be causing the issue of req.body being undefined within the destination function of Multer's diskStorage?

What is the method for providing a date format choice in JSON?

The ng-model in Angular is unable to capture the initial input value on load

Tips for guiding users to a different page based on whether a linkid is associated with a specific Cat

Sorting Columns in PrimeVue DataTable by Date and Time

What could be causing the readTextFile function to return undefined?

Utilizing AJAX to integrate the Google Maps Direction API

Utilizing Kendo UI DateTimePicker to transfer chosen date to moment.js

Is there an alternative solution to the issue of the jQuery resize() event not triggering when an input is