Load single image on multiple surface of BoxGeometry – Three.js
I am using three.js for creating 3D Objects. I want to create 3d canvas similar like this in my project. I want to render a single image on all side of object (box) except back.
I have found one similar example here: https://www.geofx.com/graphics/nehe-three-js/lessons17-24/lesson17/lesson17.html.
I am planing to BoxGeomatry along with 2D faceVertexUvs (custom alignment) to cover surfaces.Is there any way I can do it easily rather than managing Vector2 (2D)? Any way I can use Vector3 (3D) or provide pixel to manage easily?
As I am new to Threejs, please suggest better approach if any?
An option with uvs of BoxBufferGeometry:
body { overflow: hidden; margin: 0; }<script type="module"> import * as THREE from "https://threejs.org/build/three.module.js"; import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js"; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100); camera.position.set(0, 0, 10); var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); var controls = new OrbitControls(camera, renderer.domElement); var g = new THREE.BoxBufferGeometry(10, 5, 1); var uv = g.getAttribute("uv"); // +x uv.setXY(0, 1, 1); uv.setXY(1, 0.9, 1); uv.setXY(2, 1, 0); uv.setXY(3, 0.9, 0); // -x uv.setXY(4, 0.1, 1); uv.setXY(5, 0, 1); uv.setXY(6, 0.1, 0); uv.setXY(7, 0, 0); // +y uv.setXY(8, 0, 0.8); uv.setXY(9, 1, 0.8); uv.setXY(10, 0, 1); uv.setXY(11, 1, 1); // -y uv.setXY(12, 0, 0); uv.setXY(13, 1, 0); uv.setXY(14, 0, 0.2); uv.setXY(15, 1, 0.2); // -z ("back") - white area from 0,0 of map uv.setXY(20, 0, 0); uv.setXY(21, 0, 0); uv.setXY(22, 0, 0); uv.setXY(23, 0, 0); var m = new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/uv_grid_opengl.jpg")}); var o = new THREE.Mesh(g, m); scene.add(o); renderer.setAnimationLoop(()=>{ renderer.render(scene, camera); }); </script>
