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

Posted 2023-02-27

【中文标题】three.js Mesh 不根据方向显示矩形

【英文标题】：three.js Mesh not displaying rectangle depending on orientation

【发布时间】：2016-07-23 02:49:17

【问题描述】：

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

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

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

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（场景，相机）；

初始化(); 动画（）；

【参考方案1】：

要使材料双面，设置

material.side = THREE.DoubleSide.

LineDashedMaterial 需要计算行距。

geometry.computeLineDistances().

WebGLRenderer 优于 CanvasRenderer。

three.js r.75

【讨论】：

添加 computeLineDistances() 似乎没有任何效果。

WebGLRenderer 在哪些方面优于 CanvasRenderer？

CanvasRenderer 有 limitations -- 跟随链接。 WebGLRender 支持 WebGL 的功能。