PlaneGeometry at x=0 y=0 z=0 for three.js on a flat surface

Question

PlaneGeometry at x=0 y=0 z=0 for three.js on a flat surface

Hi there! I have a code snippet that currently renders an image vertically, and I'm looking to modify it so that the PlaneGeometry is drawn horizontally instead. Rather than rotating it with

mesh.rotation.x=THREE.Math.degToRad(-90);

, I'd like it to be positioned at x=0 y=0 z=0:

https://i.sstatic.net/wgoP6.png

If we use

mesh.rotation.x=THREE.Math.degToRad(-90);

The arrow will point downward,

Conversely, if we use:

mesh.rotation.x=THREE.Math.degToRad(90);

The arrow will point upwards.

Your assistance in achieving this modification would be greatly appreciated. Thank you!

javascript 3d three.js

Answer 1

Answer №1

Transforming the geometry can be achieved by using the .rotateX() method:

// setting up renderer
var renderer = new THREE.WebGLRenderer();
canvas_width = window.innerWidth;
canvas_height = window.innerHeight;
renderer.setSize(canvas_width, canvas_height);
document.body.appendChild(renderer.domElement);

// initializing scene and camera
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(90, canvas_width / canvas_height, 1, 100);
camera.position.y = 5;
camera.position.z = 25;

var texture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/uv_grid_opengl.jpg');
var img = new THREE.MeshBasicMaterial({
  map: texture,
  side: THREE.DoubleSide
});

// creating mesh
geom = new THREE.PlaneGeometry(25, 25);
geom.rotateX(-Math.PI * 0.5); // rotation logic
mesh = new THREE.Mesh(geom, img);
mesh.overdraw = true;
scene.add(mesh);

// adding light source
var light = new THREE.HemisphereLight(0xffffff, 0x000000, 1.5);
light.position.set(1, 1, 1);
scene.add(light);

// rendering the scene
requestAnimationFrame(function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
})

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>

Answer 2

Transforming the geometry can be achieved by using the .rotateX() method:

// setting up renderer
var renderer = new THREE.WebGLRenderer();
canvas_width = window.innerWidth;
canvas_height = window.innerHeight;
renderer.setSize(canvas_width, canvas_height);
document.body.appendChild(renderer.domElement);

// initializing scene and camera
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(90, canvas_width / canvas_height, 1, 100);
camera.position.y = 5;
camera.position.z = 25;

var texture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/uv_grid_opengl.jpg');
var img = new THREE.MeshBasicMaterial({
  map: texture,
  side: THREE.DoubleSide
});

// creating mesh
geom = new THREE.PlaneGeometry(25, 25);
geom.rotateX(-Math.PI * 0.5); // rotation logic
mesh = new THREE.Mesh(geom, img);
mesh.overdraw = true;
scene.add(mesh);

// adding light source
var light = new THREE.HemisphereLight(0xffffff, 0x000000, 1.5);
light.position.set(1, 1, 1);
scene.add(light);

// rendering the scene
requestAnimationFrame(function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
})

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>

PlaneGeometry at x=0 y=0 z=0 for three.js on a flat surface

Answer №1

Similar questions

Searching for image labels and substituting the path string

What is the most effective way to determine if a statement is either false or undefined?

jquery mobile popup message will fade away within a short time interval

Unable to retrieve obj after using $location.url

Algorithm for detecting collisions in Javascript

Creating a unique directive specifically designed to be used within an ng

Tips for utilizing the value of object1.property as a property for object2

Looking for assistance in creating a unique jQuery validation function tailored to your

Easy Registration Page using HTML, CSS, and JavaScript

Does a browser's cache utilize storage for XMLHttpRequest responses?

Prevent Cordova from shrinking the view when focusing on an input

Different ways to modify the underline and label color in Material-UI's <Select/> component

Creating a Comprehensive Page Design with Bootstrap and the Latest Version of Vue

Dismiss Bootstrap by clicking anywhere

`Loading CSS and JS files in node.js: A step-by-step guide`

Creating a Form Input Field Based on a Selection List

Add the value to the array in MongoDb only if it does not already exist in

AngularJS is not responding to a 400 bad request

Manage an error request with unique parameters

Incorporated React component from Rails-assets.org into a Rails application