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.xplane.rotation.z = 180plane.translateX(1)