首先,确保您使用的是最新版本的 three.js 库。
为了使几何图形起作用,您需要确保设置了一些东西。您需要有渲染器、相机、场景和几何体。
根据Geometry的文档,您需要提供一种方法来处理之后的几何图形,例如computeCentroids()
和computeBoundingBox()
。
这里不需要返回值。它实际上会阻止您的对象出现。这是基于您的代码的功能齐全的代码。只需确保您的 three.js 引用是正确的:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom Geometry</title>
</head>
<body>
<script src="three.min.js"></script>
<script>
var container,
camera,
scene,
renderer,
geom;
init();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
//renderer
renderer = new THREE.CanvasRenderer(); //Use CanvasRenderer with simple geometry
renderer.setSize(window.innerWidth, window.innerHeight);
//scene
scene = new THREE.Scene();
//camera
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 500;
//Your custom geometry here
makePlane(200, 300);
container.appendChild(renderer.domElement);
renderer.render(scene, camera);
}
function makePlane(width, height) {
var material = new THREE.MeshBasicMaterial({ color: 0x297bbb });
geom = new THREE.Geometry()
geom.vertices.push(new THREE.Vector3(0, 0, 0));
geom.vertices.push(new THREE.Vector3(width, 0, 0));
geom.vertices.push(new THREE.Vector3(width, height, 0));
geom.faces.push(new THREE.Face3(0, 1, 2));
//return geom; //you don't need this
geom.computeBoundingSphere(); //<--add what you need here
geoMesh = new THREE.Mesh(geom, material); //added custom geometry to a mesh with a material
geoMesh.position.y = -50;
scene.add(geoMesh);
};
</script>
</body>
</html>