ThreeJs

96 阅读1分钟

创建场景和物体

imoort * as THREE from "three";

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

//2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,//角度
  window.innerWidth / window.innerHeight,//宽高比
  0.1, //摄像机最近距离
  1000 //摄像机最远距离
)

//将摄像机放在场景中的某个位置,x,y,坐标
camera.position.set(0, 0, 10);
scene.add(camera);

//添加物体
//创建几何体(长宽高)
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
//创建一个材质(比如网格材质)
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
//把材料填充到几何体中
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
//将集合体添加到场景中
scene.add(cube);

//初始化渲染器
const renderer = new THREE.WebGLRenderer();
//设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


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