If you want to render a wireframe of a given geometry, you can now use this pattern: var geo = new THREE.EdgesGeometry( geometry ); // or WireframeGeometry( geometry ) var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } ); var wireframe = new THREE.LineSegments( geo, mat ); scene.add( wireframe ); WireframeGeometry will render … Read more
You can generate a callback like this. First define your callback function for each object: mesh.callback = function() { console.log( this.name ); } Then follow the standard picking pattern: var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onDocumentMouseDown( event ) { event.preventDefault(); mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 – … Read more
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
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
The camera does not have a “look vector”, so you cannot set it. You can, however, construct a point to look at by adding your look vector to the camera’s position, and then calling camera.lookAt( point ); Here is how to determine the direction in which the camera is looking, assuming the camera either has … Read more
You can extract the world position like so: var target = new THREE.Vector3(); // create once an reuse it child.getWorldPosition( target ); target will contain the result. EDIT: updated to three.js r.120
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
The issue is you’re pointing at the edges between texels. These lines geoX.push(tx / imageSize); geoY.push(1.0 – ty / imageSize); // flip y compute the exact edge between texels. What I mean by that is lets say imageSize is 4 texels and lets say tx and ty go from 0 to 3 Your texture coordinates … Read more
Update library to r53. Add vertexColors: THREE.FaceColors in material. And finally use face.color.setRGB( Math.random(), Math.random(), Math.random()). Now no need to traverse loop for 4 sides (a,b,c,d) for THREE.Face4 or 3 sides (a,b,c) for THREE.Face3. This works in both WebGL and Canvas rendering. Example three.js r53
Yes, in three.js you can create an object that is invisible, but still occludes other objects as if it were visible. To do that, you need to use two features available in three.js: Object3D.renderOrder and Material.colorWrite. You need to make sure the invisible object is rendered prior to the object(s) it must occlude. You control … Read more