Date: 2018-03-16

Author: kagula

演示如何選取物件,並移動選取的物件。

只有shape型別的物件才能被選取,這個例子有三個檔案組成,其中一個是html,另外兩個是js。

這裡是render效果


x3dom_translate.html

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8">
    <title>測試X3DOM 指定物件的平移</title>
    <!--
        Demo內容
        [1]指定物件的平移。
        [2]對場景中非當前物件的操作。
        2018-3-14 by kagula
    -->
    <!-- x3dom用的是1.7.2dev -->
    <script type="text/javascript" src="/x3dom/x3dom.1.7.3dev-full.debug.js"></script>

    <!-- d3用的是4.13.0 -->
    <script type="text/javascript" src='/d3/d3.min.js'></script>


    <script type="text/javascript" src='/kagula/coordinator.js'></script>
    <script type="text/javascript" src='/kagula/gizmo.js'></script>

    <link rel="stylesheet" type="text/css" href="/x3dom/x3dom.css">
</head>

<body>
    <x3d style="width:100%;height:800px" showLog="false" id="x3d" needLineWidth="true">
        <scene>
            <transform translation='0 0 0'  id="myBox" onclick="pickObject(event)">
                <shape id="myBox">
                    <appearance>
                        <material diffuseColor='1 0 0'></material>
                    </appearance>
                    <box size="1 2 3"></box>
                </shape>
            </transform>
            <transform translation='-3 0 0' id="myCone" onclick="pickObject(event)">
                <shape>
                    <appearance>
                        <material diffuseColor='0 1 0'></material>
                    </appearance>
                    <cone></cone>
                </shape>
            </transform>
            <transform translation='3 0 0' id="mySphere" onclick="pickObject(event)">
                <shape>
                    <appearance>
                        <material diffuseColor='0 0 1'></material>
                    </appearance>
                    <sphere></sphere>
                </shape>
            </transform>
        </scene>
    </x3d>
</body>

</html>

<script type="text/javascript">    
    x3dom.runtime.ready = function () {
        console.log("About to render something the first time");

        //切換到wireframe模式, 其它類似呼叫參考https://www.x3dom.org/download/1.5/docs/singlehtml/
        //var e = document.getElementById('x3d');
        //e.runtime.togglePoints(true);
        //e.runtime.togglePoints(true);
    }
    drawAxis();    

    function pickObject(event)
    {
        //d3.selectAll("shape").attr("render", "false");//hide所有shape型別的物件。
        var pickObj = event.hitObject.parentNode;
        //pickObj.render = "false";//隱藏當前shape物件,注意,只有shape物件才會被pick.
        console.log("pickObject => " + pickObj.id);
        setGizmo(pickObj);
    }
</script>

coordinator.js

//Horizontal axis
function drawAxisX(selectorRoot, countOfTick, lengthOfTick, heightOfTick) {
    var axisLength = countOfTick * lengthOfTick;

    //draw axis
    var linesetX = d3.select(selectorRoot).append("group").attr("id", "groupAxisX")
        .append("shape")
        .append("lineset").attr("vertexcount", "2");

    linesetX.append("coordinate").attr("point", d => "0 0 0, " + axisLength + " 0 0");
    linesetX.append("color").attr("color", "1 0 0, 1 0 0");

    //draw tick
    //第一個shape是axis,後面countOfTick個才是真正的刻度。
    let ticks = d3.range(countOfTick + 1).map(function (i) {
        return i; //i=[0,1,...,countOfTick]
    })
    d3.select("#groupAxisX").selectAll("lineset").data(ticks)
    .enter().append("shape").append("lineset").attr("vertexcount", "2")
    .append("coordinate").attr("point", d => d * lengthOfTick + " 0 0, " + d * lengthOfTick + " " + heightOfTick + " 0"); //因為第一個是axis,d的第一個元素被跳過,所以d=[1,2,..]

    //draw text
    d3.select("#groupAxisX").selectAll(".label").data(ticks)
    .enter().append("transform").classed("label", "true").attr("translation", d => (d * lengthOfTick + 0.6) + " " + (heightOfTick - 0.5) + " 0")
    .append("billboard")
    .append("shape").classed("shapeAxisX", "true")
    .append("text").attr("string", d => d).attr("solid", "false")//正反兩面可見
    .append("fontstyle").attr("family", "yahei").attr("size", "1.2");

    //返回#groupAxisX子節點下面的子節點下面class為shapeAxisX的所有節點
    d3.select("#groupAxisX").selectAll(".shapeAxisX")
    .append("appearance")//新增appearance子節點
    .append("material").attr("diffuseColor", "0 0 0");

    //draw arrow
    d3.select("#groupAxisX").append("transform").attr("translation", (axisLength + 0.25) + " 0 0").attr("rotation", "0  0 1 " + (-3.14159) / 2)
    .append("shape").attr("id", "xAxisArrow").append("cone").attr("height", "0.5").attr("bottomRadius", "0.1").attr("lit", "true");
    d3.select("#xAxisArrow").append("appearance").append("material").attr("diffuseColor", '1 0 0');
}

//Vertical axis
function drawAxisY(selectorRoot, countOfTick, lengthOfTick, heightOfTick) {
    var axisLength = countOfTick * lengthOfTick;

    //draw axis
    var linesetY = d3.select(selectorRoot).append("group").attr("id", "groupAxisY")
        .append("shape")
        .append("lineset").attr("vertexcount", "2");

    linesetY.append("coordinate").attr("point", d => "0 0 0, 0 " + axisLength + " 0");
    linesetY.append("color").attr("color", "0 1 0, 0 1 0");


    //draw tick
    //第一個shape是axis,後面countOfTick個才是真正的刻度。
    let ticks = d3.range(countOfTick + 1).map(function (i) {
        return i + 1; //i=[0,1,...,countOfTick]
    })
    d3.select("#groupAxisY").selectAll("lineset").data(ticks)
    .enter().append("shape").append("lineset").attr("vertexcount", "2")
    .append("coordinate").attr("point", d => "0 " + ((d - 1) * lengthOfTick) + " 0, " + heightOfTick + " " + (d - 1) * lengthOfTick + " 0"); //因為第一個是axis,d的第一個元素被跳過,所以d=[1,2,..]

    //draw text
    ticks.splice(ticks.length - 1, 1);
    d3.select("#groupAxisY").selectAll(".label").data(ticks)
    .enter().append("transform").classed("label", "true").attr("translation", d =>  (0.8) + " " + (d * lengthOfTick + 1) + " 0")
    .append("billboard")
    .append("shape").classed("shapeAxisY", "true")
    .append("text").attr("string", d => d).attr("solid", "false")//正反兩面可見
    .append("fontstyle").attr("family", "yahei").attr("size", "1.2");

    //返回#groupAxisY子節點下面的子節點下面class為shapeAxisY的所有節點
    d3.select("#groupAxisY").selectAll(".shapeAxisY")
    .append("appearance")//新增appearance子節點
    .append("material").attr("diffuseColor", "0 0 0");

    //draw arrow
    d3.select("#groupAxisY").append("transform").attr("translation", "0 " + (axisLength + 0.25) + " 0")
    .append("shape").attr("id", "yAxisArrow").append("cone").attr("height", "0.5").attr("bottomRadius", "0.1").attr("lit", "true");
    d3.select("#yAxisArrow").append("appearance").append("material").attr("diffuseColor", '0 1 0');
}

//Depth axis
function drawAxisZ(selectorRoot, countOfTick, lengthOfTick, heightOfTick) {
    var axisLength = countOfTick * lengthOfTick;

    //draw axis
    var linesetY = d3.select(selectorRoot).append("group").attr("id", "groupAxisZ")
        .append("shape")
        .append("lineset").attr("vertexcount", "2");

    linesetY.append("coordinate").attr("point", d => "0 0 0, 0 0 " + axisLength);
    linesetY.append("color").attr("color", "0 0 1, 0 0 1");


    //draw tick
    //第一個shape是axis,後面countOfTick個才是真正的刻度。
    let ticks = d3.range(countOfTick + 1).map(function (i) {
        return i + 1; //i=[0,1,...,countOfTick]
    })
    d3.select("#groupAxisZ").selectAll("lineset").data(ticks)
    .enter().append("shape").append("lineset").attr("vertexcount", "2")
    .append("coordinate").attr("point", d => "0 0 " + ((d - 1) * lengthOfTick) + ", " + heightOfTick + " 0 " + (d - 1) * lengthOfTick); //因為第一個是axis,d的第一個元素被跳過,所以d=[1,2,..]

    //draw text
    ticks.splice(ticks.length - 1, 1);
    d3.select("#groupAxisZ").selectAll(".label").data(ticks)
    .enter().append("transform").classed("label", "true").attr("translation", d =>  (0.8) + " 1.0 " + (d * lengthOfTick + 1))
    .append("billboard")
    .append("shape").classed("shapeAxisZ", "true")
    .append("text").attr("string", d => d).attr("solid", "false")
    .append("fontstyle").attr("family", "yahei").attr("size", "1.2");
    //返回#groupAxisY子節點下面的子節點下面class為shapeAxisY的所有節點
    d3.select("#groupAxisZ").selectAll(".shapeAxisZ")
    .append("appearance")//新增appearance子節點
    .append("material").attr("diffuseColor", "0 0 0");

    //draw arrow
    d3.select("#groupAxisZ").append("transform").attr("translation", "0 0 " + (axisLength + 0.25)).attr("rotation", "1 0 0 " + (3.14159) / 2)
    .append("shape").attr("id", "zAxisArrow").append("cone").attr("height", "0.5").attr("bottomRadius", "0.1").attr("lit", "true");
    d3.select("#zAxisArrow").append("appearance").append("material").attr("diffuseColor", '0 0 1');
}

function drawAxis() {
    const selectorRoot = "scene";
    const countOfTick = 5;
    const lengthOfTick = 10;
    const heightOfTick = 2;

    drawAxisX(selectorRoot, countOfTick, lengthOfTick, heightOfTick);
    drawAxisY(selectorRoot, countOfTick, lengthOfTick, heightOfTick);
    drawAxisZ(selectorRoot, countOfTick, lengthOfTick, heightOfTick);
}

gizmo.js

//function onMouseMove_detect_lineset(event) {
//    var x3dElement = document.getElementById("x3d");
//    var viewArea = x3dElement.runtime.canvas.doc._viewarea;
//    var line = viewArea.calcViewRay(event.mouse_drag_x, event.mouse_drag_y);
//}
function resetSensor()
{
    d3.select("#planeSensorX").remove();
    d3.select("#planeSensorY").remove();
    d3.select("#planeSensorZ").remove();
    parent_translation = document.getElementById(gizmo_root_id).getFieldValue("translation");//因為Demo只有一級parent,下次得用遞迴代替。
}

//Highlight the axis when mouse pointer hover a axis.
function onMouseOverGizmoX(event)
{
    //console.log("event.id = " + event.id);
    d3.select("#xGizmoAxis_material").attr("diffuseColor", "1 1 0");
    
    //if (document.getElementById("planeSensorX") == null)
    //{
        resetSensor();

        d3.select("#groupGizmoX").append("planeSensor")
            .attr("id", "planeSensorX")
            .attr("axisRotation", "1 0 0 -1.57")
            .attr("autoOffset", "false")
            .attr("minPosition", "-600 0")
            .attr("maxPosition", "600 0")
            .attr("onoutputchange", "processTranslationGizmoEvent(event)");
    //}
}

function onMouseOutGizmoX(event) {
    //console.log("event.id = " + event.id);
    d3.select("#xGizmoAxis_material").attr("diffuseColor", "1 0 0");
}

function onMouseOverGizmoY(event) {
    d3.select("#yGizmoAxis_material").attr("diffuseColor", "1 1 0");

    //if (document.getElementById("planeSensorY") == null) {
        resetSensor();

        d3.select("#groupGizmoY").append("planeSensor")
            .attr("id", "planeSensorY")
            .attr("axisRotation", "0 1 0 -1.57")
            .attr("autoOffset", "false")
            .attr("minPosition", "0 -600 ")
            .attr("maxPosition", "0 600 ")
            .attr("onoutputchange", "processTranslationGizmoEvent(event)");
    //}
}

function onMouseOutGizmoY(event) {
    d3.select("#yGizmoAxis_material").attr("diffuseColor", "0 1 0");
}

function onMouseOverGizmoZ(event) {
    d3.select("#zGizmoAxis_material").attr("diffuseColor", "1 1 0");

    resetSensor();

    d3.select("#groupGizmoZ").append("planeSensor")
        .attr("id", "planeSensorZ")
        .attr("axisRotation", "0 1 0 -1.57")//
        .attr("autoOffset", "false")
        .attr("minPosition", "-600 0")
        .attr("maxPosition", "600 0")
        .attr("onoutputchange", "processTranslationGizmoEvent(event)");
}

function onMouseOutGizmoZ(event) {
    d3.select("#zGizmoAxis_material").attr("diffuseColor", "0 0 1");
}

var gizmo_root;
var gizmo_root_id;

var parent_translation = new x3dom.fields.SFVec3f(0, 0, 0);//記住translation前的世界座標


function processTranslationGizmoEvent(event)
{
    var sensorToWorldMatrix, translationValue;

    if (event.fieldName === 'translation_changed') {
        //convert the sensor's output from sensor coordinates to world coordinates (i.e., include its 'axisRotation')
        sensorToWorldMatrix = x3dom.fields.SFMatrix4f.parseRotation(event.target.getAttribute("axisRotation"));

        //這個相對值,不是相對於上次的,而是相對於Gizmo重建後的第一次的"相對值"!
        translationValue = sensorToWorldMatrix.multMatrixVec(event.value);
        //console.log("translationValue=" + translationValue);

        //console.log("=" + document.getElementById(gizmo_root_id).getAttribute("translation"));//只能拿到物件初始設定的translation屬性,而不是已經修改過的translation屬性。
        //console.log("2=" + gizmo_root.translation);//只能拿到物件初始設定的translation屬性,而不是已經修改過的translation屬性。        

        //返回兩個向量的加法運算
        translationValue = translationValue.add(x3dom.fields.SFVec3f.parse(parent_translation));

        //transform the affected sensor geometry
        document.getElementById(gizmo_root_id).setFieldValue('translation', translationValue);

        //console.log("3=" + document.getElementById(gizmo_root_id).getFieldValue("translation"));//只有這行能拿到當前值
        console.log("10 event.fieldName=" + event.fieldName + ", event.value=" + event.value + ", event.target.id=" + event.target.id + ", translationValue=" + translationValue + ", x_translation=" + x_translation + ", y_translation=" + y_translation);
    }
}

//Horizontal axis
function drawGizmoX(selectorRoot, lengthOfLine) {
    //draw axis
    var linesetX = selectorRoot.append("group").attr("id", "groupGizmoX")
        .append("transform").attr("rotation", "0 0 1 " + (3.14159) / 2).attr("translation", lengthOfLine/2 + " 0 0")
        .append("shape").attr("onMouseOver", "onMouseOverGizmoX(this)").attr("onMouseOut", "onMouseOutGizmoX(this)").attr("id", "xGizmoAxis")
        .append("cylinder").attr("radius", "0.08").attr("height", lengthOfLine);
    d3.select("#xGizmoAxis").append("appearance").append("material").attr("diffuseColor", '1 0 0').attr("id", 'xGizmoAxis_material');

    //draw arrow
    d3.select("#groupGizmoX").append("transform").attr("translation", (lengthOfLine + 0.25) + " 0 0").attr("rotation", "0  0 1 " + (-3.14159) / 2)
    .append("shape").attr("onMouseOver", "onMouseOverGizmoX(this)").attr("onMouseOut", "onMouseOutGizmoX(this)").attr("id", "xGizmoArrow").append("cone").attr("height", "0.5").attr("bottomRadius", "0.1").attr("lit", "true");
    d3.select("#xGizmoArrow").append("appearance").append("material").attr("diffuseColor", '1 0 0');

    //add sensor
    //d3.select("#groupGizmoX").append("planeSensor")
    //    .attr("id", "planeSensorX")
    //    .attr("axisRotation", "1 0 0 -1.57")
    //    .attr("autoOffset", "false")
    //    .attr("minPosition", "-600 0")
    //    .attr("maxPosition", "600 0")
    //    .attr("onoutputchange", "processTranslationGizmoEvent(event)");
}

//Vertical axis
function drawGizmoY(selectorRoot, lengthOfLine) {
    //draw axis
    var lineset = selectorRoot.append("group").attr("id", "groupGizmoY")
        .append("transform").attr("translation", "0 " + lengthOfLine / 2 + " 0")
        .append("shape").attr("onMouseOver", "onMouseOverGizmoY(this)").attr("onMouseOut", "onMouseOutGizmoY(this)").attr("id", "yGizmoAxis")
        .append("cylinder").attr("radius", "0.08").attr("height", lengthOfLine);
    d3.select("#yGizmoAxis").append("appearance").append("material").attr("diffuseColor", '0 1 0').attr("id", 'yGizmoAxis_material');

    //draw arrow
    d3.select("#groupGizmoY").append("transform").attr("translation", "0 " + (lengthOfLine + 0.25) + " 0")
    .append("shape").attr("onMouseOver", "onMouseOverGizmoY(this)").attr("onMouseOut", "onMouseOutGizmoY(this)").attr("id", "yGizmoArrow").append("cone").attr("height", "0.5").attr("bottomRadius", "0.1").attr("lit", "true");
    d3.select("#yGizmoArrow").append("appearance").append("material").attr("diffuseColor", '0 1 0');

    //add sensor
    //d3.select("#groupGizmoY").append("planeSensor")
    //    .attr("id", "planeSensorY")
    //    .attr("axisRotation", "0 1 0 -1.57")
    //    .attr("autoOffset", "false")
    //    .attr("minPosition", "0 -600 ")
    //    .attr("maxPosition", "0 600 ")
    //    .attr("onoutputchange", "processTranslationGizmoEvent(event)");
}

//Depth axis
function drawGizmoZ(selectorRoot, lengthOfLine) {
    //draw axis
    var lineset = selectorRoot.append("group").attr("id", "groupGizmoZ")
        .append("transform").attr("rotation", "1 0 0 " + (3.14159) / 2).attr("translation", "0 0 " + lengthOfLine / 2)
        .append("shape").attr("onMouseOver", "onMouseOverGizmoZ(this)").attr("onMouseOut", "onMouseOutGizmoZ(this)").attr("id", "zGizmoAxis")
        .append("cylinder").attr("radius", "0.08").attr("height", lengthOfLine);
    d3.select("#zGizmoAxis").append("appearance").append("material").attr("diffuseColor", '0 0 1').attr("id", 'zGizmoAxis_material');


    //draw arrow
    d3.select("#groupGizmoZ").append("transform").attr("translation", "0 0 " + (lengthOfLine + 0.25)).attr("rotation", "1 0 0 " + (3.14159) / 2)
    .append("shape").attr("onMouseOver", "onMouseOverGizmoZ(this)").attr("onMouseOut", "onMouseOutGizmoZ(this)").attr("id", "zGizmoArrow").append("cone").attr("height", "0.5").attr("bottomRadius", "0.1").attr("lit", "true");
    d3.select("#zGizmoArrow").append("appearance").append("material").attr("diffuseColor", '0 0 1');
}

function setGizmo(selectorRoot) {
    d3.select("#gizmo").remove();

    gizmo_root = selectorRoot;
    gizmo_root_id = selectorRoot.id;

    const lengthOfLine = 5;

    resetSensor();
    var gizmoRoot = d3.select(selectorRoot).append("transform").attr("id","gizmo");

    drawGizmoX(gizmoRoot, lengthOfLine);
    drawGizmoY(gizmoRoot, lengthOfLine);
    drawGizmoZ(gizmoRoot, lengthOfLine);
}