1

目前我想在立方体上渲染轴（而不是通过它）。但我想不出办法做到这一点。有谁知道如何在立方体模块上渲染轴线？谢谢。

提供了下面的JS代码。立方体将在场景中渲染，轴线将在fscene中渲染。（在fscene中渲染的轴线应该覆盖在scene中渲染的立方体）

    var container, stats;

    var camera, scene, fscene, renderer;

    var cube, plane;

    function init() {

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 999999 );
        camera.position.y = 5;
        camera.position.z = 5;
        camera.position.x = 4;
        camera.lookAt(new THREE.Vector3());

        scene = new THREE.Scene();
        fscene = new THREE.Scene();

        // Cube

        var geometry = new THREE.CubeGeometry( 1, 1, 1 );

        for ( var i = 0; i < geometry.faces.length; i ++ ) {

            geometry.faces[ i ].color.setHex( 0xcccccc * i );

        }

        var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } );
        cube = new THREE.Mesh( geometry, material );
        scene.add(cube);

        addAxis();

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.autoClear = false;
        renderer.setSize( window.innerWidth, window.innerHeight );

        container.appendChild( renderer.domElement );
        animate();
    }


    function animate() {

        requestAnimationFrame(animate);
        renderer.clear();
        renderer.render(scene, camera);

        renderer.render(fscene, camera);
    }

    function addAxis() {
        var sceneSize = 9000;
        line({ begin: [0, 0, 0], end: [sceneSize, 0, 0], color: 0xff0000, scene: scene });
        line({ begin: [0, 0, 0], end: [-sceneSize, 0, 0], color: 0xff0000, dashed: true, scene: scene });
        line({ begin: [0, 0, 0], end: [0, sceneSize, 0], color: 0x00ff00, scene: scene });
        line({ begin: [0, 0, 0], end: [0, -sceneSize, 0], color: 0x00ff00, dashed: true, scene: scene });
        line({ begin: [0, 0, 0], end: [0, 0, sceneSize], color: 0x0000ff, scene: scene });
        line({ begin: [0, 0, 0], end: [0, 0, -sceneSize], color: 0x0000ff, dashed: true, scene: scene });
    }

    function line(cfg){
        var p = cfg.begin;
        var q = cfg.end;
        if (cfg.color) {
            cfg.colorb = cfg.colorb || cfg.color;
            cfg.colore = cfg.colore || cfg.color;
        }
        var geometry = new THREE.Geometry();
        var material = cfg.dashed ? new THREE.LineDashedMaterial({ linewidth: 1, color: cfg.color, dashSize: 1, gapSize: 1, depthWrite:false }) : new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors, depthWrite:false });
        var cp = new THREE.Color(cfg.colorb);
        var cq = new THREE.Color(cfg.colore);

        geometry.vertices.push(new THREE.Vector3(p[0], p[1], p[2]));
        geometry.vertices.push(new THREE.Vector3(q[0], q[1], q[2]));
        geometry.colors.push(cp,cq);
        geometry.computeLineDistances();

        var line = new THREE.Line(geometry, material, THREE.LinePieces);
        fscene.add(line);
    }
4

1 回答 1

0

TransformControls.js 包含可能对您有所帮助的代码。 depthTest应设置为false，transparent应设置为true。

于 2013-08-11T22:59:14.477 回答