three.js---一个基础的demo

在学习three.js过程中，不难发现，每新开发一个3D场景都会从创建场景（scene)、创建物体、创建相机这三个基础的方法开始，从而在其身上衍生出其他的一些API，为了方便日后的开发，特此记录一个简单基础的demo,在之后的开发中可直接使用。

<template>
    <div id="my-three"></div>
</template>
    
<script setup lang="ts">
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { getCurrentInstance, onMounted, ref } from 'vue';
let { proxy } = getCurrentInstance() as any;
let THREE = proxy.$THREE;

const scene = new THREE.Scene();//创建场景
const geometry = new THREE.BoxGeometry(30, 30, 30);//创建物体
const material = new THREE.MeshLambertMaterial({
    color: 'pink',
    transparent: true,
    opacity: 0.5
});//创建材质
const mesh = new THREE.Mesh(geometry, material);//创建一个网格模型对象
scene.add(mesh);//网格模型添加到场景中
const ambient = new THREE.AmbientLight(0xffffff, 0.4);//添加光源
const light = new THREE.PointLight(0xffffff, 1);//点光源，color:灯光颜色，intensity:光照强度
scene.add(ambient);
light.position.set(200, 300, 400);
scene.add(light);
//创建一个透视相机，窗口宽度，窗口高度
const width = window.innerWidth, height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 3000)
camera.position.set(300, 300, 300);//设置相机位置
camera.lookAt(0, 0, 0);//设置相机方向
const axesHelper = new THREE.AxesHelper(300);//创建辅助坐标轴，坐标系大小可以根据场景大小去设置
scene.add(axesHelper)
const renderer = new THREE.WebGLRenderer();//创建一个WebGL渲染器
renderer.setSize(width, height);//设置渲染区尺寸
renderer.render(scene, camera)//执行渲染操作、指定场景、相机作为参数
const controls = new OrbitControls(camera, renderer.domElement)//创建控件对象
controls.addEventListener('change', () => {
    renderer.render(scene, camera)//监听鼠标，键盘事件
})
onMounted(() => {
    document.getElementById('my-three')?.appendChild(renderer.domElement)
})
</script>
    
<style scoped lang="less">

</style>
    

在这里的demo是建立在vue3+ts的基础上，如有使用vue2的童鞋可以自行参照做适当的改变！