x3dom:1.导入模型并显示

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

小新快跑123

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

阅读量1.3k

点赞数

分类专栏： x3d 文章标签： x3d html javascript

本文链接：https://blog.csdn.net/weixin_42755384/article/details/88824267

版权

x3d 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

html支持直接使用javascrip的代码，以及x3d的代码，其中导入x3d模型将会非常easy

<Inline nameSpaceName="axes1" mapDEFToID="true"  url="axesSmall.x3d" />

nameSpaceName 代表的为这个模型起的名字
url表示导入的x3d模型从哪里来

先上效果图：
在这里插入图片描述
源代码：

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>My first X3DOM page</title>
    <script type='text/javascript' src='https://www.x3dom.org/download/x3dom.js'> </script>
    <link rel='stylesheet' type='text/css' href='https://www.x3dom.org/download/x3dom.css'/>
</head>


<body>
<h1>使用Inline函数进行导入模型</h1>
<script>
    function redNose()
    {
        //此处的getElementById为替换内容
        if(document.getElementById('Deer__MA_Nose').getAttribute('diffuseColor')!= '1 0 0')
            document.getElementById('Deer__MA_Nose').setAttribute('diffuseColor', '1 0 0');
        else
            document.getElementById('Deer__MA_Nose').setAttribute('diffuseColor', '0 0 0');
    }
</script>

<p>
    此处显示有三个区域：第一个是可以交互移动的三维模型，第二个是不可交互移动模型，第三个是鹿的模型
</p>

<!--TODO 测试 坐标系加标签-->
<x3d showStat="true" width='500px' height='400px'>
    <scene>

            <viewpoint position="-1.94639 1.79771 -2.89271" orientation="0.03886 0.99185 0.12133 3.75685"></viewpoint>
            <Inline nameSpaceName="axes1" mapDEFToID="true"  url="axesSmall.x3d" />

    </scene>
</x3d>



<!--TODO 测试 不可互动坐标系-->
<x3d width='500px' height='400px'>
    <scene>
        <!--不可互动坐标系-->
            <navigationInfo type='"NONE" "ANY"'></navigationInfo>
            <viewpoint position="-1.94639 1.79771 -2.89271" orientation="0.03886 0.99185 0.12133 3.75685"></viewpoint>
            <Inline nameSpaceName="axes2" mapDEFToID="true" url="axesSmall.x3d" />
    </scene>
</x3d>



<!--TODO 测试 其他图形-->
<x3d id="x3domOrientationSceneView" width='500px' height='400px'>
                <scene>
                    <navigationInfo type='"TURNTABLE" "ANY"'></navigationInfo>
                    <viewpoint position="0.0 0.0 2.95"></viewpoint>
                    <inline  onclick='redNose();'url="Deer2.x3d" mapDEFToID="true" namespaceName="orientationBox"></inline>
                </scene>
</x3d>

</body>
</html>

至于x3d的模型，从哪儿找，这里提供一个简单的x3d模型，你将该内容拷贝进txt，然后后缀命名为x3d即可。
axesSmall.x3d

<X3D>
	<scene>
		<group>

			<!-- X arrow and label -->
            <Shape isPickable="false" DEF="AXIS_LINE_X">
                <IndexedLineSet index="0 1 -1">
                    <Coordinate point="0 0 0.001, 1 0 0.001" color="1 0 0, 1 0 0"></Coordinate>
                </IndexedLineSet>
                <Appearance DEF='Red'><Material diffuseColor="0 0 0" emissiveColor='1 0 0'></Material></Appearance>
            </Shape>
            <Transform translation='1 0 0'>
                <Transform rotation='0 0 1 -1.57079632679'>
                    <Shape isPickable="false" DEF="AXIS_ARROW_X">
                        <Cone DEF='ArrowCone' bottomRadius='.10' height='0.5' subdivision="16"></Cone>
                        <Appearance USE='Red'></Appearance>
                    </Shape>
                </Transform>
                <Transform rotation='1 0 0 1.57079632679'>
                    <Billboard>
                        <Shape isPickable="false" DEF="AXIS_LABEL_X">
                            <Text string="X" solid="false">
                                <FontStyle size="0.6"></FontStyle>
                            </Text>
                            <Appearance USE='Red'></Appearance>
                        </Shape>
                    </Billboard>
                </Transform>
            </Transform>

			
			<!-- Y arrow and label -->                            
            <Shape isPickable="false" DEF="AXIS_LINE_Y">
            	<IndexedLineSet index="0 1 -1">
            	    <Coordinate point="0 0 0.001, 0 1 0.001" color="0 1 0, 0 1 0"></Coordinate>
            	</IndexedLineSet>

            	<Appearance DEF='Green'><Material diffuseColor="0 0 0" emissiveColor='0 1 0'></Material></Appearance>
			</Shape>
            <Transform translation='0 1 0'>
                <Shape isPickable="false" DEF="AXIS_ARROW_Y">
                    <Cone USE='ArrowCone'></Cone>
                    <Appearance USE='Green'></Appearance>
                </Shape>
                <Transform rotation='1 0 0 1.57079632679'>
                    <Billboard>
                        <Shape isPickable="false" DEF="AXIS_LABEL_Y">
                            <Text string="Y" solid="false">
                                <FontStyle size="0.6"></FontStyle>
                            </Text>
                            <Appearance USE='Green'></Appearance>
                        </Shape>
                    </Billboard>
                </Transform>
            </Transform>


			<!-- Z arrow and label -->
            <Shape isPickable="false" DEF="AXIS_LINE_Z">
                <IndexedLineSet index="0 1 -1">
                    <Coordinate point="0 0 0.001, 0 0 1" color="0 0 1, 0 0 1"></Coordinate>
                </IndexedLineSet>

                <Appearance DEF='Blue'><Material diffuseColor="0 0 0" emissiveColor='0 0 1'></Material></Appearance>
            </Shape>
            <Transform translation='0 0 1'>
                <Transform rotation='1 0 0 1.57079632679'>
                	<Shape isPickable="false" DEF="AXIS_ARROW_Z">
                    	<Cone USE='ArrowCone'></Cone>
                        <Appearance USE='Blue'></Appearance>
                    </Shape>
                    <Billboard>
                        <Shape isPickable="false" DEF="AXIS_LABEL_Z">
                            <Text string="Z" solid="false">
                                <FontStyle size="0.6"></FontStyle>
                            </Text>
                            <Appearance USE='Blue'></Appearance>
                        </Shape>
                    </Billboard>
                </Transform>
			</Transform>

		</group>
	</scene>
</X3D>

小新快跑123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
x3dom:1.导入模型并显示

html支持直接使用javascrip的代码，以及x3d的代码，其中导入x3d模型将会非常easy<Inline nameSpaceName="axes1" mapDEFToID="true" url="axesSmall.x3d" />nameSpaceName 代表的为这个模型起的名字url表示导入的x3d模型从哪里来先上效果图：源代码：<html&gt...
复制链接

扫一扫