Николай Чуприк

Все примитивы и их свойства в виде дерева объектов живут в JS. Соответственно найдите в коде, как называется глобальный объект THREE.Scene (Скорее всего он и называется scene :), как во всех мануалах). И смотрите все вложенные в сцену объекты через Console или через Watch.

Просто не получится. Надо писать функцию анимации. На каждом каждом кадре пошагово менять цвет по пути от начального к конечному.

Нет ничего проще проверить, что точка находится справа от myPoint:
point.x < point[i].x

Существует бесконечно много перпендикуляров к отрезку и проходящих через его середину, и они образуют плоскость. Поэтому ваша постановка задачи некорректна.

Для нахождения перпендикуляра используйте свойства скалярного произведения векторов. Когда оно равно нулю, то векторы перпендикулярны.

В вашем примере направляющий вектор отрезка равен (200, 300, 0). Искомый перпендикулярный вектор пусть (a, b, c), тогда их скалярное произведение:
200a + 300b + 0с= 0

Как видите решение неоднозначно. Дополнительное условие — длина направляющего вектора. Его можно нормировать на 1. И тогда останется однопараметрическая неоднозначность, что и будет соответствовать плоскости.

Т.к. геометрия объектов простая и понятная — кубики — то я бы просто анализировал координаты. А именно после совершении очередного шага в строке 375 добавил бы

if ( checkCollision() )	{
	controls.getObject().translateX( -velocity.x * delta );
	controls.getObject().translateY( -velocity.y * delta );
	controls.getObject().translateZ( -velocity.z * delta );
}

т.е. при обнаружении столкновения откатывался бы шаг назад. Функция определения столкновения:

function checkCollision()	{
	var collision = false;
	for ( boх in objects )	{  //  Перебираем все кубики.
		// Если оказались ближе 10 к центру кубика, значит мы оказались у него внутри, т.к. кубы там размером 20х20.
		collision |= ( 
			( Math.abs( box.postion.x - controls.getObject().position.x) < 10 ) &
			( Math.abs( box.postion.y - controls.getObject().position.y) < 10 ) &
			( Math.abs( box.postion.z - controls.getObject().position.z) < 10 )
		 );
	}
	return collision;	
}

Код не проверял. С обнаружением границ мира примерно также. Думаю, справитесь.

Если объекты произвольной, но выпуклой формы, то тогда я бы из точки первого лица пускал бы два луча (raycast) в диаметрально противоположных направлениях. Потом анализировал объекты, которые они пересекли. Если один и тот же объект пересекли оба луча, значит мы оказались у него внутри.

С невыпуклыми телами сложнее, думать не хочу.

Мне кажется, с вашим пониманием компьютерной графики, вам рановато браться за three.js.

1. Два рендера на одном canvas не получится, очевидно.

2. Не понимаю, как связано то, что надо обрабатывать клик по кубику и CSS-рендер. Обработка мыши (овера, клика и проч.) на объектах сцены делается с помощью Raycast. Читать здесь.