threejs (一) 创建一个场景

引入

npm install three
import * as THREE from 'three';

const scene = new THREE.Scene();

或者使用bootCDN复制对应的版本连接

<script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.156.1/three.js"></script>

基础知识

场景、相机、渲染器

• 通过THREE.Scene创建一个场景
• 通过THREE.PerspectiveCamera创建一个相机
• 通过THREE.WebGLRenderer创建一个渲染器，方便将物体渲染到场景中

展示一个立方体

const canvas = document.getElementById('c');
    const width = window.innerWidth;
    const height = window.innerHeight;

    canvas.width = width;
    canvas.height = height;

    // 创建3D场景
    const scene = new THREE.Scene();
    // 创建辅助坐标系
    const axesHelper = new THREE.AxesHelper();
    scene.add(axesHelper);
    // 创建立方体
    const box = new THREE.BoxGeometry(1, 1, 1);
    // 创建立方体的材质
    const material = new THREE.MeshBasicMaterial({
      color: 0x1890ff,
    });
    // 创建物体对象
    const mesh = new THREE.Mesh(box, material);

    scene.add(mesh);

    // 创建相机对象
    const aspect = width / height;
    const camera = new THREE.OrthographicCamera(
      -aspect,
      aspect,
      aspect,
      -aspect,
      0.01,
      100
    ); // 透视相机

    // 设置相机位置
    camera.position.set(1, 1, 3); // 相机默认的坐标是在(0,0,0);
    // 设置相机方向
    camera.lookAt(scene.position); // 将相机朝向场景
    // 将相机添加到场景中
    scene.add(camera);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer({
      canvas,
    });

    // 设置渲染器大小
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 执行渲染
    renderer.render(scene, camera);