在three.js中制作突破游戏 - 检测棋盘的末端

Question

我正在尝试通过制作游戏来学习 Three.js，遗憾的是我感兴趣的大多数资源都已过时，因为库似乎经常变化。

目前我可以用鼠标移动我的桨并在鼠标点击时发射球，但是我不知道如何停止桨越过板并让球从边缘反弹。

谁能指出我正确的方向？这是我当前的代码：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);

//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


//board
geometry = new THREE.BoxGeometry(10, 6, 0.00001)
material= new THREE.MeshBasicMaterial({color: "blue"});
var board = new THREE.Mesh(geometry,material);


scene.add(board);


//paddle
geometry = new THREE.BoxGeometry(1, 0.1, 0.2);
material = new THREE.MeshBasicMaterial({ color: "red" });
var paddle = new THREE.Mesh(geometry, material);

paddle.position.set(0, -2.5, 0);
scene.add(paddle);


camera.position.z = 5;

//ball
var geometry = new THREE.SphereGeometry(0.1, 32, 32);
var material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
var ball = new THREE.Mesh(geometry, material);
ball.moving = false;
ball.position.set(0, -2.3, 0);

var velocityY = 0.05; //ball Y speed

scene.add(ball);


//mouse movements
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onMouseMove(e) {
    mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (e.clientY / window.innerHeight) * 2 + 1;

    paddle.position.x = mouse.x * 5.5;
}

function onMouseClick(e) {
    ball.moving = true;
}

window.addEventListener('mousemove', onMouseMove, false);
window.addEventListener('click', onMouseClick, false);

function animate() {
    requestAnimationFrame(animate);

    // ball.position.y += -0.01;

    if (ball.moving === false) {
        // console.log('jest false')
        ball.position.x = paddle.position.x;
    } else {
        ball.position.y += velocityY;
        ball.position.x += 0.01;
    }
    renderer.render(scene, camera);
}
animate();

Answer 1

去这里： https://threejs.org/editor/

加载打砖块示例..

在右侧列表中选择场景对象... 点击底部 Game Logic 脚本上的编辑...