第二节 threejs简单案例

1. 创建3D场景

// 创建3D场景对象Scene
const scene = new THREE.Scene();

// 更改场景背景颜色
scene.background = new THREE.Color('#F5F5F5');
1
2
3
4
5

2. 创建透视投影相机

// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera();
1
2

相机位置

// 根据需要设置相机位置具体值
camera.position.set(200, 200, 200); 
1
2

相机观察目标

//相机观察目标指向Threejs 3D空间中某个位置
camera.lookAt(0, 0, 0); //坐标原点
1
2

3. 创建渲染器

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
1
2

设置canvas画布尺寸

// 定义threejs输出画布的尺寸(单位:像素px)
const width = 800; //宽度
const height = 500; //高度
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)

1
2
3
4
5

renderer.render(scene, camera); //执行渲染操作
1

onMounted(()=>{
  document.getElementById('webgl').appendChild(renderer.domElement);
})
1
2
3