foreword
The surface in the 3D scene is not only the horizontal surface, the space is composed of countless surfaces, so we may place objects on any surface, and how to determine the surface in the space? We know that a face in space can consist of a point and a normal. The left side of this demo is the panel, drag the object from the panel to the 3D scene on the right, of course, the position I drag the mouse to is the point where the object is placed, but this time we focus on how to place the model on the slope.
renderings
code generation
Create a scene
dm = new ht.DataModel();//数据模型（http://hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html）
g3d = new ht.graph3d.Graph3dView(dm);//3D 场景组件（http://hightopo.com/guide/guide/core/3d/ht-3d-guide.html）
palette = new ht.widget.Palette();//面板组件（http://hightopo.com/guide/guide/plugin/palette/ht-palette-guide.html）
splitView = new ht.widget.SplitView(palette, g3d, 'h', 0.2);//分割组件，第三个参数为分割的方式 h 为左右分，v 为上下分；第四个参数为分割比例，大于 1 的值为绝对宽度，小于 1 则为比例
splitView.addToDOM();//将分割组件添加进 body 体中The definition of these components can be viewed in the corresponding links. As for the addToDOM function that adds the split components into the body, it is necessary to explain (I mention it every time, this is really important!).
HT components are generally embedded in containers such as BorderPane, SplitView and TabView, while the outermost HT component requires the user to manually add the underlying div element returned by getView() to the DOM element of the page. It should be noted here that, When the size of the parent container changes, if the parent container is HTa predefined container component such as BorderPane and SplitView, the HT container will automatically recursively call the invalidate function of the child component to notify the update. However, if the parent container is a native html element, the HT component cannot know that it needs to be updated. Therefore, the outermost HT component generally needs to monitor the window size change event of the window and call the invalidate function of the outermost component to update.
For the convenience of loading the outermost component to fill the window, all components of HT have the addToDOM function. The implementation logic is as follows, where iv is the abbreviation of invalidate:
addToDOM = function(){
var self = this,
view = self.getView(),//获取组件的底层 div
style = view.style;
document.body.appendChild(view);//将组件底层div添加进body中
style.left = '0';//ht 默认将所有的组件的position都设置为absolute绝对定位
style.right = '0';
style.top = '0';
style.bottom = '0';
window.addEventListener('resize', function () { self.iv(); }, false);//窗口大小改变事件，调用刷新函数
}You may have noticed that the slope I added in the scene is actually an ht.Node node, as a reference to the ground plane, the stereoscopic effect will be stronger in this comparison. Here is the definition of this node:
node = new ht.Node();
node.s3(1000, 1, 1000);//设置节点的大小
node.r3(0, 0, Math.PI/4);//设置节点旋转 这个旋转的角度是有学问的，跟下面我们要设置的拖拽放置的位置有关系
node.s('3d.movable', false);//设置节点在3d上不可移动 因为这个节点只是一个参照物，建议是不允许移动
dm.add(node);//将节点添加进数据容器中Content build on the left
Palette is similar to GraphView, driven by ht.DataModel, using ht.Group to display groups, and ht.Node to display button elements. I encapsulate the primitive function in the loading Palette panel as initPalette, which is defined as follows:
function initPalette() {//加载palette面板组件中的图元
var arrNode = ['displayDevice', 'cabinetRelative', 'deskChair', 'temperature', 'indoors', 'monitor','others'];
var nameArr = ['展示设施', '机柜相关', '桌椅储物', '温度控制', '室内', '视频监控', '其他'];//arrNode中的index与nameArr中的一一对应
for (var i = 0; i < arrNode.length; i++) {
var name = nameArr[i];
var vName = arrNode[i];
arrNode[i] = new ht.Group();//palette面板是将图元都分在“组”里面，然后向“组”中添加图元即可
palette.dm().add(arrNode[i]);//向palette面板组件中添加group图元
arrNode[i].setExpanded(true);//设置分组为打开的状态
arrNode[i].setName(name);//设置组的名字 显示在分组上
var imageArr = [];
switch(i){//根据不同的分组设置每个分组中不同的图元
case 0:
imageArr = ['models/机房/展示设施/大屏.png'];
break;
case 1:
imageArr = ['models/机房/机柜相关/配电箱.png', 'models/机房/机柜相关/室外天线.png', 'models/机房/机柜相关/机柜1.png',
'models/机房/机柜相关/机柜2.png', 'models/机房/机柜相关/机柜3.png', 'models/机房/机柜相关/机柜4.png',
'models/机房/机柜相关/电池柜.png'];
break;
case 2:
imageArr = ['models/机房/桌椅储物/储物柜.png', 'models/机房/桌椅储物/桌子.png', 'models/机房/桌椅储物/椅子.png'];
break;
case 3:
imageArr = ['models/机房/温度控制/空调精简.png', 'models/机房/消防设施/消防设备.png'];
break;
case 4:
imageArr = ['models/室内/办公桌简易.png', 'models/室内/书.png', 'models/室内/办公桌镜像.png', 'models/室内/办公椅.png'];
break;
case 5:
imageArr = ['models/机房/视频监控/摄像头方.png', 'models/机房/视频监控/对讲维护摄像头.png', 'models/机房/视频监控/微型摄像头.png'];
break;
default:
imageArr = ['models/其他/信号塔.png'];
break;
}
setPalNode(imageArr, arrNode[i]);//创建palette上节点及设置名称、显示图片、父子关系
}
}I made some name settings in the setPalNode function, mainly to set the name of the model and the path of different files in different folders according to the path name I passed in the initPalette function above:
function setPalNode(imageArr, arr) {
for (var j = 0; j < imageArr.length; j++) {
var imageName = imageArr[j];
var jsonUrl = imageName.slice(0, imageName.lastIndexOf('.')) + '.json';//shape3d中的 json 路径
var name = imageName.slice(imageName.lastIndexOf('/')+1, imageName.lastIndexOf('.')); //取最后一个/和.之间的字符串用来设置节点名称
var url = imageName.slice(imageName.indexOf('/')+1, imageName.lastIndexOf('.'));//取第一个/和最后一个.之间的字符串用来设置拖拽生成模型obj文件的路径
createNode(name, imageName, arr, url, jsonUrl);//创建节点，这个节点是显示在palette面板上
}
}The createNode function to create a node is relatively simple:
function createNode(name, image, parent, urlName, jsonUrl) {//创建palette面板组件上的节点
var node = new ht.Node();
palette.dm().add(node);
node.setName(name);//设置节点名称 palette面板上显示的文字也是通过这个属性设置名称
node.setImage(image);//设置节点的图片
node.setParent(parent);//设置父亲节点
node.s({
'draggable': true,//设置节点可拖拽
'image.stretch': 'centerUniform',//设置节点图片的绘制方式
'label': ''//设置节点的label为空，这样即使设置了name也不会显示在3d中的模型下方
});
node.a('urlName', urlName);//a设置用户自定义属性
node.a('jsonUrl', jsonUrl);
return node;
}Although it is simple, it should be mentioned that draggable: true is to set the node to be draggable, otherwise the node cannot be dragged; and node.s is the default encapsulated style setting method of HT. If users need to add their own methods, they can pass Node.a method to add, the first parameter is a user-defined name, the second parameter is a user-defined value, not only constants, but also variables, objects, and functions can be passed! Another very powerful feature.
Drag and drop function
Drag and drop basically responds to the dragover and drop events that come with windows. To create a model when the mouse is released, it is necessary to generate a model when the event is triggered:
function dragAndDrop() {//拖拽功能
g3d.getView().addEventListener("dragover", function(e) {//拖拽事件
e.dataTransfer.dropEffect = "copy";
handleOver(e);
});
g3d.getView().addEventListener("drop", function(e) {//放开鼠标事件
handleDrop(e);
});
}
function handleOver(e) {
e.preventDefault();//取消事件的默认动作。
}
function handleDrop(e) {//鼠标放开时
e.preventDefault();//取消事件的默认动作。
var paletteNode = palette.dm().sm().ld();//获取palette面板中最后选中的节点
if (paletteNode) {
loadObjFunc('assets/objs/' + paletteNode.a('urlName') + '.obj', 'assets/objs/' + paletteNode.a('urlName') + '.mtl',
paletteNode.a('jsonUrl'), g3d.getHitPosition(e, [0, 0, 0], [-1, 1, 0]));//加载obj模型
}
}It is absolutely necessary to explain here, the focus of this Demo is here! The last parameter in the loadObjFunc function is the position3d coordinate of the generated model. The g3d.getHitPosition method has three parameters in total. The first parameter is the event type. If the second and third parameters are not set, they default to the center point of the horizontal plane. That is [0, 0, 0] and the normal is the y-axis, which is [0, 1, 0], a normal and a point can determine a face, so we use this method to set the node to be placed. Which plane is the plane on? I set the node node to rotate 45° around the z-axis, so I have to think about how to set the normal here. This is a mathematical problem, and you have to think for yourself. .
load model
HT loads the model through the ht.Default.loadObj function, but only if there is a node, and then load the model on this node:
function loadObjFunc(objUrl, mtlUrl, jsonUrl, p3) {//加载obj模型
var node = new ht.Node();
var shape3d = jsonUrl.slice(jsonUrl.lastIndexOf('/')+1, jsonUrl.lastIndexOf('.'));
ht.Default.loadObj(objUrl, mtlUrl, {//HT 通过 loadObj 函数来加载 obj 模型
cube: true,//是否将模型缩放到单位1的尺寸范围内，默认为false
center: true,//模型是否居中，默认为false，设置为true则会移动模型位置使其内容居中
shape3d: shape3d,//如果指定了shape3d名称，则HT将自动将加载解析后的所有材质模型构建成数组的方式，以该名称进行注册
finishFunc: function(modelMap, array, rawS3) {//用于加载后的回调处理
if (modelMap) {
node.s({//设置节点样式
'shape3d': jsonUrl,//jsonUrl 为 obj 模型的 json 文件路径
'label': ''//设置label为空，label的优先级高于name，所以即使设置了name，节点的下方也不会显示name名称
});
g3d.dm().add(node);//将节点添加进数据容器中
node.s3(rawS3);//设置节点大小 rawS3 模型的原始尺寸
node.p3(p3);//设置节点的三维坐标
node.setName(shape3d);//设置节点名称
node.setElevation(node.s3()[1]/2);//控制Node图元中心位置所在3D坐标系的y轴位置
g3d.sm().ss(node);//设置选中当前节点
g3d.setFocus(node);//将焦点设置在当前节点上
return node;
}
}
});
}End of code!
Summarize
To be honest, this demo is really easy, the difficulty may lie in the ability of spatial thinking, first confirm the normal and point, and then find the surface based on the normal and the point, this surface is more able to have a comparison in my way Understand, if it is really fantasy, it may be easy to string. This Demo is easy mainly because the encapsulated hitPosition function is simple and easy to use, which is really indispensable.