nbriz / threejs_playGnd

pedagogical + experimental tool/space/editor for three.js/webGL
55 stars 16 forks source link

2 Objects #6

Open bigsby-exe opened 11 years ago

bigsby-exe commented 11 years ago

Hi i'm pretty new to the whole of java script and was just wondering how would I add 2 meshes to a sketch and say have 2 adjacent objects rotating separately

Thanks bzyg7b

yyolk commented 11 years ago

you would just need to instantiate two different mesh objects:

ie:

geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshNormalMaterial({shading: THREE.FlatShading});
mesh = new THREE.Mesh(geometry, material);
mesh_two = new THREE.Mesh(geometry,material);
scene.add(mesh);
scene.add(mesh_two);

a mesh = a geometry and a material mesh & mesh_two are essentially the same object visually but to the environment it's two different objects.

bigsby-exe commented 11 years ago

Ahhh ok awesome and I can get these to rotate independently right?

yyolk commented 11 years ago

Yes. Use methods as you would normally.

Going off the example above…

mesh.position.x = Math.random() * 1500 - 750;
mesh.position.y = Math.random() * 1500 - 750;
mesh.position.z = Math.random() * 1500 - 750;
mesh_two.position.x = Math.random() * 1500 - 750;
mesh_two.position.y = Math.random() * 1500 - 750;
mesh_two.position.z = Math.random() * 1500 - 750;
bigsby-exe commented 11 years ago

Ohh ok i'll have a mess round and see if I can work it out thanks XD

bigsby-exe commented 11 years ago

Yay thank you I got it all working but do you know how i can set position and size based on the window size so it all fits on whatever window/screen size it is viewed on?

nbriz commented 11 years ago

if you want your entire sketch to adjust to the full window size add this event listener to your setup:

window.addEventListener( 'resize', onWindowResize, false );

that goes before the closing bracket } of your setup, somewhere after the mesh code above and then inbetween your setup function and your draw function add this function:

function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); }

bigsby-exe commented 11 years ago

ok thank you i'll give it a try XD