Question

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

我怀疑是消失的原因是只有面对镜头才能看到矩形。是否有简单的双面矩形参数？

为什么不将矩形绘制为虚线轮廓？

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）; 渲染（）; }

function render（）{ group.rotation.y + = .05; renderer.render（场景，相机）; }

init（）; 动画（）;

Answer 1

要使材质双面，请设置

material.side = THREE.DoubleSide.

LineDashedMaterial需要计算行距离。

geometry.computeLineDistances().

WebGLRenderer优于CanvasRenderer。

three.js r.75

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

1 个答案: