three.js - w3toppers.com

Three.js Collada – What’s the proper way to dispose() and release memory (garbage collection)?

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

Transparent objects in Three.js

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

How does the calculation of the light model work in a shader program?

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

Mouse / Canvas X, Y to Three.js World X, Y, Z

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

Transparent objects in Threejs

How to change the zOrder of object with Threejs?

If you want some objects to render “on top”, or “in front”, one trick is to create two scenes — the first scene is your regular scene, and the second scene contains the objects that you want to have on top. First, set renderer.autoClear = false; Then create two scenes var scene = new THREE.Scene(); … Read more