/    Sign up×
Bounties /Pin to ProfileBookmark

Write a WD tutorial that explains threejs for beginners

+ 150,000
Copy linkTweet thisAlerts:
Jul 29.2022

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
JavaScriptTechnical WritingThree.js

3 Replies

Copy linkTweet thisAlerts:
@steimeFeb 14.2023 — https://webdeveloper.com/tips-tricks/getting-started-with-three-js/ you find my article here. I hope this helps
@themolitor👏👏👏Feb 14.2023
Copy linkTweet thisAlerts:
@LoverboyloveFeb 08.2023 — Great project would love testing
Copy linkTweet thisAlerts:
@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-settingsDec 12.2022
@themolitorHey Alexander 👋 Did you see this last reply? 👆 Would really love to see this article published! 👏Jan 16.2023
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...