threejs渲染基础的3D场景

// 创建一个场景对象
let scene = new THREE.Scene();  

// 创建一个相机对象
let camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;  

// 创建一个渲染器对象
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);  

// 创建立方体几何体和平面几何体
let geometryCube = new THREE.BoxGeometry(1, 1, 1); // 立方体几何体
let geometryPlane = new THREE.PlaneGeometry(10, 10); // 平面几何体  

// 创建材质对象，并分别应用于立方体和平面
let materialCube = new THREE.MeshBasicMaterial({color: 0x00ff00}); // 绿色
let materialPlane = new THREE.MeshBasicMaterial({color: 0xff0000}); // 红色  

// 创建网格对象，将几何体和材质相结合
let cube = new THREE.Mesh(geometryCube, materialCube);
let plane = new THREE.Mesh(geometryPlane, materialPlane);  

// 将立方体和平面添加到场景中
scene.add(cube);
scene.add(plane);  

// 设置渲染循环
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01; // 让立方体绕自身X轴旋转
  cube.rotation.y += 0.01; // 让立方体绕自身Y轴旋转
  renderer.render(scene, camera); // 渲染场景和相机
}
animate(); // 开始渲染循环

three.js中如何创建一个简单的3D场景？ - 掘金 (juejin.cn)