console
// 1.创建场景
const scene = new THREE.Scene();
// 2.创建相机
const camera = new THREE.PerspectiveCamera(80, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 10, 100);
camera.lookAt(0, 0, 0);
scene.add(camera);
// 3.创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColor(0x000000);
// 4.自定义几何体过程
// 创建一个空几何体对象
var geometry = new THREE.BufferGeometry();
// 通过类型数组创建顶点位置数据
var vertices = new Float32Array([
//第一个面
0, 0, 0,
50, 0, 0,
0, 50, 0,
50, 0, 0,
0, 50, 0,
50, 50, 0,
//第二个面
0, 0, 0,
0, 50, 0,
0, 50, 50,
0, 50, 50,
0, 0, 0,
0, 0, 50,
//第三个面
50, 0, 0,
50, 50, 0,
50, 50, 50,
50, 0, 0,
50, 0, 50,
50, 50, 50,
//第四个面
0, 0, 0,
0, 0, 50,
50, 0, 0,
50, 0, 0,
50, 0, 50,
0, 0, 50,
//第五个面
0, 50, 0,
0, 50, 50,
50, 50, 0,
50, 50, 0,
50, 50, 50,
0, 50, 50,
//第六个面
0, 0, 50,
50, 0,50,
0, 50, 50,
50, 0, 50,
0, 50, 50,
50, 50, 50,
]);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组
// 设置几何体attributes属性的位置position属性
geometry.attributes.position = attribue
// 三角面(网格)渲染模式
var material = new THREE.MeshBasicMaterial({
color: 0xf56c6c, //三角面颜色
side: THREE.DoubleSide //两面可见
}); //材质对象
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh);
// 5. 鼠标交互
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// 6. 渲染
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="margin:0;">
</body>
</html>