Here is the pattern to use when raycasting with either an orthographic camera or perspective camera: var raycaster = new THREE.Raycaster(); // create once var mouse = new THREE.Vector2(); // create once … mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 – 1; mouse.y = – ( event.clientY / renderer.domElement.clientHeight ) * 2 + … Read more
EDIT – This answer shows how to set per-point opacity using a custom ShaderMaterial. See https://stackoverflow.com/a/67892506/1461008 for an approach using PointsMaterial. ParticleSystem has been renamed to PointCloud and then to Points. Yes, you can create a Point Cloud and vary the alpha value of each particle’s color dynamically. In three.js, you can do this by … Read more
You can compute the visible height for a given distance from the camera using the formulas explained in Three.js – Width of view. var vFOV = camera.fov * Math.PI / 180; // convert vertical fov to radians var height = 2 * Math.tan( vFOV / 2 ) * dist; // visible height In your case … Read more
If you want to do it server side there are many options. ImageMagick has a bunch of command-line tools which could slice your image into pieces. You could put the command to do this into a script and just run that each time you have a new image. It’s hard to tell quite what algorithm … Read more
In Three.js, the utilities CollisionUtils.js and Collisions.js no longer seem to be supported, and mrdoob (creator of three.js) himself recommends updating to the most recent version of three.js and use the Ray class for this purpose instead. What follows is one way to go about it. The idea is this: let’s say that we want … Read more
three.js was designed to be easy to use, not easy to modify. This may change in the future… You need to set the material.defines like so: var defines = {}; defines[ “USE_MAP” ] = “”;. Then specify defines in the material constructor. var material = new THREE.ShaderMaterial({ name: “TerrainShader”, defines : defines, uniforms : shaderUniforms, … Read more
The trick is to make use of THREE.Object3D.attach(). You need to begin with all your 27 cubes as a child of the scene. Let pivot be an Object3D(). Let active be an array containing the 9 cubes you want to rotate. Now make the cubes a child of the pivot: pivot.rotation.set( 0, 0, 0 ); … Read more
Yes. First do this: renderer.autoClear = false; Then create a second scene that contains just the objects you want to be on top. Then, in your render loop: renderer.clear(); // clear buffers renderer.render( scene, camera ); // render scene 1 renderer.clearDepth(); // clear depth buffer renderer.render( scene2, camera ); // render scene 2 three.js r.152
You can get the world position of a vertex like so: const vertex = new THREE.Vector3(); // create once and reuse const attribute = object.geometry.getAttribute( ‘position’ ); vertex.fromBufferAttribute( attribute, index ); object.localToWorld( vertex ); three.js r151
In modern browsers you can use a conjunction of the MediaRecorder API and the HTMLCanvasElement.captureStream method. The MediaRecorder API will be able to encode a MediaStream in a video or audio media file on the fly, resulting in far less memory needed than when you grab still images. const ctx = canvas.getContext(‘2d’); var x = … Read more