使用x3Dom进行着色

时间:2018-06-06 23:25:07

标签: javascript html5 3d meshlab x3dom

我正在尝试使用这个简单的代码阅读并使用x3dom查看器显示3D网格(.x3d):

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>My first X3DOM page</title>
    <script type='text/javascript' src='x3dom.js'> </script>
    <link rel='stylesheet' type='text/css' href='x3dom.css'/>
</head>
<body  >
<h1>Using the Inline Node</h1>
<script>
    function redNose()
    {
        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>
    This example includes an external x3d scene. You can even manipulate its content during runtime.
</p>
            <x3d class="x3d_element1">
                <scene> 
                    
                <Viewpoint position="-123.69456 -259.97812 73.19898" orientation="0.95184 -0.21340 -0.22012 1.59090" description="defaultX3DViewpointNode"></Viewpoint>
                <transform DEF='couch1'>
                    <Inline nameSpaceName="shalimar_fusion" mapDEFToID="true" url="perfume.x3d" />
                </Transform>
                <timeSensor DEF='clock1' cycleInterval='8' loop='true'></timeSensor>
                <orientationInterpolator DEF='spinThings1' key='0 0.25 0.5 0.75 1' keyValue='0 0 1 0  0 0 1 1.57079  0 0 1 3.14159  0 0 1 4.71239  0 0 1 6.28317'></orientationInterpolator>
             
                <ROUTE fromNode='clock1' fromField='fraction_changed' toNode='spinThings1' toField='set_fraction'></ROUTE>
                <ROUTE fromNode='spinThings1' fromField='value_changed' toNode='couch1' toField='set_rotation'></ROUTE>
                    </scene>
                </x3d>
</body>
</html>

显示时我注意到阴影不好(平面几何)与Meshlab渲染相反(请参见图1(x3dom)和图2(Meshlab))。如何使用与Meshlab类似(或近似)的x3dom进行渲染? (我尝试使用directionalLight选项卡,但渲染仍然远离我想要的渲染(类似于Meshlab):

<directionalLight id="directional" direction='0 1 0' on ="TRUE" 
intensity='1.0' shadowIntensity='0.5'    shadowFilterSize="16" 
shadowMapSize="512">
</directionalLight>

figure1 figure 2

0 个答案:

没有答案