So, you simply have to use thin boxes (meshes with THREE.BoxGeometry()
) instead of planes
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 for the source code.
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
Please edit the post and use Preformatted text.
but how can i create a function to remove created object like in the code??
Now the code works for me too
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…
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
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.
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.
Can you make a sketch of what it should look like?
Possibly helps
HidingEdgesBox
FatLineEdges
BoxLabyrinthBasic
3DGridOfLines
GridBox