Javascript 用Three.js绘制一个基本三角形
我是triyng学习three.js我想画一个基本三角形,但是我的代码不起作用Javascript 用Three.js绘制一个基本三角形,javascript,three.js,Javascript,Three.js,我是triyng学习three.js我想画一个基本三角形,但是我的代码不起作用 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 70, window.innerWidth/window.innerHeight, 0.1, 1000 ); camera.position.z = 10; var renderer = new THREE.WebGLRenderer(); renderer.setSi
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 10;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.Geometry();
geometry.vertices= [new THREE.Vector3(2,1,0), new THREE.Vector3(1,3,0), new THREE.Vector3(3,4,0)];
geometry.faces = [new THREE.Face3(0,1,2)];
var mesh= new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({ color: 0xffff00 }) );
scene.add(mesh);
renderer.render(scene, camera);
我哪里做错了?您必须注意将顶点添加到面的顺序。如果顺序遵循顺时针顺序,则曲面的法向量将指向下方,并且由于您的相机从上方观看,因此您将看不到三角形。如果顺序为逆时针,法线将指向您的相机 您可以更改
geometry.faces=[new THREE.Face3(0,1,2)]代码>到geometry.faces=[新的三个面3(1,0,2)]代码>和它将工作
另一个选项是使用side:THREE.DoubleSide
指定材质,以便将其应用于面的两侧:new THREE.MeshBasicMaterial({color:0xFFFFFF00,side:THREE.DoubleSide}
是一个可工作的代码笔。带有面
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);
var triangle = new THREE.Triangle(v1, v2, v3);
var normal = triangle.normal();
geom.vertices.push(triangle.a);
geom.vertices.push(triangle.b);
geom.vertices.push(triangle.c);
geom.faces.push(new THREE.Face3(0, 1, 2, normal));
var mesh = new THREE.Mesh(geom, new THREE.MeshNormalMaterial());
scene.add(mesh);
只需概述一下
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-30, 2, 2));
geometry.vertices.push(new THREE.Vector3(2, 30, 2));
geometry.vertices.push(new THREE.Vector3(30, 2, 2));
geometry.vertices.push(new THREE.Vector3(-30, 2, 2));
var line = new THREE.Line(
geometry,
new THREE.LineBasicMaterial({ color: 0x00ff00 })
);
scene.add(line);