JavaScript-X3DOM学习笔记（一）-世界坐标

最新推荐文章于 2023-02-17 16:25:28 发布

kagula086

最新推荐文章于 2023-02-17 16:25:28 发布

阅读量1.1k

点赞数

分类专栏： JavaScript或前端

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

版权

快捷键r，可以重置观察者viewpoint，鼠标左键是rotation, 中键是Pan.右键是forward/backward

这是运行效果图

下面是html源代码

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8">
    <title>测试X3DOM世界坐标</title>
    <!-- 2018-3-14 by kagula -->

    <!-- x3dom用的是1.7.2dev -->
    <script type="text/javascript" src="/x3dom/x3dom.js"></script>

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

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

<body>
    <x3d style="width:100%;height:600px">
        <scene>
        </scene>
    </x3d>
</body>


</html>

<script type="text/javascript">
    //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.47元/天解锁文章

kagula086

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript-X3DOM学习笔记（一）-世界坐标

快捷键r，可以重置观察者viewpoint，鼠标左键是rotation, 中键是Pan.右键是forward/backward这是运行效果图下面是html源代码&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt; &lt;meta charset="utf-...
复制链接

扫一扫