Three.JS gyakorlás 001

HTML

<script src="https://threejs.org/build/three.js"></script>


<script>


  
	
  
  
</script>

  <label for="volume">Camera X</label>
 <input type="range" id="camera_x" name="camera_x"
         min="-20" max="20" value="0"  step="0.01">

   <label for="volume">Camera Y</label>
  <input type="range" id="camera_y" name="camera_y"
         min="-20" max="20" value="0"  step="0.01">

  <label for="volume">Camera Z</label>
 <input type="range" id="camera_z" name="camera_z"
         min="-100" max="100" value="0"  step="0.1">
				 
<input type="text" id="camera_x_input" value="" class="coord_input">
<input type="text" id="camera_y_input" value="" class="coord_input">
<input type="text" id="camera_z_input" value="" class="coord_input">


 <br>
 
 <button id="target">Target</button>
 Follow cube <input type="checkbox" id="lookAt" checked>
 
 <label for="volume">ObjX</label>
 <input type="range" id="obj_x" name="obj_x"
         min="-11" max="11" value="1"  step="0.1">

<label for="volume">ObjY</label>
 <input type="range" id="obj_y" name="obj_x"
         min="-11" max="11" value="1"  step="0.1">

<label for="volume">ObjZ</label>
 <input type="range" id="obj_z" name="obj_x"
         min="-11" max="11" value="1"  step="0.1">

<button id="change_color">Change color</button>

<input type="text" id="obj_x_input" value="" class="coord_input">
<input type="text" id="obj_y_input" value="" class="coord_input">
<input type="text" id="obj_z_input" value="" class="coord_input">

CSS

body { margin: 0; }
canvas { width: 100%; height: 100% }
.coord_input { width: 25px; }

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

var geometry = new THREE.BoxGeometry( 2, 2, 2 );
var material = new THREE.MeshStandardMaterial( { color: 0xffff00 } );
var cube = new THREE.Mesh( geometry, material );
cube.position.set(0,1,0);
cube.castShadow = true;
cube.receiveShadow = true;
cube.updateWorldMatrix();
scene.add( cube );


var plane = new THREE.Mesh(
	new THREE.PlaneGeometry(10,10,10,10),
	new THREE.MeshStandardMaterial({color: 0xffffff})
);
plane.rotation.x -= Math.PI / 2;
plane.receiveShadow = true;
scene.add(plane);
plane.updateWorldMatrix();

scene.autoUpdate = false;
var ambient = new THREE.AmbientLight( 0xffffff, 0.1 );
scene.add( ambient );

spotLight = new THREE.DirectionalLight( 0xffffff, 1 );
spotLight.position.set( 0, 5, -5 );
spotLight.angle = Math.PI / 4;
spotLight.penumbra = 0.05;
/* spotLight.decay = 2; */
spotLight.distance = 10;
spotLight.castShadow = true;
spotLight.shadow.camera.near = 2;
spotLight.updateWorldMatrix();
/* spotLight.shadow.camera.far = 15; */
scene.add( spotLight );

lightHelper = new THREE.SpotLightHelper( spotLight );
scene.add( lightHelper );

shadowCameraHelper = new THREE.CameraHelper( spotLight.shadow.camera );
scene.add( shadowCameraHelper );



camera.position.x = 6;
camera.position.y = 6;
camera.position.z = -8;


camera.useTarget =...