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

Question

假设我在 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);}

Answer 1

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

plane.rotation.z = 180

plane.translateX(1)