在 three.js 中向不同方向绘制和旋转

Question

假设我在 Three.js 中有一个框，我想在不同的方向上绘制增量。我基本上想用矩形画线，指向随机位置。目前我只是增加 x 导致从左到右绘制一条线。是否可以旋转我的矩形，使其朝不同的方向移动，而无需更改更新函数中 x 的增量。

如果有某种“旋转canvas”的方法确实会很方便。

这是我在codepen上的代码 https://codepen.io/haangglide/pen/vYGbQRm

代码：

var scene, camera, renderer, material, plane;

init();

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 100;

    renderer = new THREE.WebGLRenderer({ alpha: true, preserveDrawingBuffer: true });
    renderer.autoClearColor = false;

    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();

    window.addEventListener('resize', onResize, false);
    drawLines();

    update();
}

function drawLines() {
    var col = new THREE.Color(Math.random(), Math.random(), Math.random());
    material = new THREE.LineBasicMaterial({ color: col, linewidth: 5 })
    var geometry = new THREE.PlaneBufferGeometry(5, 20, 32);
    plane = new THREE.Mesh(geometry, material);
    scene.add(plane);
}

function update() {
    setTimeout(function () {
        requestAnimationFrame(update);
    }, 1000 / 60);

    plane.position.x += 1;
    if (plane.position.x > 50) drawLines()
    renderer.render(scene, camera);
}

function onResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

Answer 1

旋转你的平面对象并使用 translateX() 向前移动而不是使用 position.x

plane.rotation.z = 180
plane.translateX(1)

How to move an object forward in Three.js?

在 three.js 中向不同方向绘制和旋转

Draw and rotate in different directions in three.js

javascript

rotation

three.js