I was looking on Three.js API and I found that the Frustum is used for the camera visible area. I was wondering if I can access the view frustum of my PerspectiveCamera and declare the frustum as an object. Basically, my goal is to color the frustum of the camera.
If you want to visualize the frustum of your camera, you can use a THREE.CameraHelper. It essentially does what you're describing in the question: it lets you color the frustum so you can visualize it.
To implement it, you simply need to initiate it with your camera as a parameter, then add it to the scene:
var camera = new THREE.PerspectiveCamera( 75, camRatio, 0.1, 1000 );
var helper = new THREE.CameraHelper( camera );
scene.add( helper );
You can read more about it in the docs and you can see it in action on the right side of this example
Update:
If you want to read the data used to build the helper, you can access its .pointmap property. It's got lots of points that determine the position of the near plane (n1, n2, n3...), far plane (f1, f2, f3...), target, etc. To get better acquainted with what each key means, you can look at its constructor from line 38 to 83. The code is very well-documented in there.
Related
I'm trying to sync the camera orientation of one threejs scene with another by passing the world matrix of the first scene's camera to the second and then using
camera.matrix.fromArray(cam1array); //cam1array is the flattened worldmatrix of the 1st scene
camera.updateMatrixWorld( true );
However, when I print camera.matrixWorld for the second scene, it would appear that there has been no update (matrixWorld is the same as before the previous commands). The second scene does use OrbitControls so maybe they are overriding my commands, but I wondered if anyone could advise me on how to achieve the same world matrix for the second scene as the first?
I should also clarify that part of the issue is that it would appear that setting
camera.matrixAutoUpdate = false;
in order to prevent overriding seems to prevent OrbitControls from functioning corrrectly.
I want to create a meshed object like the pic below. (Please ignore the coin besides it.)
The thing is, I want to set a light behind the meshed object and make the light scatter through the meshes. (it's almost like a lamp below.)
The camera will be located right in front of the meshed object, so the object itself doesn't need to be a 3d cube like this pic though.
I'm very new to three.js and was not able to find a way to make a object like the one described above.
geometry = new THREE.BoxGeometry(1, 1, 1);
material = new THREE.MeshPhongMaterial({ color: 0x000000 });
box = new THREE.Mesh(geometry, material);
scene.add(box);
Could anyone advise me how I can I achieve this?
I'm trying to adapt my existing three.js project to work with WebVR. I've made decent progress -- I can look around the scene in VR, but I'm unable to move the camera position away from the initial place it gets spawned (which appears to be close to 0,0,0, it seems like there is a predefined userHeight that gets factored in)
Once I call renderer.vr.setDevice( vrDisplay ) it seems like a new camera is created and the existing camera that my scene was using is no longer used. I'd like to keep using that camera, or at least inherit most of its properties.
I've noticed that there is a renderer.vr.getCamera() method (link to source) but I haven't found any examples or documentation of how to use it (or if I should use it). Curiously, this method accepts a camera as an argument, which is a bit unintuitive for a getter. Looking at the code, it seems like the function should be called setCamera and left me a bit confused. I tried calling the function and passing in my existing camera but it had no effect.
Any help is appreciated. I am using a Google Daydream View on the latest version of Android/Chrome using Three.js R91
swirlybuns, Mugen87 solution works as long as you add user to the scene
var user = new THREE.Group();
user.position.set(0,0,0);
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.y = 1.6;
user.add( camera );
scene.add(user);
and on render loop
user.position.setZ(camera_z_pos);
camera_z_pos -= current_velocity;
Tested on
Three.js v102
chrome mobile v75
I am developing a standard panorama viewer, where a 360 picture is placed inside of a sphere and the user can look around using mouse and touch. I am using OrbtialControls for this and it is working fine.
The user can also load a new 360 picture, after loading the picture, I am trying to set the camera direction so that the user is looking in a certain direction. As I am using orbitalControls, I am using control.target.set(x,y,z) to do so. However that causes the camera to lock at that point and if I use the mouse or touch to look around, the camera position changes and it revolves around that point, rather than looking around inside the sphere.
Has anyone else seen this kind of behavior? Do I need to do something
The code is pretty simple.
controls.reset();
controls.target.set(window.newLookAt.x,window.newLookAt.y,window.newLookAt.z);
The purpose of controls.target.set(x,y,z) is to set the pivot point, so what you are facing is the expected behavior
Instead of setting the target (that has to be (0, 0, 0) in your case), why not putting the camera inside a THREE.Object3D and rotate this object
var camera = new THREE.PerspectiveCamera()
var container = new THREE.Object3D()
container.add( camera )
camera.position.set( 0, 0, 0.1 )
var controls = new THREE.OrbitControls( camera, renderer )
controls.target.set( 0, 0, 0 ) // Optional
container.rotate.y = Math.PI / 2 // Or whatever you want
So I ended up solving this myself. The issue was that my understanding of orbitControls was slightly off. All I needed to do was to set the target point in the same direction but way closer to the camera and presto, issue solved and things are working fine now.
We have a model created in Blender by subtracting an extruded SVG from a “flat” base using a boolean difference operator. Or in other words, we carved a picture into it. The model renders just fine in Blender, but loading it into our simple, three.js-based web viewer (using the json exporter for Blender), we get some really odd shadows on the surface, and depending on the scale, shiny vertexes.
Here's my light and camera:
camera = window.camera = new THREE.PerspectiveCamera(45, $('main').width() / $('main').height(), 10, 10000);
loader = new THREE.JSONLoader(true);
var light = new THREE.DirectionalLight(0xffffff, 1.0);
light.position.set(-30, 30, 100);
light.target.position.set(0, 0, 0);
light.shadowCameraNear = 200;
Can anyone spot whether we did something wrong? And is that a Three-specific issue, or WebGL, or Blender, or our model?
Output (screenshot)
Fiddle
Looking at your fiddle, it seems that your vertexNormals are totally smoothed and thus shading is incorrect.
See here:
https://github.com/mrdoob/three.js/issues/1258
Does this help?
I'm not sure if this technically counts as a solution, but — worked around the problem by dropping the JSON blender export, and using P3D instead to load .stl directly.