Resizing imported object/resizing shape

Questions
, ,
1

Hello! I am new to web development and i’ve come across three.js while trying to develop a small editor. Right now i am trying to edit the dimensions (width/length/depth) of an imported object, or to create the object itself in three.js (but i am not sure if that is the easier way). I looked it up and i kind of found an answer, but i don’t understand how to implement that (Resize object without distortion).

Untitled
Untitled706×718 28.1 KB

When i want to resize the width of the object, only the yellow parts will be resized and the gray parts will stay the same, but will be moved. I get how that could be possible while making the object with three.js geometries (making each parts of the object a different shape and then put them together, but that is so much work if you have a lot of objects), but as i can see it can also be done with imports.
I am trying to understand how morphing works but that’s kind of over me at the moment.

2

I think you need separated mesh for each planks.
When you increasing width, when move left and right, back and yellow increase width (scale.x).

1 Like
3

Maybe you can take something from this editor.
Construction of frames with contour/profile
and from the Collection of examples from discourse.threejs.org - 2019 - ConstructionBasis

4

When i am importing the 3D gltf model, i am actually importing it with separate meshes(from blender) so each plank has a mesh but i don’t know how to acces it now.

names
names1154×349 117 KB
.

5

Easy. Where you loading glth make value “mesh” before loading out of all functions.

<script>
let camera, scene, renderer;
------> var mesh;
</script>
<script type="module">
import * as THREE from '../build/three.module.js';
init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );
scene = new THREE.Scene();

loader.load( 'bathroom.glb', function ( gltf ) {
gltf.scene.traverse( function ( child ) {
if ( child.isMesh ) {
roughnessMipmapper.generateMipmaps( child.material );
}
} );


------> mesh=gltf.scene;
------> scene.add( mesh );
}

And then you can access mesh:

mesh.children[0].position.x-=2;
mesh.children[4].scele.z+=0.1;

image
image959×167 12.3 KB

6

I’m sorry, i am really new to this. I am getting an error which is probably caused by the way i import the libraries maybe?

mesh
mesh1061×877 153 KB 

`<body>
    <script src="lib/three.js"></script>
    <script src="lib/GLTFLoader.js"></script>
    <script src="lib/OrbitControls.js"></script>
    <script src="lib/index.js"></script>
  </body>`
7

Need delete this text
image

8

I might have found the problem. I actually have multiple meshes, but only one mesh(the one called “Group”) has children attributes (it has 5 Arrays). The other meshes are actually meshes attributed to groups of planks(i actually grouped the vertical planks together in a group and the horizontal planks together in another group. So i actually messed it up from importing. I will be drawing another object and come back with an update.

Edit: Yep, that was it. You don’t have to group anything in blender because the import won’t have all the meshes.

Thanks for the help @Chaser_Code

Now onto another problem: when i scale a children, it actually does a bidirectional scale, so if i scale it on x axis, it will actually scale towards -x and +x equally. After the scaling it actually moves the other children (so the children that was scaled will not go through the other children, it will push them away) but it also creates a space inbetween based on how big the scale was. How can i have that not happen? Is it possible to scale towards one direction(either - or +) or does it have to be bidirectional? Or is there another way to link together the pieces of the object after scaling?

pushing
pushing606×806 601 Bytes

9

Three.js scaling in 2 directions. If using three,j scale then u can move mesh to delete space.