three入门

安装

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);

React完整代码

import { useState, useEffect } from 'react';
import './App.css';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

let scene, camera, renderer;
function App() {
  useEffect(() => {
    if (renderer) {
      return;
    }
    const dom = document.getElementById('container');
    const width = dom.clientWidth;
    const height = dom.clientHeight;
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45, width / height, 1, 2000);
    camera.position.set(0, 0, 200);
    camera.lookAt(0, 0, 0);
    scene.add(camera);

    const geometry = new THREE.BoxGeometry(10, 100, 10);
    const material = new THREE.MeshLambertMaterial({
      color: 0x00ffff,
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    const point = new THREE.PointLight(0xffffff);
    point.lookAt(0, 0, 0);
    point.position.set(30, 40, 30);
    scene.add(point);
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
    scene.add(ambientLight);
    renderer = new THREE.WebGLRenderer({
      antialias: true,
    });
    renderer.setSize(width, height);
    const controls = new OrbitControls(camera, renderer.domElement);

    const axesHelper = new THREE.AxesHelper(100);
    scene.add(axesHelper);
    dom.append(renderer.domElement);
    const clock = new THREE.Clock();
    function render() {
      controls.update(clock.getDelta());
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }

    render();
  }, []);
  return (
    <>
      <div id='container'></div>
    </>
  );
}

export default App;

Vue完整代码

<template>
  <div class="container" ref="container"></div>
</template>
<script setup>
import { nextTick, onMounted, useTemplateRef, watchEffect } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

const containerDom = useTemplateRef("container");

onMounted(() => {
  nextTick(() => {
    const width = containerDom.value.clientWidth;
    const height = containerDom.value.clientHeight;

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
    camera.lookAt(0, 0, 0);
    camera.position.set(0, 0, 100);
    scene.add(camera);

    const geometry = new THREE.BoxGeometry(10, 10, 10);
    const material = new THREE.MeshLambertMaterial({ color: 0x00ffff });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    const point = new THREE.PointLight(0xffffff);
    point.position.set(400, 500, 400);
    scene.add(point);
    const pointHelper = new THREE.PointLightHelper(point, 20);
    scene.add(pointHelper);
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);
    const renderer = new THREE.WebGLRenderer({
      antialias: true,
    });
    renderer.setSize(width, height);
    containerDom.value.append(renderer.domElement);

    const axesHelper = new THREE.AxesHelper(100);
    scene.add(axesHelper);

    const controls = new OrbitControls(camera, renderer.domElement);
    const clock = new THREE.Clock();

    function render() {
      controls.update(clock.getDelta());
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }
    render();
  });
});
</script>
<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: skyblue;
}
</style>