Javascript 正方形网格的两个三角形未在三个js中渲染
作为三点js的初学者，我遇到了这个疑问。如果可以的话，请帮助我。 我试图画一个三角形和正方形并排，但问题发生在正方形网格中。只有第一次垂直推送发生，而不是第二次，它不会被渲染。我在这里做错什么了吗Javascript 正方形网格的两个三角形未在三个js中渲染,javascript,three.js,Javascript,Three.js,作为三点js的初学者，我遇到了这个疑问。如果可以的话，请帮助我。 我试图画一个三角形和正方形并排，但问题发生在正方形网格中。只有第一次垂直推送发生，而不是第二次，它不会被渲染。我在这里做错什么了吗 <!DOCTYPE html> <html> <head> <script src="three.js" type="text/javascript"></script> <script src=
<!DOCTYPE html>
<html>
<head>
<script src="three.js" type="text/javascript"></script>
<script src="Detector.js" type="text/javascript"></script>
<script src="Projector.js" type="text/javascript"></script>
<script src="CanvasRenderer.js" type="text/javascript"></script>
</head>
<body>
<div id="myCanvas">
<script>
var scene;
var camera;
var renderer;
initializeScene();
renderScene();
function initializeScene()
{
if(Detector.webgl)
{
renderer=new THREE.WebGLRenderer({antialias:true});
}
else
{
renderer=new THREE.CanvasRenderer();
}
renderer.setClearColor(0x000000, 1);
canvasWidth=window.innerWidth;
canvasHeight=window.innerHeight;
renderer.setSize(canvasWidth,canvasHeight);
document.getElementById("myCanvas").appendChild(renderer.domElement);
scene=new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 100);
camera.position.set(0, 0, 10);
camera.lookAt(scene.position);
scene.add(camera);
var triangleGeometry=new THREE.Geometry();
triangleGeometry.vertices.push(new THREE.Vector3(0.0,1.0,0.0));
triangleGeometry.vertices.push(new THREE.Vector3(-1.0,-1.0,0.0));
triangleGeometry.vertices.push(new THREE.Vector3(1.0,-1.0,0.0));
triangleGeometry.faces.push(new THREE.Face3(0,1,2));
var triangleMaterial=new THREE.MeshBasicMaterial({
color:0xFFFFFF,
side:THREE.DoubleSide
});
var triangleMesh=new THREE.Mesh(triangleGeometry,triangleMaterial);
triangleMesh.position.set(-1.5,0.0,4.0);
scene.add(triangleMesh);
var squareGeometry=new THREE.Geometry();
squareGeometry.vertices.push(new THREE.Vector3(-1.0,1.0,0.0));
squareGeometry.vertices.push(new THREE.Vector3(1.0,1.0,0.0));
squareGeometry.vertices.push(new THREE.Vector3(1.0,-1.0,0.0));
squareGeometry.vertices.push(new THREE.Vector3(-1.0,1.0,0.0));
squareGeometry.faces.push(new THREE.Face3(0,1,2));
squareGeometry.faces.push(new THREE.Face3(0,2,3)); //Not working
var squareMaterial=new THREE.MeshBasicMaterial({
color:0xFFFFFF,
side:THREE.DoubleSide
});
var squareMesh=new THREE.Mesh(squareGeometry,squareMaterial);
squareMesh.position.set(1.5,0.0,4.0);
scene.add(squareMesh);
}
function renderScene()
{
renderer.render(scene,camera);
}
</script>
</div>
</body>
</html>
var场景；
var摄像机；
var渲染器；
初始化（）；
renderScene（）；
函数initializeScene（）
{
if（Detector.webgl）
{
renderer=new THREE.WebGLRenderer（{antialas:true}）；
}
其他的
{
renderer=new THREE.CanvasRenderer（）；
}
setClearColor（0x000000，1）；
画布宽度=window.innerWidth；
画布高度=window.innerHeight；
渲染器.setSize（画布宽度、画布高度）；
document.getElementById（“myCanvas”）.appendChild（renderer.doElement）；
场景=新的三个。场景（）；
摄像机=新的三个透视摄像机（45，画布宽度/画布高度，1100）；
摄像机位置设置（0,0,10）；
摄像机。注视（场景。位置）；
场景。添加（摄影机）；
var triangleGeometry=新的三点几何（）；
三角几何.顶点.推（新的三矢量3（0.0,1.0,0.0））；
三角几何.顶点.推（新的三矢量-1.0，-1.0,0.0））；
三角几何.顶点.推（新的三矢量3（1.0，-1.0,0.0））；
三角几何.面.推（新的三面3（0,1,2））；
var triangleMaterial=新的三网格基本材质({
颜色：0xFFFFFF，
侧面：三个。双面
});
var triangleMesh=新的三点网格（三角几何、三角材料）；
三角网格位置集（-1.5,0.0,4.0）；
场景。添加（三角形网格）；
var squareGeometry=新的三个.Geometry（）；
squareGeometry.Vertexs.push（新的三个向量（-1.0,1.0,0.0））；
squareGeometry.Vertexs.push（新的三个向量3（1.0,1.0,0.0））；
squareGeometry.Vertexs.push（新的三向量3（1.0，-1.0,0.0））；
squareGeometry.Vertexs.push（新的三个向量（-1.0,1.0,0.0））；
方形几何.面.推（新的三面3（0,1,2））；
squareGeometry.faces.push（新的三个面3（0,2,3））；//不工作
var squareMaterial=新的三网格基本材质({
颜色：0xFFFFFF，
侧面：三个。双面
});
var squareMesh=新的三网格（squareGeometry，squareMaterial）；
方形网格位置设置（1.5,0.0,4.0）；
场景。添加（方形网格）；
}
函数renderScene（）
{
渲染器。渲染（场景、摄影机）；
}
squareGeometry.vertices.push(new THREE.Vector3(-1.0,1.0,0.0)); // <--- same
squareGeometry.vertices.push(new THREE.Vector3(1.0,1.0,0.0)); // | as
squareGeometry.vertices.push(new THREE.Vector3(1.0,-1.0,0.0)); // | this
squareGeometry.vertices.push(new THREE.Vector3(-1.0,1.0,0.0)); // <--- point
你的代码运行良好。我在结果中看到了两个方面。很抱歉，请检查，但它仍然只显示一张脸，至少局部显示。小提琴在控制台上也显示了两个面。
squareGeometry.vertices.push(new THREE.Vector3(-1.0,-1.0,0.0));