JavaScript-X3DOM学习笔记（二）-对象的选取

本文链接：https://blog.csdn.net/lee353086/article/details/79581361

本文是JavaScript结合X3DOM的学习笔记，主要介绍如何选取X3DOM场景中的shape对象并进行移动操作。示例包括三个文件：html、js和额外的协调及工具脚本。

摘要由CSDN通过智能技术生成

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" οnclick="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" οnclick="pickObject(event)">
                <shape>
                    <appearance>
                        <material diffuseColor='0 1 0'></material>
                    </appearance>
                    <cone></cone>
                </shape>
            </transform>
            <transform translation='3 0 0' id="mySphere" οnclick="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&