【无标题】

Three.js学习

创建简单场景

//引入threejs主体
import * as THREE from "three";
//创建场景
let scene = new THREE.Scene();
//创建相机
/*
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面
*/
let camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
//相机位置设置
camera.position.set(0,0,10);
scene.add(camera);
//创建box
let boxsize=new THREE.BoxGeometry(1,1,1); //尺寸
let boxColor=new THREE.MeshBasicMaterial({color:0xFFFF00}); //材质
let box=new THREE.Mesh(boxsize,boxColor);  //生成box
scene.add(box);
//设置渲染器
let renderer=new THREE.WebGL1Renderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene,camera);