How to remove a face of a cube

What is a cube then? O_o

You can set whatever initial scale you want to the group object.
I’ve updated the fiddle: Three.js simple rotating cube tutorial - JSFiddle - Code Playground

I want to know how i can do in other objects and how to customize them.
It´s possible to add a button or a control in dat.gui to clear the scene or remove the object?
Thanks everyone for the help!!

@Ricardo_Rodrigues I have an advice for you:

@ben created our bookshelf :slight_smile: Have a look at it, you’ll find many interesting things there :wink:

1 Like

Thanks Man!!

Is this what you guys help me to do on this: https://jsfiddle.net/prisoner849/7bmqnrds/

Develop JavaScript object for modeling a box (the box is open at the top, like
illustrated in the figure). The construction of the object should have as input parameters its dimensions
(height, width, depth), as well as the thickness of each face of the carton (the thickness is the same in
all sides of the carton).

So, you simply have to use thin boxes (meshes with THREE.BoxGeometry()) instead of planes :slight_smile:

I am trying to create a button gui.add to remove the last box create but i can´t, can someone help me?
I already have done the button for create a new box in random position

var scene = new THREE.Scene();
var clock = new THREE.Clock();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 300);
camera.position.set(2, 5, 3);

var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Chão
var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// Editar posição e rodar chão
plane.rotation.x = -0.5 * Math.PI; // Math.PI para o chão ficar plano e não na diagonal
plane.position.x = 0;
plane.position.y = -0.6;
plane.position.z = 0;
// Adicionar Chão
 scene.add(plane);

var ad = new THREE.OrbitControls(camera, renderer.domElement);

var group = new THREE.Group();


group.scale.set(1, 1, 2);
scene.add(group)

setPlane("y",  Math.PI * 0.5, 333333); //px
setPlane("y", -Math.PI * 0.5, 333333); //nx
setPlane("x",  Math.PI * 0.5, 0xffffff); //ny
setPlane("y",  0, 333333); //pz
setPlane("y",  Math.PI, 333333);// nz

function setPlane(axis, angle, color) {
  let planeGeom = new THREE.PlaneGeometry(1, 1, 1, 1);
  planeGeom.translate(0, 0, 0.5);
  switch (axis) {
    case 'y':
      planeGeom.rotateY(angle);
      break;
    default:
      planeGeom.rotateX(angle);
  }
  let plane = new THREE.Mesh(planeGeom, new THREE.MeshBasicMaterial({color: color ,side: THREE.DoubleSide}));
  group.add(plane);
  
}
// Botão para ver objeto
var controlss = new function () {

// Nova Caixa	
this.NovaCaixa = function(){
	var group = new THREE.Group();
	x = Math.random(1,4);
	group.scale.set(x, x, x);
	scene.add(group)

setPlane("y",  Math.PI * 0.5, 333333); //px
setPlane("y", -Math.PI * 0.5, 333333); //nx
setPlane("x",  Math.PI * 0.5, 0xffffff); //ny
setPlane("y",  0, 333333); //pz
setPlane("y",  Math.PI, 333333);// nz

function setPlane(axis, angle, color) {
  let planeGeom = new THREE.PlaneGeometry(1, 1, 1, 1);
  planeGeom.translate(0, 0, 0.5);
  switch (axis) {
    case 'y':
      planeGeom.rotateY(angle);
      break;
    default:
      planeGeom.rotateX(angle);
  }
  let plane = new THREE.Mesh(planeGeom, new THREE.MeshBasicMaterial({color: color, side: THREE.DoubleSide}));
  group.position.x = -20 + Math.round((Math.random() * planeGeometry.parameters.width));
  group.position.y = Math.random(0,3)  ;
  group.position.z = -35 + Math.round((Math.random() * planeGeometry.parameters.width));
  group.add(plane);
}

}
// Fim Nova Caixa

// Visivel/Invisivel	
this.visible = true;

//Limpar Cena
this.clearScene = function () {
scene = new THREE.Scene();
};
 };
 
// Controlos de Gui
var gui = new dat.GUI();
// Caixa
var box = gui.addFolder("Caixa");
box.add(group.scale, 'x', 0.1, 5);
box.add(group.scale, "y", 0.1, 5);
box.add(group.scale, "z", 0.1, 5);

// Outros comandos
gui.add(controlss, 'visible');
gui.add(controlss, "clearScene");
gui.add(controlss, "NovaCaixa");
render();


function render() {
  // Mostrar e Apagar Objeto/Caixa da Cena
  group.visible = ad.visible;
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

render();

I have copied the code and get the error SyntaxError: illegal character
( at “y” )

Also ‘x’ .

I can’t test it this way.


Please use 20180524-2150-39502 for the source code.:wink:

my code is working, don´t know why you got a error

It’ll probably be the character encoding.
( quotes )

This is how it should be:
"y"
It should work with Preformatted text 20180524-2150-39502
Please edit the post and use Preformatted text.

1 Like

but how can i create a function to remove created object like in the code??

Now the code works for me too :smiley:

If you have questions, it makes sense to translate the comments into English. Not everyone speaks your language. Is it Spanish? My translator DeepL Translate gave me some words.

Look at my example,
http://sandboxthreeg.threejs.hofk.de/MagicBoxTHREEg.html
use Ctrl +U , line 331

function showNewMesh( ) {
	
	if ( mesh ) {
		
		scene.remove(mesh);
		geometry.dispose();
		
	}
	
	if ( vertexFaceNumbersHelper ) {
		
		scene.remove( vertexFaceNumbersHelper );
		
	}
	
	if ( vertexNormalsHelper ) {
		
		scene.remove( vertexNormalsHelper );
		vertexNormalsHelper.geometry.dispose();
		
	}

Can someone explain me the diference between OrthographicCamera and PerspectiveCamera??
Don´t know how to position them in the scene, look so similar…

https://answers.unity.com/questions/1218955/comparing-orthographic-and-perspective-cameras.html

https://www.script-tutorials.com/webgl-with-three-js-lesson-9/

https://threejs.org/examples/#webgl_camera

This part really help, thanks bro

Perspective:

Need to simulate a real world view

Scene needs to have depth

Commonly used in 3D games

Orthograhpic

Objects don’t need to have depth

Objects are flat

Commonly used in 2D games

aaa

Can you help me with dat?

@Ricardo_Rodrigues Please don’t ask multiple question in a single thread. Besides, you are asking a lot of beginner questions. You should take your time and study some basic literature about computer graphics and three.js.

3 Likes

Ye i know but i have no time to read all the stuff about this, i just want to finish the project to school i don´t like programing man, just want to finish this, i know i sound like a asshole but i´ts true. I don´t like programming and don´t like 3d but i need to do it or i am done. is the last class to finish college.

can anyone help me out ? I need grid plane/edge not a solid color. I am also noob. :slightly_smiling_face:

Can you make a sketch of what it should look like?


Possibly helps
HidingEdgesBox
FatLineEdges
BoxLabyrinthBasic
3DGridOfLines
GridBox

from the Collection of examples from discourse.threejs.org