Bounties /Pin to ProfileBookmark

Write a WD tutorial that explains threejs for beginners

Three.js is an open-source project that leverages the full power of JavaScript to create immersive 3D environments and physics-based interactivity.

We’re looking for a simple resource that explores using three.js from a beginner’s perspective. Everything from tools you might need to suggestions on hosting a project online.

To claim this bounty, the article must be published on webdeveloper.com by an approved author—to request author access, submit this form (must be logged in to view).

Bonus SATS (via author tips) available for articles that get featured on the home page!

to post a answer
July 29th, 2022JavaScriptTechnical WritingThree.js

1 Answer(s)

pending review
@metasettlorsAug 03, 2022 — Three.js Tutorial
What is Three.js?
Three.js is a JavaScript library that lets you create and render 3D graphics in the browser. It uses WebGL, which is a cross-platform and cross-browser API for rendering 2D and 3D graphics. Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser. Three.js scripts may be used in conjunction with the HTML5 canvas element, SVG or WebGL.

What is WebGL?
WebGL is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is fully integrated with other web standards, allowing GPU-accelerated usage of physics and image processing and effects as part of the web page canvas.

What is a WebGL renderer?
The WebGLRenderer displays your beautifully crafted scenes using WebGL, if your device supports it. If not, it falls back to HTML5 Canvas.

What is a scene?
A scene is where you place your objects. It can be seen as a stage where you can put actors on it. In Three.js, a scene is used to group objects together. It is also used to set the background color, the size of the scene, and the camera used to render the scene.

What is a camera?
A camera is used to view the objects in the scene. It is the virtual eye through which the user views the scene. In Three.js, there are three types of cameras:

PerspectiveCamera
OrthographicCamera
CubeCamera
What is a mesh?
A mesh is a collection of vertices, edges, and faces that describe the shape of a 3D object. In Three.js, a mesh is created using a geometry, which defines the shape of the object, and a material, which defines the object’s appearance. The material is applied to the geometry to create the mesh.
@themolitorThanks for this response @metasettlors , but we're looking for full articles published on WD. Per the description: To claim this bounty, the article must be published on webdeveloper.com by an approved author—to request author access, submit this form -- https://webdeveloper.com/profile-settings/#article-settings
@themolitorHey Alexander 👋 Did you see this last reply? 👆 Would really love to see this article published! 👏
×

Success!

Help @hq spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with Github
about: ({
version: 0.1.7 BETA 2.4,
whats_new: article editor v2,
up_next: tip code demos,
coming_soon: embeddable tipping,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh

version: 0.1.5,
notes: added pins + new badge

version: 0.1.4,
notes: home refresh + tools
)...
recent_tips: (
tipper: @JohnDavis,
amount: 250 SATS,
source: article

tipper: @Megan0910,
amount: 1000 SATS,
source: article

tipper: @JohnDavis,
amount: 250 SATS,
source: article
)...