CODEWITHSUNDEEP
javascript3dthree.js
Miky
Miky

Reputation: 189

three.js horizontal PlaneGeometry at x=0 y=0 z=0

Hi I have this code that draws the image below

window.onload = function()
{
    // init renderer
    var renderer=new THREE.WebGLRenderer();
    canvas_width=side; canvas_height=side;
    renderer.setSize(canvas_width,canvas_height);
    document.body.appendChild(renderer.domElement);

    // init 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( 'arrow.png' );
    var img = new THREE.MeshBasicMaterial( { map: texture } );

    // mesh
    mesh = new THREE.Mesh(new THREE.PlaneGeometry(25,25),img);
    mesh.overdraw = true;
    scene.add(mesh);

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

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

enter image description here

but I want to draw the PlaneGeometry horizontally instead of vertically, not rotating it with mesh.rotation.x=THREE.Math.degToRad(-90);, to get this at x=0 y=0 z=0: enter image description here

so that with 

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

the arrow will pointing down

and with:

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

the arrow will pointing up

can you help me?

Upvotes: 2

Views: 3168

Answers (1)

prisoner849
prisoner849

Reputation: 17586

You can do it, rotating the geometry with .rotateX():

// init 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);

// init 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
});

// mesh
geom = new THREE.PlaneGeometry(25, 25);
geom.rotateX(-Math.PI * 0.5); // this is how you can do it
mesh = new THREE.Mesh(geom, img);
mesh.overdraw = true;
scene.add(mesh);

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

// render
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>

Upvotes: 4

Related Questions