THREEJS Texture example
“Mastering Texture Mapping in Three.js: A Comprehensive Guide with Code Example”
THREEJS Texture code and explaination
var map = new THREE.TextureLoader().load('./static/image/land.jpg');
const floorGeometry = new THREE.PlaneGeometry(500, 500, 128, 128);
const floorMaterial = new THREE.MeshStandardMaterial({
color: '#777777',
metalness: 0.2,
roughness: 0.6,
envMapIntensity: 0.5,
side: THREE.DoubleSide,
map: map
});
const floor = new THREE.Mesh(floorGeometry, floorMaterial)
floor.receiveShadow = true;
floor.rotation.x = - Math.PI * 0.5;
floor.position.set(0, 0, 0);
scene.add(floor);This code segment is responsible for creating a textured floor in the Three.js scene.
1. `var map = new THREE.TextureLoader().load(‘./static/image/land.jpg’);`: This line loads the texture image file named “land.jpg” using the `TextureLoader` class from Three.js. The image file is located in the “./static/image/” directory. The loaded texture is assigned to the `map` variable.
2. `const floorGeometry = new THREE.PlaneGeometry(500, 500, 128, 128);`: This line creates a plane geometry with a width and height of 500 units. The additional parameters, 128 and 128, specify the number of segments in the geometry for more detailed rendering.
3. `const floorMaterial = new THREE.MeshStandardMaterial({ … });`: This line creates a `MeshStandardMaterial` for the floor. It defines various material properties such as color, metalness, roughness, envMapIntensity, and side. The `map` property is set to the previously loaded texture (`map` variable) to apply the texture to the floor.
4. `const floor = new THREE.Mesh(floorGeometry, floorMaterial)`: This line creates a mesh object called `floor` by combining the floor geometry and material.
5. `floor.receiveShadow = true;`: This line enables the floor to receive shadows cast by other objects in the scene.
6. `floor.rotation.x = — Math.PI * 0.5;`: This line sets the rotation of the floor mesh, making it lie flat along the X-axis.
7. `floor.position.set(0, 0, 0);`: This line sets the position of the floor mesh at the coordinates (0, 0, 0) in the scene.
8. `scene.add(floor);`: This line adds the floor mesh to the scene, making it visible in the rendered scene.
Full code and explaination
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js - Boilerplate</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="/cdn/editor/css/main.css">
<style>
body {
background-color: grey
}
html,
body {
margin: 0;
height: 100%;
}
#c {
width: 100%;
height: 100%;
display: block;
color: rgb(40, 63, 141);
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script type="importmap">
{
"imports": {
"three": "./threeJS/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from './threeJS/examples/jsm/controls/OrbitControls.js';
import * as DAT from './threeJS/newadded/DatGUI.js';
var canvas, renderer, scene, camera, controls;
// var gui = new DAT.GUI();
function init() {
canvas = document.querySelector('#c');
renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
scene = new THREE.Scene();
scene.background = new THREE.Color('black');
const cubeTextureLoader = new THREE.CubeTextureLoader()
scene.background = new THREE.Color('green');
const ambientLight = new THREE.AmbientLight(0xffffff, 0.7)
scene.add(ambientLight)
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
scene.add(directionalLight);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.y = 100;
camera.position.z = 250;
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.6;
controls.screenSpacePanning = false;
controls.update();
/*-----------------texture-------------------*/
var map = new THREE.TextureLoader().load('./static/image/land.jpg');
const floorGeometry = new THREE.PlaneGeometry(500, 500, 128, 128);
const floorMaterial = new THREE.MeshStandardMaterial({
color: '#777777',
metalness: 0.2,
roughness: 0.6,
envMapIntensity: 0.5,
side: THREE.DoubleSide,
map: map
});
const floor = new THREE.Mesh(floorGeometry, floorMaterial)
floor.receiveShadow = true;
floor.rotation.x = - Math.PI * 0.5;
floor.position.set(0, 0, 0);
scene.add(floor);
}
function animate() {
requestAnimationFrame(animate)
renderer.render(scene, camera);
}
init()
animate();
</script>
</body>
</html>1. Importing Libraries:
— The code starts by importing the necessary libraries: Three.js, OrbitControls, and DAT.GUI. These libraries provide functionalities for creating 3D scenes, camera controls, and graphical user interfaces.
2. Initializing the Scene:
— The `init()` function is responsible for setting up the scene, renderer, camera, and controls.
— It creates a WebGLRenderer and attaches it to the `<canvas>` element with the ID `c`.
— The scene is created as an instance of `THREE.Scene()`.
— Ambient and directional lights are added to the scene to provide lighting.
— A perspective camera is set up and positioned.
— OrbitControls are created and associated with the camera and renderer.
3. Texture Setup:
— The code uses `THREE.TextureLoader()` to load the texture image file.
— The loaded texture is then applied to a plane geometry using `THREE.MeshStandardMaterial`.
— The material is configured with properties such as color, metalness, roughness, and mapping the texture.
— A mesh is created with the floor geometry and material, representing the textured surface.
— The floor mesh is added to the scene.
4. Animation Loop:
— The `animate()` function is responsible for rendering the scene in a continuous animation loop using `requestAnimationFrame()`.
— Inside the loop, the renderer renders the scene with the camera, resulting in the 3D scene being displayed.
— The `animate()` function is called at the end to start the animation loop
output Screenshot
