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

最新推荐文章于 2024-03-14 11:43:40 发布

kagula086

最新推荐文章于 2024-03-14 11:43:40 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript或前端

本文链接：https://blog.youkuaiyun.com/lee353086/article/details/79549916

这篇博客介绍了JavaScript结合X3DOM进行3D图形渲染的基础知识，重点讨论了世界坐标系统。通过快捷键r实现观察者视角的重置，以及鼠标左右中键分别对应rotation、Pan和forward/backward操作。文章还展示了运行效果的截图及相关的HTML源代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

快捷键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