在页面加入three.js图

通过将three.js对应页面引入 <div class="layui-col-md9 " id="guandao" style="height:100%;border:0px"> <iframe src='/guandao/' id='frame' class="custom-bar-chart " style="width:100%;height:100%;border:0px solid white"></iframe> </div> 将所有three.js代码加到我们的html页面当中 我们的需求是点击按钮对three.js的canvas进行贴图，所以需要将three.js写到我们的页面当中。 我遇到的问题如下：首先，three.js是直接将画布追加到body中（js代码写的但是不知道three.js是怎么写的），无法再添加样式了。 我加了一个上边距，可以看到是不起作用的。想用js去添加样式也是不可行的，没有办法选择到这个canvas，因为没办法添加id属性。 canvas{ margin-top: 300px; }

那我们怎么办呢？three.js里可以将画布设置大小代码如下： 它是获取的窗口高度，我们把这个高度变成我们想要的比例就可以了。

renderer.setSize( window.innerWidth, 0.6*window.innerHeight); // 渲染的大小 根据屏幕大小

然后我将上面的表格代码加进来。发现就达到了我们想要的效果。

下一个问题 我们之前鼠标点击会在three图上贴图，因为现在表格和three.js的canvas是一个页面，我们点击表格，同样会在canvas上贴图（贴图是通过我们屏幕的坐标（二维）进行运算之后转成的Three.js的坐标（三维））。 坐标转换算法如下： 因为我们将画布的高*0.6，所以window.innerHeight也需要 *0.6。 mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.offsetY/(0.6*window.innerHeight))* 2 +1; mouse.z = 1;

再学一下获取位置的几个属性，自己可以试试。 能进行贴图之后，又遇到了个问题，点击表格那部分，也会添加图。刚开始我想把表格部分禁止点击但是会影响表格的按钮及样式等等。 那么我们来尝试第二种方法：判断鼠标点击的高度，当其大于表格的高度值时再让其添加贴图。

var gunWidth = $('.gun').height()// 鼠标点击事件 if(event.clientY>gunWidth){ mouse.x = (event.clientX / window.innerWidth) * 2 - 1; // x轴计算方法 mouse.y = -(event.offsetY/(0.6*window.innerHeight))* 2 +1; mouse.z = 1; //后面的不沾了}