Мне нужно скрыть края примитива коробки ThreeJS

Мне нужно скрыть ребра, отображаемые в примитиве коробки, с помощью ThreeJS. Они рисуются только тогда, когда я накладываю текстуру на лица.

Я пробовал со многими параметрами, такими как wireframe=false, но края все еще рисуются.

Это код:

        var container, stats;
        var camera, scene, renderer;

        var canvasWidth = 500; 
        var canvasHeight = 500;
        var windowHalfX = 100;
        var windowHalfY = 100;

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

        // Camera
        camera = new THREE.OrthographicCamera( canvasWidth / - 2, canvasWidth / 2, canvasHeight / 2, canvasHeight / - 2, - 500, 5000 );

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

        camera.position.x = 200;
        camera.position.y = 200;
        camera.position.z = 200;

        camera.lookAt( scene.position );

        // Renderer
        renderer = new THREE.CanvasRenderer();
        renderer.setClearColor( "#fff" );
        renderer.setSize( canvasWidth, canvasHeight );

        container.appendChild( renderer.domElement );

        var size = 100;
        geometry = new THREE.BoxGeometry( size, size, size ); 

        material = new THREE.MeshBasicMaterial({ 
            color: "#0000ff", 
            side: THREE.DoubleSide,
            wireframe: false
        });

        // Comment this line to paint a single color cube
        material = new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture("http://upload.wikimedia.org/wikipedia/commons/8/81/Color_icon_black.png") });

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        var draw = function() {
            requestAnimationFrame( draw );
            renderer.render( scene, camera );
        }

        draw();

И ссылка на пример:

http://jsfiddle.net/gyss/qg4x9/

Ваше здоровье!


javascript three.js textures edges
person gyss    schedule 28.05.2014    source источник
comment
Кажется, скрипка не работает? Можете ли вы уточнить, что мне нужно, чтобы удалить вершины, которые отображаются в примитиве коробки, используя ThreeJS. Они рисуются только тогда, когда я накладываю текстуру на лица. Если вы удалите одну вершину, вы, скорее всего, удалите половину своего прямоугольника. Также, скорее всего, придется убрать indecis и прочие атрибуты. Держу пари, тебе нужно что-то еще.   -  person pailhead    schedule 29.05.2014
comment
Мне очень жаль за ошибку. Я хотел удалить (или не закрашивать) белые края, которые вы видите в примере.   -  person gyss    schedule 29.05.2014
comment
См. stackoverflow. ком/вопросы/20199721/   -  person WestLangley    schedule 29.05.2014
comment
Спасибо, WestLangley, несколько минут назад я протестировал WebGLRenderer и решил проблему ;)   -  person gyss    schedule 29.05.2014

Ответы (2)


arrow_upward
0
arrow_downward

Я решил свою проблему, изменив эту строку

renderer = new THREE.CanvasRenderer();

для этого другого

renderer = new THREE.WebGLRenderer();

Другим возможным решением, как прокомментировал выше WestLangley, является использование этой строки с CanvasRenderer

material.overdraw = 0.5; // or some number between 0 and 1
person gyss    schedule 29.05.2014

arrow_upward
0
arrow_downward

При использовании renderer = new THREE.CanvasRenderer(); для удаления краев необходимо добавить параметр (overdraw:true) к определению материала следующим образом:

var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );

Затем вы можете добавить материал к 3D-объекту:

mesh = new THREE.MeshBasicMaterial( geometry, material );
person Rachid Zock    schedule 24.02.2015
comment
var material = new THREE.MeshBasicMaterial({overdraw: true}); без карты:текстура - person Rachid Zock; 24.02.2015