探索nunustudio 开发3D模型 第六弹：自定义DOM和物体点击事件

前言：在实际开发中经常会在场景中自定义DOM元素或者添加物体点击事件，那栗子来咯！！！

1、搭建基本场景。

场景中没有太多的物体，简单的demo。

2、介绍场景中基本元素，正方体、地面、相机、js标签，这里的js标签放在scene下，可以理解为当前场景的全局的js。

3、在当前场景自定义DOM，这个其实很简单动态创建dom元素，然后追加到window中。

function initialize()
{
	//TODO <INITIALIZATION CODE>
	var div=window.document.createElement('div');
	var style="width:200px;height:30px;color:red;background-color:black;position:absolute;margin-left:20px;margin-top:30px";
	div.setAttribute('style',style);
	div.append('Test');
	window.document.body.append(div);
	
}

简单的自定义DOM追加，就可以在场景中添加元素。

4、为物体添加点击事件，这里先阅读下API

光线投射用于进行鼠标拾取 http://www.webgl3d.cn/threejs/docs/#api/zh/core/Raycaster

鼠标基类  http://nunustudio.org/docs/classes/Mouse.html

5、（重点）在使用光线投射用于进行鼠标拾取的时候，注意一定要添加相机，因为它是一个参照物。

function update(delta)
{
	//TODO <UPDATE CODE>
	//console.log(Mouse.position);
	var intersects = scene.raycaster.intersectObjects(scene.children);
	
	//Intersections list contains object, point of intersection, distance, uv and face
	for(var i = 0; i < intersects.length; i++)
	{
		if(Mouse.buttonJustPressed (Mouse.LEFT))
		{
			
			console.log(intersects[i]);
			return alert(12);
		}
	}
}

在创建工程有几个重要对象（program、scene、this）

program对象：指当前工程对象，通过它可以获取下面所属的所有的子场景以及属性；

scene对象：指一个场景对象，通过它可以获取当前场景所有的子元素；

this对象：获取当前js标签对象，如果标签下面有子元素也可以获取并使用；