Created
March 19, 2026 19:38
-
-
Save CalebMacdonaldBlack/8e3914927eb1c490d90110991a4987d1 to your computer and use it in GitHub Desktop.
Three.js - Textured Cube
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { | |
| height: 100%; | |
| margin: 0; | |
| } | |
| #c { | |
| width: 100%; | |
| height: 100%; | |
| display: block; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <canvas id="c"></canvas> | |
| <script type="importmap">{ | |
| "imports": { | |
| "three": "https://threejs.org/build/three.module.js" | |
| } | |
| }</script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Three.js - Textured Cube | |
| // from https://threejs.org/manual/examples/textured-cube.html | |
| import * as THREE from 'three'; | |
| function main() { | |
| const canvas = document.querySelector( '#c' ); | |
| const renderer = new THREE.WebGLRenderer( { antialias: true, canvas } ); | |
| const fov = 75; | |
| const aspect = 2; // the canvas default | |
| const near = 0.1; | |
| const far = 5; | |
| const camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); | |
| camera.position.z = 2; | |
| const scene = new THREE.Scene(); | |
| const boxWidth = 1; | |
| const boxHeight = 1; | |
| const boxDepth = 1; | |
| const geometry = new THREE.BoxGeometry( boxWidth, boxHeight, boxDepth ); | |
| const cubes = []; // just an array we can use to rotate the cubes | |
| const loader = new THREE.TextureLoader(); | |
| const texture = loader.load( 'https://threejs.org/manual/examples/resources/images/wall.jpg' ); | |
| texture.colorSpace = THREE.SRGBColorSpace; | |
| const material = new THREE.MeshBasicMaterial( { | |
| map: texture | |
| } ); | |
| const cube = new THREE.Mesh( geometry, material ); | |
| scene.add( cube ); | |
| cubes.push( cube ); // add to our list of cubes to rotate | |
| function resizeRendererToDisplaySize( renderer ) { | |
| const canvas = renderer.domElement; | |
| const width = canvas.clientWidth; | |
| const height = canvas.clientHeight; | |
| const needResize = canvas.width !== width || canvas.height !== height; | |
| if ( needResize ) { | |
| renderer.setSize( width, height, false ); | |
| } | |
| return needResize; | |
| } | |
| function render( time ) { | |
| time *= 0.001; | |
| if ( resizeRendererToDisplaySize( renderer ) ) { | |
| const canvas = renderer.domElement; | |
| camera.aspect = canvas.clientWidth / canvas.clientHeight; | |
| camera.updateProjectionMatrix(); | |
| } | |
| cubes.forEach( ( cube, ndx ) => { | |
| const speed = .2 + ndx * .1; | |
| const rot = time * speed; | |
| cube.rotation.x = rot; | |
| cube.rotation.y = rot; | |
| } ); | |
| renderer.render( scene, camera ); | |
| requestAnimationFrame( render ); | |
| } | |
| requestAnimationFrame( render ); | |
| } | |
| main(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"name":"Three.js - Textured Cube","settings":{},"filenames":["index.html","index.css","index.js"]} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment