JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
JavaScript
var scene, camera, renderer, mesh1, mesh2, mesh3;
var meshFloor;
var keyboard = {} , myszka = {};
var viewer = { height: 1.8 , speed:0.2};
init();
animate();
function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshPhongMaterial({color:0xff0000, wireframe:false});
mesh1 = new THREE.Mesh(
geometry,
material
);
mesh2 = new THREE.Mesh(
geometry,
new THREE.MeshPhongMaterial({color:0x0000ff, wireframe:false}),
);
mesh3 = new THREE.Mesh(
geometry,
material
);
meshFloor = new THREE.Mesh
(
new THREE.PlaneGeometry(50, 50, 20, 20),
new THREE.MeshPhongMaterial({color:0xFFFF00, wireframe: false})
);
var light = new THREE.PointLight( 0xffffff, 1, 10 );
light.position.set( -3, 6, -3 );
light.castShadow = true;
light.shadow.camera.near = 0.1;
light.shadow.camera.far = 25;
scene.add( light );
mesh1.castShadow = true;
mesh2.castShadow = true;
mesh1.receiveShadow = true;
meshFloor.receiveShadow = true;
mesh2.position.set(1,1,0);
mesh3.position.set(-1,0,0);
meshFloor.rotation.x = -(Math.PI / 2);
scene.add(mesh1);
scene.add(mesh2);
scene.add(mesh3);
scene.add(meshFloor);
mesh1.receiveShadow = true;
ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
scene.add(ambientLight);
camera.position.set(0,5,-2);
camera.lookAt(new THREE.Vector3(0, viewer.height ,0));
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;
document.body.appendChild(renderer.domElement);
animate();
}
function animate()
{
requestAnimationFrame(animate);
var posx = camera.position.x;
var posy = camera.position.y;
var posz = camera.position.z;
mesh1.rotation.x += 0.02;
mesh2.rotation.y += 0.02;
mesh3.rotation.y +=...