не знаю как сделать освещение в tree.js

Question

document.addEventListener('keydown', direction);

let dir = 'null';

function direction(event) {
  if (event.keyCode == 38) dir = 'up';
  else if (event.keyCode == 40) dir = 'down';
  else if (event.keyCode == 37) dir = 'left';
  else if (event.keyCode == 39) dir = 'right';
}

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

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

const geometry = new THREE.DodecahedronGeometry();
const material = new THREE.MeshBasicMaterial({
  color: 0x55D7FF
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  cube.rotation.x += 0.02;
  cube.rotation.y += 0.02;

  if (dir == 'right') cube.position.x += 0.1;
  if (dir == 'left') cube.position.x -= 0.1;
  if (dir == 'up') cube.position.y += 0.1;
  if (dir == 'down') cube.position.y -= 0.1;

  if (cube.position.y > 3) dir = 'down';
  if (cube.position.y < -3) dir = 'up';
  if (cube.position.x > 3) dir = 'left';
  if (cube.position.x < -3) dir = 'right';
}

animate();

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>three js</title>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>

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

Answer 1

MeshBasicMaterial не зависит от света. MeshLambertMaterial вычисляет освещение только в вершинах. MeshPhongMaterial вычисляет освещение в каждом пикселе. MeshPhongMaterial вычисляет освещение в каждом пикселе и поддерживает блики.

document.addEventListener('keydown', direction);

let dir = 'null';

function direction(event) {
  if (event.keyCode == 38) dir = 'up';
  else if (event.keyCode == 40) dir = 'down';
  else if (event.keyCode == 37) dir = 'left';
  else if (event.keyCode == 39) dir = 'right';
}

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

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

const geometry = new THREE.DodecahedronGeometry();
const material = new THREE.MeshPhongMaterial({
  color: 0x55D7FF
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);


const light = new THREE.DirectionalLight(0xFFFFFF, 1);
scene.add(light);
light.position.set(3, 3, 3);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  cube.rotation.x += 0.02;
  cube.rotation.y += 0.02;

  if (dir == 'right') cube.position.x += 0.1;
  if (dir == 'left') cube.position.x -= 0.1;
  if (dir == 'up') cube.position.y += 0.1;
  if (dir == 'down') cube.position.y -= 0.1;

  if (cube.position.y > 3) dir = 'down';
  if (cube.position.y < -3) dir = 'up';
  if (cube.position.x > 3) dir = 'left';
  if (cube.position.x < -3) dir = 'right';
}

animate();

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>three js</title>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>

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

БЛОГ НА HUSL

не знаю как сделать освещение в tree.js

Ответы (1 шт):