javascript - Raycaster 没有检测到threejs 中的整个几何图形
问题描述
function checkCollisiontofloor() {
var cube = scene.getObjectByName('floor');
var originPoint = cube.position.clone();
for (var vertexIndex = 0; vertexIndex < cube.geometry.vertices.length; vertexIndex++) {
var localVertex = cube.geometry.vertices[vertexIndex].clone();
var globalVertex = localVertex.applyMatrix4(cube.matrix);
var directionVector = globalVertex.sub(cube.position);
var ray = new THREE.Raycaster(originPoint, directionVector.clone().normalize());
var collisionResults = ray.intersectObjects(cubearr);
if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) {
limit++;
console.log(limit);
collisionResults[0].object.visible = false;
if (limit == num)
{
createCubes(num+=5);
level++;
var l = "level";
var final = (l + " " + level);
console.log (final);
document.getElementById("Level").innerHTML = final;
speed+= 0.1;
}
}
}
}
整个代码
<canvas id="scene"></canvas>
<script src="lib/three.min.js"></script>
<script src="lib/OrbitControls.js"></script>
<html>
<style>
#myText2
{
font-weight: bolder;
font-size: 30px;
}
.buttons
{
position: fixed;
top: 20px;
}
</style>
<body>
<div class="buttons">
<label style="color:red;"><span id="myText2"></span></label>
<h1>Score: <span id="myText"></span></h1>
<h1> <span id="Level"></span></h1>
</div>
<script>
var ww = 1500,
wh = 500;
var scene;
var k=0.02;
var Up=60;
var count=0;
var flag = true;
var speed=0.4;
var cubearr = [];
var num = 10;
var max=48 , min=-48;
var limit = 0;
var level = 1;
function init()
{
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(ww, wh);
renderer.setClearColor(0xFFFFFF, 1);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(40, ww/wh,1,1000);
camera.position.z = 100;
camera.position.y = 5;
camera.name = 'cam';
camera.lookAt(new THREE.Vector3(0,0,0));
scene.add(camera);
light = new THREE.PointLight( 0xFFFFFF, 1, 10000 );
light.position.set( 0, 20, 50 );
light.name = 'light';
scene.add( light );
text();
createCubes(num);
window.addEventListener("keydown", moveSphere);
dir();
renderer.render(scene,camera);
};
function text()
{
//THREE.ImageUtils.crossOrigin = '';
elements = new THREE.Object3D();
loader = new THREE.CubeTextureLoader();
loader.setPath( 'C:/xampp/htdocs/graphics/' );
// Create sphere
sphereG = new THREE.SphereGeometry(4, 100, 100, 0, Math.PI * 2, 0, Math.PI * 2);
spherem = new THREE.MeshLambertMaterial({color: 0xff2255});
texture2 = new THREE.TextureLoader().load('spheretex.jpg');
material2 = new THREE.MeshBasicMaterial( { map: texture2 } );
sphere = new THREE.Mesh(sphereG, material2);
sphere.position.y = -13;
sphere.name = 'sp';
elements.add(sphere);
//Create floor
planeG = new THREE.BoxGeometry( 100, 5, 10 );
material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
texture1 = new THREE.TextureLoader().load('texturefloor.jpg');
texture1.wrapS = THREE.RepeatWrapping;
texture1.wrapT = THREE.RepeatWrapping;
texture1.repeat.set( 100, 10 );
material1 = new THREE.MeshBasicMaterial( { map: texture1 } );
//texture msh shaghl fa hatet material bas msh material1 3ashn ahtulu color
floor= new THREE.Mesh( planeG, material1 );
floor.position.y = -20;
floor.name = ("floor");
elements.add(floor);
scene.add(elements);
//renderer.render(scene,camera);
};
function createCubes(x)
{
document.getElementById("Level").innerHTML = "Level 1";
geometry2 = new THREE.BoxGeometry(5,5,5);
texture = new THREE.TextureLoader().load( '25649.jpg' );
materialtex = new THREE.MeshBasicMaterial( { map: texture } );
for (let i = 0; i < x; i++)
{
cubearr[i] = new THREE.Mesh(geometry2, materialtex);
cubearr[i].position.x =(Math.random() * (max - min)) + min;
cubearr[i].position.y = Up;
Up = Up+10;
scene.add(cubearr[i]);
//cubes.push(cubearr[i]);
}
renderer.render(scene,camera);
}
function dir()
{
var s = scene.getObjectByName("sp");
if (flag == false)
{
return;
}
requestAnimationFrame(dir);
sphere.position.y +=speed;
camera.position.y +=speed;
floor.position.y+=speed;
checkCollisiontosphere();
checkCollisiontofloor();
renderer.render(scene, camera);
}
function moveSphere(e)
{
moveDistance = 0.30;
sp = scene.getObjectByName('sp');
cam = scene.getObjectByName('cam');
light = scene.getObjectByName('light');
if (e.keyCode == '39')
{
if(sp.position.x < 48)
{
sp.rotation.z -= moveDistance;
sp.position.x += 3;
sp.rotation.x += 3;
light.position.x += 3;
count++;
document.getElementById("myText").innerHTML = count;
}
}
else if (e.keyCode == '37')
{
if(sp.position.x > -48)
{
sp.rotation.z += moveDistance;
sp.position.x-= 3;
sp.rotation.x -= 3;
light.position.x -= 3;
count++;
document.getElementById("myText").innerHTML = count;
}
}
else if(e.keyCode == '27')
{
if (flag)
{
flag = false;
}
else
{
flag = true;
dir();
}
}
};
window.addEventListener("keydown", moveSphere);
function checkCollisiontosphere() {
var cube = scene.getObjectByName('sp');
var originPoint = cube.position.clone();
for (var vertexIndex = 0; vertexIndex < cube.geometry.vertices.length; vertexIndex++) {
var localVertex = cube.geometry.vertices[vertexIndex].clone();
var globalVertex = localVertex.applyMatrix4(cube.matrix);
var directionVector = globalVertex.sub(cube.position);
var ray = new THREE.Raycaster(originPoint, directionVector.clone().normalize());
var collisionResults = ray.intersectObjects(cubearr);
if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) {
document.getElementById("myText2").innerHTML = "GAME OVER";
flag=false }
}
}
function checkCollisiontofloor() {
var cube = scene.getObjectByName('floor');
var originPoint = cube.position.clone();
for (var vertexIndex = 0; vertexIndex < cube.geometry.vertices.length; vertexIndex++) {
var localVertex = cube.geometry.vertices[vertexIndex].clone();
var globalVertex = localVertex.applyMatrix4(cube.matrix);
var directionVector = globalVertex.sub(cube.position);
var ray = new THREE.Raycaster(originPoint, directionVector.clone().normalize());
var collisionResults = ray.intersectObjects(cubearr);
if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) {
limit++;
console.log(limit);
collisionResults[0].object.visible = false;
if (limit == num)
{
createCubes(num+=5);
level++;
var l = "level";
var final = (l + " " + level);
console.log (final);
document.getElementById("Level").innerHTML = final;
speed+= 0.1;
}
}
}
}
function levels()
{
if(count == 30)
{
document.getElementById("Level").innerHTML = "Level 2";
speed=0.6;
}
if(count == 60)
{
document.getElementById("Level").innerHTML = "Level 3";
speed=0.8;
}
if(count == 90)
{
document.getElementById("Level").innerHTML = "Level 4";
speed=1;
}
}
init();
</script>
</body>
</html>
解决方案
推荐阅读
- bash - 如何在 Bash 中验证 HTTP HMAC 签名？
- pytest - 如何将 Pytest-BDD 与 Playwright 结合使用
- python - 从具有透明背景的 gif 中提取帧。输出失去透明背景
- ruby-on-rails - Rails 6 是否最终像旧的 settingslogic gem 一样提供了内置的 settings.yml 功能
- spring - Thymeleaf Spring JPA 一对多类型不匹配
- asp.net-mvc-4 - 要显示为手风琴的分类项目的 ASP.NET MVC 列表
- javascript - 谷歌浏览器 91 window.speechSynthesis 没有声音
- python-3.x - 我如何打印列表一的数量，后端使用python？
- vue.js - vuex 在 pwa 中只清除一次持久状态
- python - 在 Python 中显示决策树