Getting Started with Three.js: Building a Hello World Scene
This tutorial walks through setting up a basic Three.js project, explaining core concepts like scene, camera, and renderer, and provides step‑by‑step HTML and JavaScript code to display a simple axis helper and a wireframe sphere in the browser.
Three.js is a WebGL‑based 3D engine that is the most widely used and documented in China. The article lists the official website, Chinese documentation site, and an e‑book for reference.
To begin, create a simple HTML template that includes a <!DOCTYPE html> declaration, a <head> with a title, a script tag loading three.js, and a <style> block that sets margin:0 and overflow:hidden so the canvas fills the page. A <div id="WebGL-output"> element will host the rendered scene.
Download the Three.js library from the GitHub repository https://github.com/mrdoob/three.js/ (or an alternative download link if version mismatches occur) and place it in a js folder.
In the JavaScript init() function, the tutorial creates the essential Three.js objects:
Scene: var scene = new THREE.Scene(); Camera:
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);Renderer: var renderer = new THREE.WebGLRenderer(); followed by renderer.setClearColor(new THREE.Color(0xEEEEEE)); and renderer.setSize(window.innerWidth, window.innerHeight); Next, an axis helper is added to visualize coordinate axes: var axes = new THREE.AxisHelper(20); scene.add(axes); A wireframe sphere is then created:
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
scene.add(sphere);The camera is positioned above the scene and aimed at its center:
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);Finally, the renderer’s DOM element is appended to the WebGL-output div and the scene is rendered:
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);The article concludes with the full HTML source that combines all the snippets above, and shows a screenshot of the resulting output.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
The Dominant Programmer
Resources and tutorials for programmers' advanced learning journey. Advanced tracks in Java, Python, and C#. Blog: https://blog.csdn.net/badao_liumang_qizhi
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.