How to draw a particular Box shape?

Questions
1

I am trying to draw box as shown in picture. Box
but i am not able to draw it as in picture.so anyone can please help me.

2

You should create your geometry in Blender, export it to glTF and import the asset via GLTFLoader. This is probably the easiest way, especially for a beginner of three.js.

You can preview your glTF export with this tool: https://gltf-viewer.donmccurdy.com/

3

Hi!
I didn’t get, which box you can’t create? The blue one?

4

yes. I’m not able to draw that blue box.

5

@pavan Well… You could show us what you’ve tried.
So far I see that that box could be created with THREE.BoxGeometry()/THREE.BoxBufferGeometry().

@Mugen87 Michael, could you give me a hint, why that blue box should be made in Blender? :slight_smile: I’m serious, maybe I’m overlooking extraordinary of that box?

6

I thought the user wants to procedurally create the entire geometry of the screenshot.

1 Like
7

@Mugen87
:beers: Yeah, I had the same first thought :slight_smile:

8

I am new to Three js but here is fiddle what I have tried.

9

Your code works correctly.
You just need to add lights and change the material of the box to that affect by light.
https://jsfiddle.net/prisoner849/45few2xe/

10

Thank you very much.

11

You’re welcome :slight_smile:

12

In your code i commented orbitControl. but now it’s not working. here is fiddle

13

Actually, it’s working :slight_smile: Your camera doesn’t look at the box.

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 300);
camera.position.set(2, 3, 4);
camera.lookAt(scene.position); // look at the center of the scene
14

Ok.
Thank you once again.