I am new to 3D Graphics programming. I'm using Three.js to design a software that uses 3D visualisation for 3D bin packaging. Right now I'm using the below code to create and position two elements.
var camera, scene, renderer;
var mesh, mesh2;
init();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 800;
scene = new THREE.Scene();
var texture = new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/crate.gif' );
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var geometry2 = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( {map:texture} );
mesh = new THREE.Mesh( geometry, material );
mesh2 = new THREE.Mesh( geometry2, material );
mesh2.position.x = 170
mesh2.position.y = -48
mesh2.position.z = 100
mesh.rotation.x = 0.45;
mesh.rotation.y = 1;
mesh2.rotation.x = 0.45;
mesh2.rotation.y = 1;
scene.add( mesh2 );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
Right now I'm using (170, -48, 100) as the coordinates to align the second cube. I've arrived to these numbers by tweaking the numbers and constantly checking. But there should be some formula to get these x,y,z since I'm rotating them to a certain angle (x=0.45, y=1). I'm not sure how to start the calculation for this.
The problem statement is, given a set of cubes dimensions' (l1, w1, h1), (h2, w2, h2) and so on and cubes positions (x1, y1, z1) (x2, y2, z2) how to calculate and place them near and/or stack them?
Make mesh2 a child of mesh: mesh.add( mesh2 )
mesh2 will inherit rotation of mesh and you will define relative offsets to shift it in coordinate space of parent.
Fixed example:
mesh = new THREE.Mesh( geometry, material );
mesh2 = new THREE.Mesh( geometry2, material );
mesh2.position.x = 170
//mesh2.position.y = -48
//mesh2.position.z = 100
mesh.rotation.x = 0.45;
mesh.rotation.y = 1;
//mesh2.rotation.x = 0.45;
//mesh2.rotation.y = 1;
scene.add( mesh );
mesh.add( mesh2 ); // << ---- solution
Updated: Also possible without parent-child hierarchy.
let mesh = new THREE.Mesh( geometry, material );
let mesh2 = new THREE.Mesh( geometry2, material );
// mesh2.position.x = 170
// mesh2.position.y = -48
// mesh2.position.z = 100
mesh.rotation.x = 0.45;
mesh.rotation.y = 1;
mesh.updateMatrix(); // <<-- this is essential, to write .position and .rotation values into object transformation matrix.
// mesh2.rotation.x = 0.45;
// mesh2.rotation.y = 1;
scene.add( mesh );
// apply local transforms
mesh2.applyMatrix(new THREE.Matrix4().makeTranslation(210, 0, 0));
// apply transforms of mesh on top
mesh2.applyMatrix(mesh.matrix);
scene.add( mesh2 ); // << ---- add directly to Scene
Related
In my project I am creating LineSegments (LineMesh) with modified geometry (changing the vertex positions) from another mesh and with MeshBasicMaterialwith black color.Adding the LineMesh to the already existing Mesh.
Everything works fine.
But now I want to hide particular part of the mesh by setting visible property to false by taking the materialIndex from the faces of geometry.But in this, the previously created mesh is hiding but LineMesh added to it is not hiding.
Is it possible to hide particular part of LineMesh and also wanted to know whether LineMesh will support MultiMaterial.So that it will be easy for me to apply visibility, transparent property to particular part of Mesh.
var mesh, renderer, scene, camera, materials;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 300;
camera.lookAt( scene.position );
// directional
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );
// ambient
var ambient = new THREE.AmbientLight( 0x222222 );
scene.add( ambient );
// geometry
var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );
// materials
materials = [
new THREE.MeshLambertMaterial( { color: 0xffff00, side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { color: 0x00ffff, side: THREE.DoubleSide } )
];
// assign material to each face
for( var i = 0; i < geometry.faces.length; i++ ) {
geometry.faces[ i ].materialIndex = THREE.Math.randInt( 0, 1 );
}
geometry.sortFacesByMaterialIndex(); // optional, to reduce draw calls
// mesh
mesh = new THREE.Mesh( geometry, materials );
scene.add( mesh );
mat = new THREE.LineBasicMaterial({color: 0x000000});
mesh2= new THREE.LineSegments(geometry, mat);
mesh.add(mesh2);
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
mesh.rotation.z += 0.03;
renderer.render( scene, camera );
}
This below code is not to be working for LineSegments
mesh2= new THREE.LineSegments(geometry, new THREE.MultiMaterial(materials));
I'm trying to make something responsive in Threejs which will be full screen.
I am having a hard time understanding the concept of positioning of objects due to this.
I will also want to add animations so need the positions to be dynamic.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var materialRed = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var materialBlue = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
var circle = new THREE.Mesh( new THREE.CircleGeometry( 12, 128 ), materialRed );
scene.add(circle);
var square = [];
square.push( new THREE.Mesh( new THREE.PlaneGeometry( 10, 10, 1), materialBlue ) );
square.push( new THREE.Mesh( new THREE.PlaneGeometry( 10, 10, 1), materialBlue ) );
scene.add(square[0]);
scene.add(square[1]);
square[0].position.x = 100;
square[1].position.x = -100;
camera.position.z = 100;
var render = function() {
requestAnimationFrame(render);
circle.position.x += 0.1;
circle.position.y += 0.05;
renderer.render( scene, camera );
};
render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>
var circle = new THREE.Mesh( new THREE.CircleGeometry( 12, 128 ), materialRed );
scene.add(circle);
circle.position.x = 100;
I need to understand how positioning will change with change in aspect ration and camera frustums.
EDIT
For eg-
I need to move the sphere in an elliptical orbit around the screen. I need to calculate the equation of the orbit which will get me position of the sphere at every instance. I don't want the sphere to move out of frame and for that I'm ready to change the length of axes or size of sphere.
I tried to make the wireframe rotate in the scene.
The animation works when I removed the BoxHelper, but I want to animate the cube wireframe without diagonal line instead of a solid object.
Codepen demo :
Demo
Code :
var w = window.innerWidth, h = window.innerHeight,
scene = new THREE.Scene(),
camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000),
renderer = new THREE.WebGLRenderer(),
geometry = new THREE.BoxGeometry( 1, 1, 1 ),
material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ),
mesh = new THREE.Mesh( geometry, material ),
cube = new THREE.BoxHelper(mesh);
cube.material.color.setRGB(25,25,25);
scene.add(cube);
camera.position.z = 2;
renderer.setSize(w,h);
document.body.appendChild(renderer.domElement);
function render(){
requestAnimationFrame( render );
cube.rotation.x += 1;
renderer.render(scene, camera );
}
render();
The position of your THREE.BoxHelper instance is tied to the position of the THREE.Mesh. For your code to work you will have to add the mesh to the scene and rotate the mesh. Your box helper will follow.
If you don't want to show the mesh you can simply set mesh.visible = false;
This code works:
var w = window.innerWidth, h = window.innerHeight,
scene = new THREE.Scene(),
camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000),
renderer = new THREE.WebGLRenderer(),
geometry = new THREE.BoxGeometry( 1, 1, 1 ),
mesh = new THREE.Mesh( geometry );
camera.position.z = 2;
renderer.setSize(w,h);
document.body.appendChild(renderer.domElement);
mesh.visible = false; //<-- hide mesh
scene.add(mesh); //<-- add mesh to scene
cube = new THREE.BoxHelper(mesh);
cube.material.color.setRGB(25,25,25);
scene.add(cube);
function render(){
mesh.rotation.y += 0.01; //<-- rotate the mesh
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
This is my second foray into the world of THREE.js, the first being a short one. I just set up this scene to try some things out. It's a flat box mesh with three box meshes sitting on it. For some reason, the boxes on top are being rendered behind certain polygons of the ground mesh. Anyone have any idea why this is? Does it have something to do with the scale of the scene, or some setting I'm missing? Thanks.
While I have you, does anyone know why the meshes aren't casting directional light shadows onto the ground mesh?
Fiddle: http://jsfiddle.net/k8E43/1/
var scene, camera, renderer;
var material;
var player, ground, mesh1, mesh2;
var directionalLight, spotLight, ambientLight;
init();
animate();
function init() {
renderer = new THREE.CanvasRenderer();
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.setSize( window.innerWidth, window.innerHeight );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.x = 0;
camera.position.y = 450;
camera.position.z = 750;
camera.lookAt( new THREE.Vector3( 0, 150, 0 ) );
material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
// Meshes
player = new THREE.Mesh( new THREE.BoxGeometry( 70, 160, 70 ), material );
player.position.y = 80;
player.castShadow = true;
player.receiveShadow = true;
scene.add( player );
ground = new THREE.Mesh( new THREE.BoxGeometry( 1000, 10, 600 ), material );
ground.position.y = -5;
ground.receiveShadow = true;
scene.add( ground );
mesh1 = new THREE.Mesh( new THREE.BoxGeometry( 100, 40, 100 ), material );
mesh1.position.x = -150;
mesh1.position.y = 20;
mesh1.position.z = 100;
mesh1.castShadow = true;
mesh1.receiveShadow = true;
scene.add( mesh1 );
mesh2 = new THREE.Mesh( new THREE.BoxGeometry( 100, 200, 100 ), material );
mesh2.position.x = 150;
mesh2.position.y = 100;
mesh2.position.z = -100;
mesh2.castShadow = true;
mesh2.receiveShadow = true;
scene.add( mesh2 );
// Lights
directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.x = -1000;
directionalLight.position.y = 500;
directionalLight.position.z = -1000;
directionalLight.target.position.x = 1000;
directionalLight.target.position.y = -500;
directionalLight.target.position.z = 1000;
directionalLight.castShadow = true;
scene.add( directionalLight );
ambientLight = new THREE.AmbientLight( 0x404040 );
scene.add( ambientLight );
document.body.appendChild( renderer.domElement );
}
var lightIncreasing = false;
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
I'm trying to create a bead like object in Three.js, essentially a sphere with a cylinder through it. I can create the two independently, but I'm wondering how to match the height of the sphere and the cylinder and how to merge / intersect them, so that the result will be one geometry.
Any ideas?
Thanks!
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//material
var material = new THREE.MeshNormalMaterial( {
wireframe: true
} );
//sphere
var sphere = new THREE.SphereGeometry(2,20,20);
var sphereMesh = new THREE.Mesh( sphere, material );
scene.add( sphereMesh );
//cyl
var cylinder = new THREE.CylinderGeometry(0.5, 0.5, 2, 32 );
var cylinderMesh = new THREE.Mesh( cylinder, material );
scene.add( cylinderMesh );
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 5;
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
http://jsfiddle.net/RqU2v/
#gaitat, totally awesome, thanks.
here's the solution with ThreeCSG:
//sphere
var sphere = new THREE.SphereGeometry(2,20,20);
var sphereMesh = new THREE.Mesh( sphere, material );
var sphereBSP = new ThreeBSP( sphereMesh );
//cyl
var cylinder = new THREE.CylinderGeometry(0.5, 0.5, 5, 32 );
var cylinderMesh = new THREE.Mesh( cylinder, material );
var cylinderBSP = new ThreeBSP( cylinderMesh );
//result
var subtract_bsp = sphereBSP.subtract( cylinderBSP );
var result = subtract_bsp.toMesh( material );
result.geometry.computeVertexNormals();
scene.add( result );