Front-end engineer of the DC development team
js to create 3D graphics! We will introduce the contents in detail below. Ryota Shimizu: He moved from a sales job at an SIer to an engineer. He joined GIG in 2020 after having multiple full stack development experiences at SES. He is currently engaged in various client work. What is Three.js? Three.js is a JS library that makes it easy to use WebGL, and refers to a JavaScript API for rendering 2D or 3D graphics on the web.
How to use WebGL with Three.js? First, let's start with the concepts you need to understand in order to use Three.js. The HTML element "canvas element" used to depict images, that Phone Number List is, what is displayed on the user's screen, is called the "renderer" here. In order to create a renderer, the process is to place a display object ``mesh'' in a 3D space = ``scene'', illuminate it with a ``light'', and view it with a ``camera.'' Difference between “with jQuery” and “with React” When using Three.js, I am confused whether to use "jQuery" or "React".
This time, Mr. Shimizu chose "React". The following points were cited as reasons for this: with jQuery You have to write and manage all the code that generates the necessary things like renderers, scenes, meshes, lights, cameras, etc. Since machine power is used for rendering, a high-spec PC is required. with React The example is CodeSandbox, which has an easy-to-understand library, and the processing load is overwhelmingly light. Three.js example Here is what Mr. Shimizu actually created using Three.js . You can operate it intuitively by dragging the green box to move it around or changing its color by clicking. |
