三.js绘制简单三角形答案

【问题标题】：Three.js Draw simple triangle三.js绘制简单三角形
【发布时间】：2023-03-17 19:03:01
【问题描述】：

我正在尝试用three.js 绘制三角形：

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 100;
scene.add( camera );

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );

var geom = new THREE.Geometry();
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(30,0,0);
var v3 = new THREE.Vector3(30,30,0);

console.log(geom.vertices)
geom.vertices.push(new THREE.Vertex(v1));
geom.vertices.push(new THREE.Vertex(v2));
geom.vertices.push(new THREE.Vertex(v3));

geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
geom.computeFaceNormals();

var mesh= new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );
scene.add(mesh);

renderer.render( scene, camera );

但是屏幕上什么都没有。然而，这些例子是有效的： http://threejs.org/docs/58/#Manual/Introduction/Creating_a_scene https://github.com/tonylukasavage/jsstl（这里的三角形的创建方式与我尝试的方式相同）

你能帮我找出一个问题吗？谢谢，叶夫根尼亚

【问题讨论】：

您确定您使用的浏览器支持WebGL吗？我刚刚尝试将您的代码放入jsfiddle.net，它工作正常。
好点。试试 THREE.CanvasRenderer()。

标签： javascript three.js

【解决方案1】：

改为这样做：

geom.vertices.push( v1 );
geom.vertices.push( v2 );
geom.vertices.push( v3 );

您是从网上复制过时的代码，还是从过时的书中复制？从适用于当前版本库的 three.js 示例中学习。

three.js r.58

【讨论】：

或者那个geom.vertices.push( v1, v2, v3 );