three.js学习之基础绘制正方体

import * as THREE from "three";

const container = document.getElementById("myContainer");
// 创建渲染器
const myRender = new THREE.WebGLRenderer();

const renderWidth = 400;
const renderHeight = 320;
// 设置渲染区域
myRender.setSize(renderWidth, renderHeight);
// 设置清空颜色
myRender.setClearColor("white", 1);

container.append(myRender.domElement);

// 创建场景
const myScene = new THREE.Scene();
// 创建红色光源
const myLight = new THREE.PointLight("red");
// 设置光源位置
myLight.position.set(400, 800, 300);
// 在场景中添加光源
myScene.add(myLight);

// 窗口宽高比
const k = renderWidth / renderHeight;
// 三维场景显示范围控制系数
const s = 120;
// 创建相机
const myCamera = new THREE.OrthographicCamera(- s * k, s * k, s, -s, 1, 1000);
// 设置相机位置
myCamera.position.set(400, 300, 200);
// 设置相机观察的目标点
myCamera.lookAt(myScene.position);

// 创建立方体
const myGeometry = new THREE.BoxGeometry(100, 100, 100);
// 创建材质
const myMaterial = new THREE.MeshLambertMaterial({ color: 0xFFBF00 });
// 创建网格
const myMesh = new THREE.Mesh(myGeometry, myMaterial);
// 在场景中添加网格
myScene.add(myMesh);
// 渲染立方体
myRender.render(myScene, myCamera);