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

【探索nunustudio 开发3D模型第六弹（自定义DOM和物体点击事件）】前言：在实际开发中经常会在场景中自定义DOM元素或者添加物体点击事件，那栗子来咯！！！
1、搭建基本场景。

文章图片

场景中没有太多的物体，简单的demo。
2、介绍场景中基本元素，正方体、地面、相机、js标签，这里的js标签放在scene下，可以理解为当前场景的全局的js。
3、在当前场景自定义DOM，这个其实很简单动态创建dom元素，然后追加到window中。

function initialize() { //TODO 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 //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标签对象，如果标签下面有子元素也可以获取并使用；