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

【问题标题】：Draw and rotate in different directions in three.js在three.js中绘制和旋转不同方向
【发布时间】：2021-01-11 05:37:19
【问题描述】：

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

如果有某种“旋转画布”的方式确实会很方便。

这是我在 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);
}

【问题讨论】：

标签： javascript three.js rotation

【解决方案1】：

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

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

How to move an object forward in Three.js?

【讨论】：