Most tutorials/questions about three.js suggest the way to rotate an object around a point using three.js is to create a parent object at the position you want to rotate around, attach your object, and then move the child. Then when the parent is rotated the child rotates around the point. Eg; This works but it’s incredibly limiting – if you
Tag: three.js
three.js Cube Geometry – how to update parameters?
Possibly dumb question but here goes. Three.js geometries have ‘parameter’ feilds associated with them, see the box geometry here… box Geometry parameters I am trying to update these parameters like this… But of course, the geometry remains unchanged. Is there a way of updating the geometry by editing these parameters? fiddle here https://jsfiddle.net/kn3owveg/2/ Any help appreciated! Answer Gaitat is totally
How to add folders in dat.gui?
I’m trying to add folders for a the lights in a three.js project that i copied from a three.js example. But i can’t get it working. I guess i should use f1=add.folder(‘light1’) and then somehow add the parameters to f1 with f1.add(‘intensity’) etc… but how to do this, when the code is structured like this ? node = f1.add() doesen’t
THREE.JS and buttons for start and pause animation
I try to launch an animation from my THREE.js GUI. I have two buttons which are “Start” and “Reset” animation. Firstly, when I click on “Start” button, the animation has to launch (the animation is a rotation of a sphere) and the text of this button is set to “Pause”. After the animation is launched, I can click another time
Load textures from Base64 in Three.js
I am currently loading textures from URLs but since my back-end code is generating planets I need them to be displayed using Base64. (I’m playing around with procedural generation so I’d prefer not to save the image and then load it via URL) Here’s the code; I have tried; But it doesn’t seem to be working correctly. Any help would
Three.js – depthWrite vs depthTest for transparent canvas texture map on THREE.Points
Question Is there a significant difference between depthWrite: false and depthTest: false? Does using depthTest offer a performance advantage? Is there any sacrifice in functionality choosing one or the other? Original problem I wanted to render a THREE.Points object with translucent circles as each point. I used a THREE.Texture loaded from a canvas element and passed it to the map
How to effectively use TraingleStripDrawMode in three.js?
THREE.js have included TriangleStripDrawMode, or TriangleFanDrawMode for some revisions now. I have tried searching for it online, as well as experimenting on my own to understand it better, but all is wasted. I still don’t know how to utilize these modes to prevent redundancy, or to minimize the data exchange. Consider this mesh for example: unless I replace // Placeholder
Detect sound is ended in THREE.PositionalAudio?
I want to detect when sounds is ending, but all examples that i found not working. Live example: http://codepen.io/anon/pen/wMRoWQ Answer Three.Audio is wrapper around a buffer source audio object. https://github.com/mrdoob/three.js/blob/ddab1fda4fd1e21babf65aa454fc0fe15bfabc33/src/audio/Audio.js#L12 It looks like it overrides the onended event and binds it to its own function, so we just do the same: We set isPlaying = false because this is what
Rotate object on specific axis anywhere in Three.js – including outside of mesh
Trying to rotate an object around any axis. For example like a door hinge (on edge of object) or planet around the sun (outside of object). The problem seems to be defining the axis. The below unit vector results in axis remaining on object’s origin (centre) therefor identical to standard rotation: See code example: JSFiddle EDIT: Looking for a way
Threejs canvas size based on container
How can I calculate canvas size based on its container? To avoid scrolling. If I set the size based on window the canvas is too big. Answer Well,that’s not difficult.Set your render’s size will work.