I'm trying to attach an object to the camera so that it can be used more more or less as a GUI element.
My camera is defined as follows:
camera = new THREE.PerspectiveCamera( 45, windowWidth / windowHeight, 1, 2000 );
camera.position.z = 100;
In my init(), I define the object to be added:
obj = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5, 1, 1, 1),
new THREE.MeshBasicMaterial({ color: 0xFFFFFF } ));
obj.position.set( 0, 0, -50);
camera.add(obj);
But, the block does not show up. I have tried adding this object to scene, and it is visible. I added a loop to animate() that will slide the object's z position between (-50, 50), but I can't see it.
I tried using camera.lookAt(obj) and logging the world position of obj (obj position + camera position), and they behave as expected. World position seems to be what I'd expect, and camera.lookAt flips the camera when the z position crosses 0.
I apologize for not providing more clear example code, but I will do my best to cooperate with anyone trying to help me. Thanks!
Did you add the camera to the scene?
scene.add( camera );
The camera does not usually have to be added to the scene, but in this case, the object is a child of the camera, so you must.
three.js r.58
Related
As per the screenshot, shadows cast onto the THREE.PlaneGeometry(250, 380, 1, 1) below are cut off.
Steps I've taken to enable shadows
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
..
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);
..
mainLight = new THREE.DirectionalLight(0xffffff, 0.5);
mainLight.position.set(50, 50, 50);
mainLight.castShadow = true;
mainLight.shadow.mapSize.width = width * window.devicePixelRatio;
mainLight.shadow.mapSize.height = width * window.devicePixelRatio;
mainLight.shadow.camera.near = 1;
mainLight.shadow.camera.far = 1000;
mainLight.shadow.camera.fov = 100;
scene.add(mainLight);
..
plane.receiveShadow = true;
..
model.castShadow = true;
model.receiveShadow = true;
I've played with different values like the shadow camera FOV and far plane values...
Is this a caveat with using DirectionalLight? I need even lighting across all of my models, as opposed to SpotLight.
I found three.js shadow cutoff but it simply suggested using a SpotLight instead and gave no explanation as to why that changes anything.
When I do use a SpotLight, I suddenly lose shadows on ground plane altogether.
--
Thanks
See the three.js documentation for DirectionalLightShadow:
This is used internally by DirectionalLights for calculating shadows.
Unlike the other shadow classes, this uses an OrthographicCamera to calculate the shadows, rather than a PerspectiveCamera. This is because light rays from a DirectionalLights are parallel.
See further DirectionalLight
A common point of confusion for directional lights is that setting the rotation has no effect. This is because three.js's DirectionalLight is the equivalent to what is often called a 'Target Direct Light' in other applications.
This means that its direction is calculated as pointing from the light's position to the target's position (as opposed to a 'Free Direct Light' that just has a rotation component).
The reason for this is to allow the light to cast shadows - the shadow camera needs a position to calculate shadows from.
This means that the area affected by the shadow is defined by the position and the camera of the light source (DirectionalLight).
Set up the camera for the mainLight and define its orthographic projection for your needs:
mainLight.shadow.camera = new THREE.OrthographicCamera( -100, 100, 100, -100, 0.5, 1000 );
In ThreeJS, if the camera is rotated at any given angle, how can I determine the coordinate of the point exactly 1 unit in the direction that the camera is facing.
If you are unfamiliar with ThreeJS camera rotation angles, the rotations are very very weird.
For example, if all of my rotation variable are 0, then the function would return (0, 0, -1).
If the rotation x is Pi / 2 (90 degrees), then the function would return (1, 0, 0)
How could I create a function to do this? I don't need everything, primarily just the math.
You want to get the world position of a point that is one unit in front of the camera.
One way to do that is to add an object in front of, and as a child of, the camera. Then you just need to query the world position of the object.
By default, when a camera's rotation is ( 0, 0, 0 ), the camera is looking down its negative z-axis. So here is the pattern to follow:
var object = new THREE.Object3D();
object.position.set( 0, 0, - 1 );
scene.add( camera ); // this is required when the camera has children
camera.add( object );
Now, you can get the point you need like so:
var worldPos = new THREE.Vector3(); // create once and reuse it
...
camera.updateMatrixWorld(); // this is called in the render loop, so you may not have to call it again. Experiment.
worldPos.setFromMatrixPosition( object.matrixWorld );
three.js r.71
I need to set the initial 'lookAt' point of the scene, that will be the center of the screen and of the control's rotation.
If possible, I would prefer to set a point (or an object's position), not rotation angles.
The control is OrbitControl. If I simply set lookAt before the Control initialization, the center is restored to (0,0,0) on the first user interaction, which causes a 'gap' ...
// camera
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 20000);
camera.position.set(0,20,20);
camera.lookAt(new THREE.Vector3(0,10,0));
// controls
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
How can I set the initial point in a proper way?
Try setting the control's target and remove the camera.lookAt call:
controls.target = new THREE.Vector3(0, 10, 0);
controls.update();
Or more directly (without instanciating a new THREE.Vector3 but updating the values):
controls.target.set(0, 10, 0);
NB: controls.update() advice still remains for the 1st frame
Hi I'm just learning webGL and javascript.
I've made this three.js webGL scene thing, and actually come to think of it... They're the same object
http://goo.gl/gOiHX4
The ball is 'joined' to the rest of the 3d object, so I'll make a another sphere in blender by itself.
So say I have a ball.js and the rest of the structure, tribunal.js
how would I mode the ball.js along the 3D environment in this case?
Like maybe in a circle around the structure. constant loop.
pastebin for code too:
http://paste.ubuntu.com/6549663/
<!doctype html>
<html lang="en">
<head>
<title>My 3D webGL experiment</title>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
// Set up the scene, camera, and renderer as global variables.
var scene, camera, renderer;
init();
animate();
// Sets up the scene.
function init() {
// Create the scene and set the scene size.
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
// Create a renderer and add it to the DOM.
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
// Create a camera, zoom it out from the model a bit, and add it to the scene.
camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
camera.position.set(90,80,0);
scene.add(camera);
// Create an event listener that resizes the renderer with the browser window.
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
// Set the background color of the scene.
renderer.setClearColorHex(0xB5DBDB, 1);
// Create a light, set its position, and add it to the scene.
var light = new THREE.PointLight(0xf44fff);
light.position.set(200,200,200);
scene.add(light);
// Load in the mesh and add it to the scene.
var loader = new THREE.JSONLoader();
loader.load( "models/tribunal.js", function(geometry){
var material = new THREE.MeshLambertMaterial({color: 0xCC0000});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
// Add OrbitControls so that we can pan around with the mouse.
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
// Renders the scene and updates the render as needed.
function animate() {
// Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
requestAnimationFrame(animate);
// Render the scene.
renderer.render(scene, camera);
controls.update();
}
</script>
</body>
</html>
In THREE.js, any movement of an object can be accomplished by changing its properties: position, rotation and/or scale. These properties are not simple numbers, so changing them to suit your needs often requires using built-in functions to be sure the change is handled correctly. For example, the position of a mesh is defined as a Vector which can be changed using the set() function like so:
mesh.position.set( 0, 0, 0 ); // Standard [ x, y, z ] coordinate system
There are many other ways to change the values in a Vector described in the documentation and code. Think of the properties of an object as objects themselves, and familiarize yourself with the methods available to you for those objects and their parent objects.
To answer your question: continuously moving an object over a period of time requires more code inside your animate() function. The following code will move a mesh 1 unit in a positive direction along the x-axis every time the animate() function is called:
mesh.position.translateX( 1 );
Tips:
There are many types of movement, but they are mostly combinations of position, rotation, and/or scale.
It is important to remember that child objects are affected by parent objects. If Mesh B is attached to Mesh A, movement applied to Mesh A will move Mesh B as well.
Variable references to objects inside your animate() loop need to be global so the animate() loop knows what object you are talking about.
Changes in position, scale and even rotation can quickly move an object out of frustum (or field-of-view) of the camera.
Use OrbitControls.js and console.log() to help debug animations.
I have created mesh and rendered " 10 " 3d objects using three.js?
how to access each object to perform scaling , rotation & all stuffs so there is a
need to get the div object individually?
help me to solve this issue ?
thanks !
You do not seem to be asking a real question. But rather asking for someone to teach you something. In the 'startup code' a SphereGeometry object is combined with a MeshBasicMaterial object in order to create the Mesh object which is your 3d object that you can then use to access/set the objects position, rotation, etc. Here are the lines of code I am referring to:
var geometry = new THREE.SphereGeometry( 75, 20, 10 );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
var mesh = new THREE.Mesh( geometry, material );
Once you create mesh objects you need to add them to the scene with a call to scene.add(mesh). At this point you can set or get the rotation or position as such
mesh.position.x = 50;
mesh.rotation.z = Math.PI / 2 // rotations are in radians