3. 使用three.js渲染第一个场景和物体

在 three.js 中，相机、场景、物体和渲染器是必不可少的。

这篇文章的目的是了解 three.js 最基本的内容。

创建场景：

const scene = new THREE.Scene();

创建相机（在这里先创建一个透视相机），需要设置宽高比，角度，最近距离和最远距离，也就是视锥体，在这个范围之外的物体都是看不到的：

const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

设置相机位置：

camera.position.set(0, 0, 10);

将相机添加到场景中：

scene.add(camera);

创建物体：

// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1,1,1);
const cubeMaterial = new THREE.MeshBasicMaterial({color:0x00ffff});
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将几何体添加到场景中
scene.add(cube);

初始化渲染器：

const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

使用渲染器，通过相机将场景渲染进来：

renderer.render(scene,camera);

最后就出来结果：

基于第2篇笔记，完整的代码如下：

import * as THREE from "three";


// console.log(THREE);

// 1.创建场景
const scene = new THREE.Scene(); 

// 2.创建相机
const camera = new THREE.PerspectiveCamera(75, 
    window.innerWidth/window.innerHeight, 
    0.1, 
    1000);

camera.position.set(0, 0, 10);
scene.add(camera);

// 3.添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1,1,1);
const cubeMaterial = new THREE.MeshBasicMaterial({color:0x00ffff});
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将几何体添加到场景中
scene.add(cube);

// 4.初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// 使用渲染器，通过相机将场景渲染进来
renderer.render(scene,camera);