three.js Mesh 不根据方向显示矩形

Question

我创建了一个 MWE，它可以创建一个旋转的矩形。但是，矩形会根据其方向消失，并且材质（声称是虚线）不起作用，而是以纯白色绘制矩形。

1. 我怀疑消失是由于矩形仅在面对相机时可见。有没有简单的双边矩形参数？

2. 为什么矩形没有画成虚线轮廓？

   var 容器，统计信息； var 相机、场景、渲染器； 变量组;

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

   函数初始化（）{ 容器 = document.createElement('div'); document.body.appendChild(容器);

   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 );
   

   }

   函数动画（）{ requestAnimationFrame( 动画 ); 使成为（）; }

   函数渲染（）{ group.rotation.y += .05; renderer.render（场景，相机）； }

   初始化(); 动画（）；

Answer 1

要使材料双面，设置

material.side = THREE.DoubleSide.

LineDashedMaterial 需要计算行距。

geometry.computeLineDistances().

WebGLRenderer 优于 CanvasRenderer。

three.js r.75