Hello there,
I’m a beginner with THREEJS, actually trying to make a simple reproduction of a stockage room. To do this, I am using a simple cube (900 x 10 x 900) to make the floor. It’s important to have a 10-z height. And, to show it, I am using a PerspectiveCamera. All the data I’ve used in based on the canvas_geometry_cube example.
But I don’t really understand how the PerspectiveCamera works - maybe it isn’t the kind of Camera I want. By setting cube position to 0,10,0 (X,Y,Z) and camera to 0,30,0 (X,Y,Z) without any rotation, the render didn’t show anything.
I don’t understand how PerspectiveCamera work. Any tips ?
To be honest, I want a view like in “Nier Automata Hacking Challenge” that you can observe on Google Image easely. I know : the code I’ve made doesn’t place the camera correctly, it is just a test, and I can’t understand why it show nothing.
Here is my full code. I did not get any Javascript error.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Stock 3D View</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #514d41;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/Projector.js"></script>
<script src="js/CanvasRenderer.js"></script>
<script>
var container;
var camera, scene, renderer;
var cube, info;
var arrowUp = false;
var arrowDown = false;
var arrowLeft = false;
var arrowRight = false;
var speed = 4;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
// Initialisation.
container = document.createElement('div');
document.body.appendChild(container);
// Ajout phrase d'accroche en haut.
info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Visualisation de l\'entrepôt en 3D';
container.appendChild(info);
// Définition de la caméra.
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.y = 30;
camera.position.z = 0;
camera.position.x = 0;
// camera.rotation.x = 1.5707963;
// Définition de la scène.
scene = new THREE.Scene();
scene.background = new THREE.Color(0x514d41);
// Cube X Z Y
var geometry = new THREE.BoxGeometry(900,10,900);
// Coloring Cube
for ( var i = 0; i < geometry.faces.length; i += 2 ) {
var hex = 0xc0b99c;
geometry.faces[i].color.setHex(hex);
geometry.faces[i+1].color.setHex(hex);
}
// Adding Cube to Scene
var material = new THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors, overdraw:0.5});
cube = new THREE.Mesh(geometry, material);
cube.position.x = 0;
cube.position.y = 10;
cube.position.z = 0;
scene.add(cube);
renderer = new THREE.CanvasRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
window.onkeydown = function(e) {
if(e.key == "ArrowUp") {
arrowUp = true;
arrowDown = false;
} else if(e.key == "ArrowDown") {
arrowUp = false;
arrowDown = true;
} else if(e.key == "ArrowLeft") {
arrowLeft = true;
arrowright = false;
} else if(e.key == "ArrowRight") {
arrowLeft = false;
arrowRight = true;
}
}
window.onkeyup = function(e) {
if(e.key == "ArrowUp") {
arrowUp = false;
} else if(e.key == "ArrowDown") {
arrowDown = false;
} else if(e.key == "ArrowLeft") {
arrowLeft = false;
} else if(e.key == "ArrowRight") {
arrowRight = false;
}
}
if(arrowUp) {
camera.position.z -= speed;
} else if(arrowDown) {
camera.position.z += speed;
}
if(arrowLeft) {
camera.position.x -= speed;
} else if(arrowRight) {
camera.position.x += speed;
}
}
</script>
</body>
</html>