I am a noob on three, just started a 2 weeks ago, and i have a question, maybe it´s easy but for me no ahahah. How can i create a cube and remove is top face, to represent something like the image or a open box.
Please don´t ignore, thanks
Hi!
The easiest way is to buildt that box of 5 separated planes.
The other options:
- Build a box of
THREE.BoxGeometry()/THREE.BoxBufferGeometry()and use 6 materials, one of them is fully transparent/invisible. - Build a box of
THREE.BoxGeometry()and remove the faces, which form the top. - Build a box of
THREE.BoxBufferGeometry()and change its.index, removing the indices, which form the top.
That’s what I could think of. Maybe I’m wrong with some options. Give them a try anyway 
Take a look under the hood of box geometries.
1 Like
Hi,
Can you help me with dat and understand how it work?
Sorry very noob 
Yes, but I’d like that you think yourself about the problem you have 
Let’s start with the easiest way. Build a box of five planes 
As a playground, you can use jsfiddle.net or codepen.io
Everyone was like that
1 Like
So i create a planegeometry, how i put five to look like a cube with a miss part?
Code:
01-basic-2d-geometries-plane.html (4.5 KB)
What revision of Three.js do you use?
Since you know how to build a plane with THREE.PlaneGeometry(), it’s enough to know about those methods of a geometry to build a topless box:
https://threejs.org/docs/index.html#api/core/Geometry.rotateX
https://threejs.org/docs/index.html#api/core/Geometry.rotateY
https://threejs.org/docs/index.html#api/core/Geometry.rotateZ
https://threejs.org/docs/index.html#api/core/Geometry.translate
This might be the easiest for beginners to understand.
Experiment with this code:
<!DOCTYPE html>
<!-- *** box 5 *** -->
<head> <title> box 5 </title> <meta charset="utf-8" /> </head>
<body> </body>
<script src="three.min.92.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 1, 4.5 );
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
var container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
var material1 = new THREE.MeshBasicMaterial( { color: 0x0000ff, side: THREE.DoubleSide } );
var material2 = new THREE.MeshBasicMaterial( { color: 0xff00ff, side: THREE.DoubleSide } );
var material3 = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
var materialTransparent = new THREE.MeshBasicMaterial( { transparent: true, opacity: 0, wireframe: true, side: THREE.DoubleSide} );
var geometry = new THREE.BoxBufferGeometry( 1, 1.5, 1 );
var materials = [ material1, materialTransparent, material2, material2, material3, material3 ]
var mesh = new THREE.Mesh( geometry, materials );
scene.add( mesh );
animate();
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
}
</script>
</html>
3 Likes
Hi,
Thanks for the help, i will test the code but i make 5 planes, can i group them? So when i use dat.gui all the planes edit together?
Thanks
There’s the example with 5 planes. Interactivity of dat.GUI is included.
https://jsfiddle.net/prisoner849/7bmqnrds/
On this Code,
https://jsfiddle.net/prisoner849/7bmqnrds/
how can i transform the cube in a rectangular parallelepiped???
setPlane(“y”, Math.PI * 0.5, 0xff0000, 2, 2, 0, 0, 0); //px
setPlane(“y”, -Math.PI * 0.5, 0xff0000, 2, 2, 1, 0, 0); //nx
setPlane(“x”, Math.PI * 0.5, 0x00ff00, 1, 2, 1, -0.5, 0); //ny
setPlane(“y”, 0, 0x0000ff, 1, 2,1,-0.5,0 ); //pz
setPlane(“y”, Math.PI, 0x0000ff);// nz
function setPlane(axis, angle, color, w, h, t, tx, tz) {
let planeGeom = new THREE.PlaneGeometry(w, h, 1, 1);
planeGeom.translate(tx, tz, t);
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);
}
ya basically had the right mindset but you also need to adjust the translate value for EACH Plane, can’t do it all at once because you are also rotating and what not.
Add 5 variables for adjustable width, height, translate x, Y Z.
Also you can continue to play around with it.
You can change the translate values in the animation function to expand and shrink the rectangle, make it explode and what not, all sorts of special effects. .
Hi, i am sorry but i don’t get it.
I am learning this for College and the teacher just give us the code he don´t explain nothing and now we need to make this work and i don´t know how to work with this and how it works. Sorry for being so noob
Which part are you not getting?
The parts I added? or the whole thing
Did it in Jsfiddle for you, might make it more clear.
I don´t get this part
setPlane(“y”, Math.PI * 0.5, 0xff0000, 2, 2, 0, 0, 0); //px
setPlane(“y”, -Math.PI * 0.5, 0xff0000, 2, 2, 1, 0, 0); //nx
setPlane(“x”, Math.PI * 0.5, 0x00ff00, 1, 2, 1, -0.5, 0); //ny
setPlane(“y”, 0, 0x0000ff, 1, 2,1,-0.5,0 ); //pz
setPlane(“y”, Math.PI, 0x0000ff);// nz
function setPlane(axis, angle, color, w, h, t, tx, tz) {
let planeGeom = new THREE.PlaneGeometry(w, h, 1, 1);
planeGeom.translate(tx, tz, t);
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);
}
Where i need to change to make a rectangular parallelepiped?
Why is missing one side?
Thanks for the help man
Ah OK
SetPlane is the function for creating each plane you see.
and you called it 5 times to create 5 planes.
Each plane has to be different orientation and position.
but each plane starts off in the same spot on x and y so (0,0) and it’s Vertical and has a width =1 and height =1.
variables in the brackets
axis = ( “x” or “y” is just to make it it’s rotated in the right direction and in the function you see a switch(two options depending on x or y)
angle is how much to rotate, remember it started vertically. Uses radians.
0xffff are color values from hex code(google this)
and then w is width and h is height so I’m adjusting the height and width for each plane.
tx, ty tz are how much away from the (0,0) the x and y on the grid. Remember all planes are created at (0,0)
the missing side is for you to put in so you can learn.
So all you have to do is adjust the w, h, t, tx, tz and you modify each side individually.
You can add sides, and create another square alongside it.
You can add a for loop and create building with many floors and decide how high each floor is by adjusting how much it offsets from the xyz.
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 Have a look at it, you’ll find many interesting things there
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).