using threeJS to create a sphere with a 360 image.
init with:
this.controls = new THREE.DeviceOrientationControls(this.camera, true);
and on click I change controls to OrbitControls.
Is there a way to keep/find current camera position?
results achieved by combining DeviceOrientationControls and OrbitControls, together with controls enable/disable toggle, below.
this.controls.enabled = !this.controls.enabled;
Related
In Forge Viewer I added and I tried to set color for THREE.PlaneBufferGeometry to #384c70 and as Material I used THREE.MeshPhongMaterial(). But there is a problem because that Color is transparent. If I used the same Color in THREEjs sandbox then it was right without transparent. Where is a problem?
I don't need transparent color. This error is also present for other colors not for all.
Thanks.
There is a example of my code:
this.viewer.overlays.addScene("custom-scene");
let plane = new THREE.PlaneBufferGeometry(100, 100);
let material = new THREE.MeshPhongMaterial();
material.color = new THREE.Color("#384c70");
material.side = THREE.DoubleSide;
let mesh = new THREE.Mesh(plane, material);
mesh.position.set(0, 0, 0);
this.viewer.overlays.addMesh(mesh, "custom-scene");
this.viewer.impl.sceneUpdated(true);
This is a kind of a weird bug in Forge Viewer when using a certain kind of color in an overlay. The reason is - the overlay rendering pipeline uses a custom shader logic for turning a specific range of colors into a see-through selection highlight.
It's definitely something the viewer needs to fix but in the meantime, I'd suggest avoiding the overlays and adding your custom geometry using ModelBuilder instead.
I am developing a web application that uses 3d buildings as models. I want to create a button that places the camera so that the model is in a suitable position, however when I rotate the camera manually the mouse control resets it again.
Sample here:Link
If I enable //controls.update() the rotation doesn't work. With //controls.update() disabled the camera rotate fine but when I use the mouse, the camera is reset.
¿What can I do? Thanks!
You shouldn't directly change the rotation of the camera, instead you should change the position+target.
When you call controls.update() the rotation of the camera will be calculated based on the position of the camera (the location of the camera) and the target of the controls (the location of focus).
For example you can do:
controls.target.set(0,0,1);
camera.position.set(-0.041, 1.9, -1.21);
controls.update();
I'm getting started with three.js, and I don't want to use WebGLRenderer (renderer = new THREE.WebGLRenderer();) at all. Instead I want to use renderer = new THREE.CanvasRenderer();.
I don't want to use WebGLRenderer due to lack of support.
How can I have a camera orbit without using WebGLRenderer, and use canvas only in three.js?
The three.js site has a small but effective set of Canvas samples as well. Just take a look at the source of https://threejs.org/examples/#canvas_camera_orthographic: it has an orbiting camera. It is orthographic, which you might not want, but the source should be self-explanatory on how to change it to a perspective camera.
three.js r.71
I've used jquery to apply a simple slider which rotate an object by "z" axis.
http://jsfiddle.net/pf15nz7m
Unfortunately moving slider is also moving camera on the scene.
I am using TrackballControls.
controls = new THREE.TrackballControls( camera );
Question: How to "turn off" moving camera while using slider?
If the TrackballControls (or OrbitControls) is reponding to mouse movements outside of the canvas, you need to add the domElement argument to the controls constructor.
controls = new THREE.TrackballControls( camera, renderer.domElement );
updated fiddle: http://jsfiddle.net/pf15nz7m/1/
three.js r.71
I am using three.js to create a tube geometry and have a feature where the camera rotates to particular angle with the click of a radio button.
To rotate the camera, I tried using below code:
camera.rotation.set(2.88, -0.9, -2.0);
camera.position.set(-1800, 0, -1200);
It doesn't have any effect. but when i use the same code by first setting auto rotation update to false, it works
camera.rotationAutoUpdate = false;
camera.rotation.set(2.88, -0.9, -2.0);
camera.position.set(-1800, 0, -1200);
The issue with setting rotationAutoUpdate to false is that once the rotation is set, if i try to rotate the tube with mouse event, it messes up the whole rotation functionality. And if i try to set it to true again, the above required rotation effect is not visible.
Please suggest, if I am doing something wrong or if i am missing out something? Thanks