three.js 水平 PlaneGeometry 在 x=0 y=0 z=0

Question

您好，我有这段代码可以绘制下面的图像

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

但我想水平而不是垂直地绘制 PlaneGeometry，而不是用mesh.rotation.x=THREE.Math.degToRad(-90); 旋转它，以便在 x=0 y=0 z=0 处得到这个：

这样用

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

箭头会向下

并与：

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

箭头会向上

你能帮帮我吗？

Answer 1

你可以做到，用.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>