threejs创建多个立方体，并支持鼠标点击选中

threejs创建多个立方体，并支持鼠标点击选中

---

引入所需的插件

<script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
<!--该插件主要用于完成鼠标拖动改变相机视角-->
<script src="libs/OrbitControls.js"></script>

创建渲染器Renderer

把三维的场景渲染到显示屏上

renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
//container：浏览器画图区域对应的dom元素
container.appendChild(renderer.domElement);

创建相机Camera

相当于人的眼睛，看到物体的大小远近与相机的位置和设置有关

/*
        创建相机【远景相机，与人眼观察类似，近大远小】
        param1:视角【视角越大  物体渲染到屏幕时则看着越小，反之越大】
        param2:相机拍摄面的长宽比
        param3:近裁剪面,相机与物体的距离小于该值后将不在屏幕上显示
        param4:远裁剪面,相机与物体的距离大于该值后将不在屏幕上显示
*/
camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,2000);
camera.position.set(10,10,800);

创建视图控制器OrbitControls

通过鼠标拖动和滑轮移动自动改变相机的位置，调整视角，重新渲染页面

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );

创建场景Scene

用于添加空间范围内需要显示的物体

scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);

创建辅助坐标轴AxisHelper

通过 X（屏幕右边） 、 Y（屏幕上边） 、 Z（屏幕由内到外） 三条轴线帮助你了解物体空间位置坐标

var axes = new THREE.AxisHelper(800);//参数设置了三条轴线的长度
scene.add(axes);

添加地面网格GirdHelper

在指定位置条件指定长度、数量的网格图形

/**
 * size 网格总边长
 * step 网格个数
 * colorCenterLine  网格中心线颜色
 * colorGrid    网格其他线颜色
 */
var gridHelper = new THREE.GridHelper( 300, 10, 'red', 'gray' );
gridHelper.position.y = -100;
gridHelper.position.x = 0;
scene.add( gridHelper );

添加空间正方体BoxGeometry Mesh

var geometry = new THREE.BoxGeometry(20,20,