Here is an example of a basic three.js program. The code for this program is shown below. You can use this as a template for your own programs.
Note that three.js programs are typically embedded within an html program. The three.js program is between the script commands.
If possible you would like to run your program locally, as least during the initial testing stages. Otherwise, you will have to save the program to your server and run the program from there or you will have to use a program creator, such as npm, which creates a temporary server. One problem is that current protocols do not allow you to load most items from your own server, such as programs, moduless, objects, and textures. However, you can still run your program locally if you load these items from other servers - which is what we are doing with the three.js program and the various textures. This protocol does not apply to a css file, which you can still load from your own server.
The program uses two types of lights - an ambient light and a directional light. The directional light emulates sunlight and we will use this light to create shadows. The ambient light helps ensure that, as on earth, surfaces facing away from the sun are not in total darkness. This is because, on earth, atmosphere scatters sunlight in all directions. In contrast, on the moon, there is no atmosphere, so shadows are completely dark.
The program imports the three.js OrbitControls module which allows you to use your mouse (or touch controls) to orbit around the object. The program sets the camera at a starting location and initializes the orbit controls module. Thereafter the orbit controls work automatically.
The "onWindowResize" is a standard subroutine used to handle situations where the view window is resized.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Three.js Program</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<style>
body {
overflow: hidden;
margin:0;
}
</style>
</head>
<body oncontextmenu="return false;">
<div id="container"></div>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.160/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.160/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from "three";
import {OrbitControls} from "three/addons/controls/OrbitControls.js";
import Stats from "three/addons/libs/stats.module.js";
//= VARIABLES ==================================================================
let envMap = 0; // SkyBox Texture
let BoxTxt = 0; // Box Texture
let RunFlg = 0; // Ready to Run
//= BASIC VALUES ==============================================================
//- Display
let scene = new THREE.Scene();
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setAnimationLoop(rendAll);
document.body.appendChild(renderer.domElement);
//- Lights
let ambLight = new THREE.AmbientLight(0xffffff, 0.3); // Background Light
scene.add(ambLight);
let sunLight = new THREE.DirectionalLight(0xffffff, 1); // To create shadows
sunLight.position.set(-1000, 1000, -1000);
scene.add(sunLight);
//- Camera
let camera = new THREE.PerspectiveCamera(55.0, window.innerWidth/window.innerHeight, 0.5, 100000);
camera.position.set(400, 100, 400); // Starting Position
scene.add(camera);
//- Controls
let controls = new OrbitControls(camera, renderer.domElement); // Activate
//- Inputs
window.addEventListener("resize", onWindowResize, false);
//- Loading Manager
// Create a loading manager to set RESOURCES_LOADED when done loading external files.
// Pass loadingManager to all resource loaders.
let loadingManager = new THREE.LoadingManager();
let RESOURCES_LOADED = false;
loadingManager.onLoad = function(){
console.log("loaded all resources");
RESOURCES_LOADED = true;
initAll();
};
let txtrLoader = new THREE.TextureLoader(loadingManager);
//= MAIN PROGRAM ===============================================================
loadAll();
//= 0 LOAD ALL =================================================================
function loadAll() {
loadSkyBox(); // Load Sky
load3DCube(); // Load Cube Texture
}
//= 1 INITIALIZE (called by LoadingManager) ====================================
function initAll() {
init3DCube(); // Cube
RunFlg = 1;
}
//= 2 RENDER (called by Renderer) ==============================================
function rendAll() {
if (RunFlg) { // if ready to Run
// DO STUFF!
}
renderer.render(scene, camera); // Render
}
//= SUBROUTINES ================================================================
function loadSkyBox() {
let fpath = "https://threejs.org/examples/textures/cube/skyboxsun25deg/";
envMap = new THREE.CubeTextureLoader(loadingManager)
.setPath(fpath)
.load(["px.jpg", "nx.jpg", "py.jpg", "ny.jpg", "pz.jpg", "nz.jpg"]);
envMap.format = THREE.RGBAFormat;
envMap.colorSpace = THREE.SRGBColorSpace;
scene.background = envMap;
}
function load3DCube() {
let fpath = "https://threejs.org/examples/textures/crate.gif";
BoxTxt = txtrLoader.load(fpath);
}
function init3DCube() {
let geometry = new THREE.BoxGeometry(100, 100, 100);
let material = new THREE.MeshPhongMaterial({map: BoxTxt});
let BoxMsh = new THREE.Mesh(geometry, material);
scene.add(BoxMsh);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
</script>
</body>
</html>
