Imagine I have a box in Three.js that I want to draw incrementally in various directions. Currently, the line is drawn from left to right by simply incrementing the x value. Is there a way to rotate the rectangle so that it moves in different directions without changing the x increment in the update function?
It would be useful to have a method similar to "rotating the canvas".
Here is the code snippet on CodePen: https://codepen.io/haangglide/pen/vYGbQRm
Code:
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);
}