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

Question

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

如果有某种方式的话，这确实会很方便；旋转画布"；。

这是我在代码笔上的代码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)

如何在Three.js中向前移动对象？