In this tutorial we will create and animate smooth 2D lines using a MeshLine Library for Three.JS. We use this library of THREE.Line as it triangulates the line, meaning it draws it using triangles rather the using GL_LINE, WebGL’s built in line drawing mode. GL_LINE is not very feature rich and may produce different results on different graphics cards. The MeshLine library provides a much more extensive feature set for those who need great line drawing at a variety of thicknesses and colors.
Continue reading “Three.js: Drawing Smooth Lines with WebGL”Month: June 2021
Three.js Raycasting For Mouse Picking
Introduction
In this article, I will show you how to use Raycasting with Three.js to do mouse picking. You will be able to determine what object in the scene the mouse is hovering over at any given time. This is a step-by-step style tutorial with incomplete code snippets, but the full source code is available at the end. The full source code is from the video above, which is based on my previous Three.js articles working towards a 3D checkers game.
Continue reading “Three.js Raycasting For Mouse Picking”