You can apply an object’s transform to the object’s geometry directly, and then reset the position, rotation, and scale like so: object.updateMatrix(); object.geometry.applyMatrix( object.matrix ); object.position.set( 0, 0, 0 ); object.rotation.set( 0, 0, 0 ); object.scale.set( 1, 1, 1 ); object.updateMatrix(); three.js r.69
I am assuming that what you mean is that you want an object to rotate around a specific point within it’s geometry. For example, the cylinderGeometry rotates around it’s center. Suppose you want it to rotate around its end. What you need to do is translate the cylinder geometry right after it is created so … 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
Self-transparency is particularly difficult in WebGL and three.js. You just have to really understand the issues, and then adapt your code to achieve the effect you want. You can achieve the look of a double-sided, transparent sphere in three.js, with a trick: You need to render two transparent spheres — one with material.side = THREE.BackSide, … Read more
To render both a model and its wireframe, you can use a pattern like this one: // mesh var material = new THREE.MeshPhongMaterial( { color: 0xff0000, polygonOffset: true, polygonOffsetFactor: 1, // positive value pushes polygon further away polygonOffsetUnits: 1 } ); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ) // wireframe var … Read more
This should do the job: function disposeNode (node) { if (node instanceof THREE.Mesh) { if (node.geometry) { node.geometry.dispose (); } if (node.material) { if (node.material instanceof THREE.MeshFaceMaterial) { $.each (node.material.materials, function (idx, mtrl) { if (mtrl.map) mtrl.map.dispose (); if (mtrl.lightMap) mtrl.lightMap.dispose (); if (mtrl.bumpMap) mtrl.bumpMap.dispose (); if (mtrl.normalMap) mtrl.normalMap.dispose (); if (mtrl.specularMap) mtrl.specularMap.dispose (); if … Read more
Both your spheres are transparent, and are remaining so. What is happening is that the smaller sphere is not being rendered at all. Transparency in WebGL is tricky. You can google the issue to find out more about it. But you have stumbled upon an issue related to how three.js in particular handles transparency. The … Read more
Lambertian reflectance model To model the reflection of light in computer graphics is used a Bidirectional reflectance distribution function (BRDF). BRDF is a function that gives the relation between the light reflected along an outgoing direction and the light incident from an incoming direction. A perfect diffuse surface has a BRDF that has the same … Read more
You do not need to have any objects in your scene to do this. You already know the camera position. Using vector.unproject( camera ) you can get a ray pointing in the direction you want. You just need to extend that ray, from the camera position, until the z-coordinate of the tip of the ray … Read more