Three.JS gyakorlás 001

by MysteryKe

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://github.com/yomotsu/camera-controls/blob/master/dist/camera-controls.js"></script>


<script>


  
	
  
  
</script>

  <label for="volume">Camera X</label>
 <input type="range" id="camera_x" name="camera_x"
         min="-20" max="20" value="3"  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;
scene.add( cube );



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

var targetObject = new THREE.Object3D();
scene.add(targetObject);

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

spotLight = new THREE.SpotLight( 0xffffff, 1 );
spotLight.position.set( 0, 5, -5 );
spotLight.angle = Math.PI / 4;
spotLight.penumbra = 0.54;
spotLight.intensity = 2;
//spotLight.decay = 2;
spotLight.distance = 50;
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 2;
//spotLight.shadow.camera.far = 10;
spotLight.target = targetObject;
scene.add( spotLight );

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

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



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


camera.useTarget =...