threejs入门

安装

npm install three@0.137.5

开发 

项目使用了Vue3开发，页面模版

<template>
  <div class="container" ref="container"></div>
</template>

下面我们初始化一个场景和相机，并且添加一个简单的几何图形，然后渲染到DIV容器中

    const containerW = containerDom.value.clientWidth;
    const containerH = containerDom.value.clientHeight;
    // 1. 创建场景
    const scene = new THREE.Scene();
    // 2. 创建相机
    const camera = new THREE.PerspectiveCamera(75, containerW / containerH, 0.1, 1000);
    // 3. 设置相机位置
    camera.position.set(0, 0, 10);
    // 4. 相机添加到场景
    scene.add(camera);
    // 1. 创建几何体
    const cubeGeometery = new THREE.BoxGeometry(1, 1, 1);
    // 2. 创建材质
    const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
    // 3. 根据几何体和材质创建物体
    const cube = new THREE.Mesh(cubeGeometery, cubeMaterial);
    // 4. 将几何体添加到场景
    scene.add(cube);
    // 1. 初始化渲染器
    const renderer = new THREE.WebGLRenderer();
    // 2. 设置渲染的尺寸和大小
    renderer.setSize(containerW, containerH);
    // 3. 将webgl渲染的canvas内容添加到dom中
    containerDom.value.append(renderer.domElement);
    // 4. 使用渲染器将相机和场景渲染进来
    renderer.render(scene, camera);

至此使用threejs开发第一个入门级别的场景

核心

场景，相机，几何物体，渲染器

轨道控制器

使用控制器查看3D物体

引入轨道控制器

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

代码改动

    // 创建轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement);

    // 鼠标移动控制器需要重新渲染页面，才能实现观看3D集合物体
    function render() {
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }
    render();

坐标辅助器

我们给场景添加坐标辅助器更好的开发

红色X轴，绿色Y轴，蓝色Z轴

    // 添加坐标辅助器
    const axesHelper = new THREE.AxesHelper(5);
    // 辅助器添加到场景中
    scene.add(axesHelper);