Jump to content

Merging with Three.JS


Recommended Posts

Hey, i'm in the process of learning three.js. I am currently trying to merge two meshes together to to build a movable lego brick. I'm working inside the three.js editor Mr Doob created and using the brick.js module mattmatchell did. Below is some sample code of what i'm working with. I have tried many iterations of merging the component pieces and adding them to the scene but i'm just missing something. Any hints on how to set this up? If you need more info i'll be happy to add to this. Just need a nudge over this bump. Thanks for the help!


BRICK.square=function(colorCode, w, d, h){
w = w || 1;
h = h || 3;
d = d || 1;

THREE.Object3D.call( this );
var faceMaterial = new THREE.MeshLambertMaterial({color: BRICK.color(colorCode).face});

var mesh=new THREE.Mesh(new THREE.CubeGeometry(20*w,8*h,20*d), faceMaterial);
mesh.matrixAutoUpdate = true;

for(var i=1; i<=w; i++){
for(var j=1; j<=d; j++){
var stud=new THREE.Mesh(new THREE.CylinderGeometry(6,6, 4, 32, 4), faceMaterial);

stud.matrixAutoUpdate = false;




Link to comment
Share on other sites

  • 3 years later...

I know this is old but It's one of the top hits on google for merging geometries.

As there wasn't an answer here I started messing around with the above code in a code pen.

Open up the JS and try changing the brick sizes and the color.

Mouse controls will move the scene around.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...