0
私はキューブを左右に動かすことができるシンプルなアプリケーションを作成しようとしています。私はその部分を理解した。今、私はキューブが飛行機を離れることができないようにしようとしています。これを行う最も簡単な方法は何ですか？three.jsで移動可能なキューブの境界線を作成しようとしています
以下は現在のコードです。
<html>
<head>
<title>Time Car</title>
<style>
body {
width: 100%;
height: 100%;
margin: 0;
padding 0;
}
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/Detector.js"></script>
<script>
var scene, camera, renderer, object, raycaster, board1, board2, board3, board4;
var vy = 0,
vx = 0,
direction = "",
gravity = 0.3;
function init() {
if (!Detector.webgl) Detector.addGetWebGLMessage();
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xCCFFFF);
document.body.appendChild(renderer.domElement);
var light = new THREE.DirectionalLight(0xffffff, 2);
light.position.set(1, 1, 1).normalize();
scene.add(light);
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(-1, -1, -1).normalize();
scene.add(light);
var geometry = new THREE.BoxGeometry(20, 10, 10);
object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
color: 0x3333FF
}));
scene.add(object);
var geometry = new THREE.BoxGeometry(80, 160, 10);
board1 = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
color: 0xCC0000
}));
board1.position.set(0, 0, -200);
scene.add(board1);
var geometry = new THREE.BoxGeometry(80, 160, 10);
board2 = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
color: 0xCC0000
}));
board2.position.set(400, 0, -200);
scene.add(board2);
var geometry = new THREE.BoxGeometry(80, 160, 10);
board3 = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
color: 0xCC0000
}));
board3.position.set(800, 0, -200);
scene.add(board3);
var geometry = new THREE.BoxGeometry(80, 160, 10);
board4 = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
color: 0xCC0000
}));
board4.position.set(1200, 0, -200);
scene.add(board4);
geometry = new THREE.PlaneGeometry(5000, 800, 800);
var plane = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
color: 0x99FF66
}));
plane.rotation.x = -Math.PI/2;
plane.position.set(0, -20, 0);
scene.add(plane);
camera.position.set(0, 100, 100);
raycaster = new THREE.Raycaster();
raycaster.ray.direction.set(0, -1, 0);
render();
}
function render() {
requestAnimationFrame(render);
if (direction == "left") {
vx = -2;
}
if (direction == "right") {
vx = 2;
}
object.position.x += vx;
vx = vx * 0.95;
camera.lookAt(object.position);
camera.position.x += (((object.position.x - 20) - camera.position.x)) * 0.03;
camera.position.y += (((object.position.y + 50) - camera.position.y));
renderer.render(scene, camera);
}
window.addEventListener('keydown', function (e) {
switch (e.keyCode) {
case 65: //left
direction = "left";
break;
break;
case 68: //right
direction = "right";
break;
};
}, false);
window.addEventListener('keyup', function (e) {
switch (e.keyCode) {
case 65: //left
direction = "";
break;
case 68: //right
direction = "";
break;
};
}, false);
init();
</script>
</body>
</html>
これを再作成しようとしていますが、Detector.jsファイルなしでコードを実行することはできません。 –