o3d中正反两个面都可以看见贴图

来源：互联网发布：网络应急协调中心笔试编辑：程序博客网时间：2024/05/21 15:49

为了优化资源使用,在渲染时默认只能看见一个面,要正反两个面的话,只需加入如下代码即可

g_viewInfo.performanceState.getStateParam('CullMode').value = g_o3d.State.CULL_NONE;
g_viewInfo.zOrderedState.getStateParam('CullMode').value = g_o3d.State.CULL_NONE;

以下是全部代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>primitive</title>
    <script type="text/javascript" src="../o3djs/base.js"></script>
    <script type="text/javascript">
        o3djs.require('o3djs.util');
        o3djs.require('o3djs.math');
        o3djs.require('o3djs.rendergraph');
        o3djs.require('o3djs.primitives');
        o3djs.require('o3djs.material')
        o3djs.require('o3djs.io')
        o3djs.require('o3djs.event')
        o3djs.require('o3djs.arcball');

        window.onload=init;
        window.onunload = uninit;

        var g_o3d;
        var g_client;
        var g_pack;
        var g_math;
        var g_viewInfo;
        var g_o3dElement;
        var g_eyeposition = [3,4,14];
        var g_finish = false;
        var g_target;
        var g_up;
        var path;
        var g_aball;
        var g_thisRot;
        var g_lastRot;
        var g_dragging = false;
        var g_o3dWidth = -1;
        var g_o3dHeight = -1;
        var temp;
        var g_quaternions;

        function init(){
            o3djs.util.makeClients(clientStep2);
        }

        function clientStep2(clientElement){
            initGlobals(clientElement);

            initContext();

             loadTexture()

            /**
             * 加入监听事件
             */
            o3djs.event.addEventListener(g_o3dElement, 'mousedown', OnMouseDown);
            o3djs.event.addEventListener(g_o3dElement, 'mousemove', OnMouseMove);
            o3djs.event.addEventListener(g_o3dElement, 'mouseup', OnMouseUp);
            o3djs.event.addEventListener(g_o3dElement, 'wheel', OnWheel);

            g_finish = true; // for selenium testing.
        }

        function OnMouseDown(e){
            g_lastRot = g_thisRot;

            g_aball.click([e.x, e.y]);

            g_dragging = true;
        }

        function OnMouseMove(e){
            var rotationQuat = g_aball.drag([e.x, e.y]);
            if (g_dragging) {
                var rot_mat = g_quaternions.quaternionToRotation(rotationQuat);
                g_thisRot = g_math.matrix4.mul(g_lastRot, rot_mat);

                var m = g_client.root.localMatrix;
                g_math.matrix4.setUpper3x3(m, g_thisRot);
                g_client.root.localMatrix = m;
            }

        }

        function OnMouseUp(e){
            g_dragging = false;
        }

        /*
        鼠标滚轮事件
         */
        function OnWheel(e){
        if (e.deltaY) {
                g_eyeposition =
                g_math.mulScalarVector((e.deltaY < 0 ? 11 : 13) / 12,
                                        g_eyeposition);
                g_viewInfo.drawContext.view =
                g_math.matrix4.lookAt(g_eyeposition,
                                      g_target,    // target
                                      g_up);
           }
        }

        /**
         * 加载贴图
         */
        function loadTexture(){
            var path = window.location.href;
            var index = path.lastIndexOf('/');
            path = path.substring(0, index+1) + 'texture.png';

           // alert(path)
           // var g_sampler = g_pack.createObject('Sampler');
           // g_sampler.addressModeU = g_o3d.Sampler.WRAP;
           // g_sampler.addressModeV = g_o3d.Sampler.WRAP;
           // g_sampler.minFilter = g_o3d.Sampler.ANISOTROPIC;
           // g_sampler.maxAnisotropy = 4;
            o3djs.io.loadTexture(g_pack,path,function(texture, exception){
                if (exception) {
                     alert(exception);
                   } else {
                     temp = texture;

                      createShapes(temp);
                   }
            })
        };
        /**
         * 创建图形
         * @param temp 传入图片
         */
        function createShapes(temp){

            var plane = o3djs.primitives.createPlane(
                    g_pack,
                    createMaterial(temp),
                    4, // Width.
                    4, // Depth.
                    1, // Horizontal subdivisions.
                    1);     // Vertical subdivisions.

            var transform = g_pack.createObject('Transform');
            transform.addShape(plane);
            transform.translate([0, 0, 0]);
            transform.parent = g_client.root;
        }

        /**
         * 创建材质
         * @param temp
         */
        function createMaterial(texture) {

            var g_material= o3djs.material.createBasicMaterial(g_pack, g_viewInfo, texture);
            g_material.getParam('emissive').value = [0, 0, 0, 1]; //发射光（本身的颜色）
            g_material.getParam('ambient').value = g_math.mulScalarVector(0.5, [1,1,1,1]); //环境光
            g_material.getParam('specular').value = g_math.mulScalarVector(1, [1,1,1,1]); //镜面光
            g_material.getParam('shininess').value = 50; //光泽度（默认=50）
            g_material.getParam('specularFactor').value = 0.3; //镜面系数（默认=1）
            g_material.getParam('lightColor').value = [1, 1, 1, 1]; //光源颜色？
            return g_material;
        }

        /**
         * 初始化全局变量
         * @param clientElements
         */
        function initGlobals(clientElements){
            g_o3dElement = clientElements[0];
            window.g_client = g_client = g_o3dElement.client;
            g_o3d = g_o3dElement.o3d;
            g_math = o3djs.math;
            g_pack = g_client.createPack();
            g_quaternions = o3djs.quaternions;
            g_viewInfo = o3djs.rendergraph.createBasicView(
            g_pack,
            g_client.root,
            g_client.renderGraphRoot
            );
         }

        /**
         * 初始化上下文
         */
        function initContext(){
            g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
            g_math.degToRad(30),
            g_o3dElement.clientWidth / g_o3dElement.clientHeight, // Aspect ratio.
            1,                  // Near plane.
            5000);              // Far plane.

            g_target = [0, 0, 0];
            g_up = [0, 0, -1];

            g_viewInfo.drawContext.view = g_math.matrix4.lookAt(
            g_eyeposition,   // eye
            g_target,    // target
            g_up); // up

            //去掉这两句就可以正反两个面都看见

          // g_viewInfo.performanceState.getStateParam('CullMode').value = g_o3d.State.CULL_NONE;
           // g_viewInfo.zOrderedState.getStateParam('CullMode').value = g_o3d.State.CULL_NONE;

            g_lastRot = g_math.matrix4.identity();
            g_thisRot = g_math.matrix4.identity();
            g_aball = o3djs.arcball.create(100, 100);
        }

    function updateProjection() {
// Create a perspective projection matrix.
        g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
        g_math.degToRad(45), g_o3dWidth / g_o3dHeight, 0.1,
        5000);
    }

        /**
         * 设置客户端大小
         */
        function setClientSize() {
        var newWidth = parseInt(g_client.width);
        var newHeight = parseInt(g_client.height);

        if (newWidth != g_o3dWidth || newHeight != g_o3dHeight) {
            g_o3dWidth = newWidth;
            g_o3dHeight = newHeight;

             updateProjection();
             g_aball.setAreaSize(g_o3dWidth, g_o3dHeight);
         }
        }

        function updateCamera() {
        var up = [0, 1, 0];
        g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_eyeposition,
                                                      g_target,
                                                      g_up);
        //g_lightPosParam.value = g_eyeposition;
        }

        /**
         * 回收资源
         */
        function uninit(){
            if(g_client){
                g_client.cleanup();
            }
        }
    </script>
</head>
<body>

<div id="o3d" style="width: 600px; height: 600px;"></div>

</body>
</html>