一个简单的立方体

import { WebGLRenderer , Scene, PointLight, OrthographicCamera, BoxGeometry, MeshLambertMaterial, Mesh } from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 导入轨道控制器
import { onMounted, ref, unref } from "vue";

const container = ref<HTMLDivElement>() // 容器

// 创建一个渲染器  
const renderer = new WebGLRenderer()

const width = 480
const height = 320
renderer.setSize(width, height)
renderer.setClearColor("white", 1) // 将整个画布设置成纯白色

onMounted(() => {
    unref(container)?.append(renderer.domElement)

    // 创建场景
    const scene = new Scene() 

    // 设置灯光
    const light = new PointLight("red")
    light.position.set(400, 800, 100)
    scene.add(light)


    // 设置相机
    const rate = width / height
    const s = 120;

    const camera = new OrthographicCamera(-s * rate,
        s * rate, s, -s, 1, 1000)
    camera.position.set(400, 800, 300);
    camera.lookAt(scene.position)

    // 创建一个立方体，并绑定材质
    const boxGeometry = new BoxGeometry(100, 100, 100)
    const meshLambertMaterial = new MeshLambertMaterial({ color: 0xFFBF00 })
    const mesh = new Mesh(boxGeometry, meshLambertMaterial)

    scene.add(mesh)

    // 创建轨道控制器
    new OrbitControls(camera, renderer.domElement);

    function render() {
        renderer.render(scene, camera); //执行渲染操作
        requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
    }

    render();
})