THREE--demo13（动画二）

效果

源码

import {
    useEffect, useRef } from 'react'
import * as T from 'three'
import {
    OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const Demo13 = () => {
   
    let scene, camera, renderer, orbitControls, axes, curve, mixer

    var clock = new T.Clock()

    useEffect(() => {
   
        init()
    }, [])

    const ThreeContainer = useRef()

    // 场景，作为容器，保存并跟踪所有渲染的物体
    const initScene = () => {
   
        scene = new T.Scene()
    }

    // 相机
    const initCamera = () => {
   
        // 透视相机，参数：视场，长宽比，近面，远面
        camera = new T.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
        camera.position.z = 150
        camera.lookAt(scene.position)
    }

    // 渲染器，计算指定相机角度下，浏览器中scene的样子
    const initRenderer = () => {
   
        renderer = new T.WebGLRenderer()
        renderer.setClearColor(0xeeeeee