How do I replace the white colored plane, with an imaged plane?

JavaScript
1

Using

import * as THREE from 'three';
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
camera.position.set(0, -40, 10);
camera.lookAt(0, 0, 0);
const boxGeometry = new THREE.BoxGeometry(2, 2, 2);
const boxMaterial = new THREE.MeshBasicMaterial({color: 0xFF00FF});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.z= 1;
scene.add(box);
const planeGeometry = new THREE.PlaneGeometry(30, 30);
const planeMaterial = new THREE.MeshBasicMaterial({color: 0xFFFFFF})
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);
renderer.render(scene, camera);

How do I replace the white colored plane, with an imaged plane?

2

I have not used ThreeD, but it seem relatively straight forward.

You would need to load the texture e.g.

const uvTexture = new THREE.TextureLoader().load('pathtotexture/yourtexture.png')

Then instead of

const planeMaterial = new THREE.MeshBasicMaterial({color: 0xFFFFFF})

use MeshStandardMaterial assigning a map property

const planeMaterial = new THREE.MeshStandardMaterial({
  map: uvTexture
})

As I say I haven’t used ThreeD, but the object would need to have UV’s for this to work. Whether these are auto generated with Three.PlaneGeometry I don’t know.

This video seems to be the one to watch

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.