three.js Mesh not displaying rectangle depending on orientation

0
votes

I have created a MWE that creates a single rectangle spinning. However, the rectangle disappears based on its orientation, and the material (which claims to be dotted lines) does not work and instead the rectangle is drawn in solid white.

  1. I suspect the disappearance is due to rectangles only being visible facing the camera. Is there a simple two-sided rectangle parameter?

  2. Why isn't the rectangle being drawn as a dashed outline?

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

    var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2;

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

    camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 150, 500 );

scene = new THREE.Scene();

var lineDash = new THREE.LineDashedMaterial( { color: 0xffaa00, dashSize: 3, gapSize: 1, linewidth: 2 } );
var wall = new THREE.Geometry();
var h = 200;
wall.vertices.push(new THREE.Vector3(0, 0, 0));
wall.vertices.push(new THREE.Vector3(200, 0, 0));
wall.vertices.push(new THREE.Vector3(200, 0, h));
wall.vertices.push(new THREE.Vector3(0, 0, h));
wall.faces.push( new THREE.Face3( 0, 1, 2 ) );
wall.faces.push( new THREE.Face3( 0, 2, 3 ) );


var wallObj = new THREE.Mesh(wall, lineDash );
wallObj.position.x = 0;
wallObj.position.y = 200;

wallObj.rotation.x = Math.PI/2;

group = new THREE.Group();
group.add(wallObj);

scene.add( group );

renderer = new THREE.CanvasRenderer();
renderer.setClearColor( 0xf0f0f0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

    }

    function animate() { requestAnimationFrame( animate ); render(); }

    function render() { group.rotation.y += .05; renderer.render( scene, camera ); }

    init( ); animate();

1
three.js

1 Answers

2
votes

To make a material double-sided, set

material.side = THREE.DoubleSide.

LineDashedMaterial requires line distances to be computed.

geometry.computeLineDistances().

WebGLRenderer is preferable to CanvasRenderer.

three.js r.75