three.js - 在three.js中制作突破游戏 - 检测棋盘的末端
问题描述
我正在尝试通过制作游戏来学习 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();
解决方案
推荐阅读
- python - 如何在 python 3.8.2 上安装 urllib.request
- mysql-workbench - 概念模型实体-关系和物理模型mysql工作台
- macos - 如何更改 Homebrew 的前缀?
- java - 是否有配置 mapstructs 源属性空检查的选项?
- sharepoint-online - KQL 搜索返回 System.UnauthorizedAccessException
- router - 两个带有公共 IP 的路由器设置以允许端口转发
- postgresql - 需要将 Oracle 嵌套表转换为 PostgreSQL
- python - spacy的命名实体识别
- javascript - 如何从外部 JavaScript 文件调用 Vue.js 函数?
- javascript - 在滚动时更改导航栏内容颜色