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)