Comments (2)
I am going to work on adding this feature. Here's how it works in the Cuber project (and now ThreeTwist):
- Calculate the cube's bounding box within the cube's coordinate system, and save it as a Box3.
- Use the cube's
.matrixWorld
property and the current camera to somehow create a "mouse ray". I'm not completely sure how this works but I know that the code for this is in Cuber's projector.js file, so I can reference that. - Find the intersection point of the cube and the ray.
- Using that intersection point, figure out which face was clicked. Save a reference to that face's THREE.Plane.
- Set some kind of flag such as "interacting" to true, until the mouse is released.
- If the mouse moved, find its intersection on the face's THREE.Plane using a technique similar to step 2.
- Calculate the
direction
vector, which is the difference between the current ray/plane intersection and the initial intersection point. - Take the cross product of the direction and the face's axis (the THREE.Plane's
.normal
property). This is the approximate axis of rotation. - "Snap" the axis of rotation to one of the cube's six axes. For the cube, I just did this by finding the axis with the closest axis vector. There may be more efficient methods.
- Calculate the "sliding axis" using a cross product. It is the axis that is parallel to the plane, perpendicular to the rotation axis, and points in the same direction as the direction vector.
- The angle of rotation is proportional to the magnitude of the direction vector projected onto the sliding axis. This can be calculated using a dot product. There may be other ways to calculate an "angle", but this one works well.
from cubing.js.
I am going to work on adding this feature.
You're welcome to try. :-)
However, the code is very old and badly designed. I'm hoping to restructure it at a hackathon some time (the core part was written at a hackathon 5 years ago(!)), but I guess it doesn't hurt to add yet. Thanks for your description of how to handler it. :-)
from cubing.js.
Related Issues (20)
- Optimize bundles
- Unofficial puzzles & events to support
- Worker instantiation: try both with and without a trampoline
- [Twizzle issue] Caret NISS notation highlighting is broken under some conditions HOT 1
- `<twisty-player>` gets squashed on iOS Safari
- Megaminx LL visualization
- [cubing.js issue] `make test-dist-esm-build-size` size checks are broken.
- Test `twsearch` against a fixed state.
- [cubing.js issue] `<twisty-player>` canvas is stretched for
- Sharing modal for Twizzle editor
- Invert caret NISS algs
- `<twizzle-link>` loses newlines in the setup field
- Support `satisfies`
- Use Constructable Style Sheets
- [cubing.js issue] Kilominx SVG is broken. HOT 1
- [cubing.js issue] Kilominx SVG is broken.
- [Twizzle issue] Puzzles flash when dragged HOT 4
- [Feature request] [Twizzle] x2 flips on clock HOT 3
- Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './scramble' is not defined by "exports" in C:\Users\zzyg\Programmation\zybot\node_modules\cubing\package.json HOT 9
- [Feature request] First layer colours for cubeLikeStickeringMask HOT 4
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 cubing.js.