Comments (6)
From an old github issue from 2012 in ThreeJS I was able to whip up some camera rotate functionality that works for my use case (for now). Still bummed for some reason that pan/rotate doesn't work from TrackballControls and I'm not sure why. Here's the code I'm using if it is helpful for anyone else in the future:
changeCameraPosition(e) {
const theta = 0.2; //the speed of rotation
const x = this.camera.position.x;
const y = this.camera.position.y;
const z = this.camera.position.z;
e.preventDefault();
switch (e.key) {
case "a":
this.camera.position.x = x * Math.cos(theta) + z * Math.sin(theta);
this.camera.position.z = z * Math.cos(theta) - x * Math.sin(theta);
break;
case "w":
this.camera.position.y = y * Math.cos(theta) - z * Math.sin(theta);
this.camera.position.z = z * Math.cos(theta) + y * Math.sin(theta);
break;
case "s":
this.camera.position.y = y * Math.cos(theta) + z * Math.sin(theta);
this.camera.position.z = z * Math.cos(theta) - y * Math.sin(theta);
break;
case "d":
this.camera.position.x = x * Math.cos(theta) - z * Math.sin(theta);
this.camera.position.z = z * Math.cos(theta) + x * Math.sin(theta);
break;
default:
break;
}
this.camera.lookAt(this.scene.position);
},
from three-full.
Lastly, I was able to get mouse rotating working. I had to pass document
instead of this.renderer.domElement
to get it working. Key events still aren't functional though :(
from three-full.
Hello and thanks for feedback.
I had a similar issue using VueJs. It depend on the Dom initialization order make by VueJs.
Did you try the vuejs $el itself using a ref to the element ? Like:
mounted () {
'use strict'
const viewport3DElement = this.$refs.viewport3D.$el
this.cameraControl.setDomElement( viewport3DElement )
},
For key events are you sure that you canvas or container is focusable ?
Secondly, did you try to output some debug log in key event handlers ?
window.removeEventListener( 'keydown', keydown, false );
window.removeEventListener( 'keyup', keyup, false );
from three-full.
Hi! Thanks for the reply!
If I try using setDomElement
on TrackballControls it throws an error about that not being a function (and I dont see it in TrackballControls.js).
My div
for the threejs contents is:
<div id="three-element" ref="threeElement" tabindex="0"/>
I tried using $el
like you suggest, instead of just the $ref
but I still get the same result and W/A/S/D keys dont work.
setupTrackballControls() {
this.trackballControls = new THREE.TrackballControls(
this.camera,
this.$refs.threeElement.$el
);
//this.trackballControls.domElement = this.$refs.threeElement.$el;
this.trackballControls.rotateSpeed = 1.7;
},
I also added in a console log to the keydown
event in TrackballControls.js file but I don't see any console log being printed out
from three-full.
I will close this issue due to long time. This would be fixed in current threejs package.
For any requirement, please reopen.
from three-full.
Internally TrackballControls
uses const box = domElement.getBoundingClientRect()
to define a coordinate system for the event locations. However, before domElement
is placed on the page, box
contains zero values only, which gives zero divides inside the module and makes the controls fail. As a workaround, I create and store the Trackballcontrols inside the render()
function, after domElement.getBoundingClientRect()
returns a non-zero box:
let controls;
render() {
if (controls) {
controls.update();
}
else {
const box = domElement.getBoundingClientRect();
if (box.left != box.right && box.bottom != box.top) {
controls = new TrackballControls(camera, domElement);
controls.update();
}
}
renderer.render(scene, camera);
}
}
from three-full.
Related Issues (20)
- OrbitControls addEventListener not a function HOT 3
- Use with Webpack Tree Shaking? HOT 11
- Warning: Could not find a declaration file for module 'three-full'. HOT 3
- Update to Three.js r98 HOT 1
- FBXLoader giving a TypeError HOT 3
- Intellisense not working with ThreeFull HOT 2
- Constant warning on node.js HOT 1
- Update to Three.js r99 HOT 2
- Window detection fails with jsdom HOT 4
- update 101 HOT 1
- Update Three-Full to latest version of ThreeJs HOT 5
- 11.3.3 No Core folder? HOT 12
- ReferenceError: process is not defined HOT 5
- new version HOT 1
- OrbitControls example lib is not matching witch current @types/three
- Thank you HOT 2
- This repo and npm package are obsolete and need to be deleted HOT 1
- async FBXLoader HOT 3
- DRACOLoader.js missing imports HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from three-full.