1.react hook+typescript+three 3D场景环境搭建

1.引入three

npm i -s three

import * as THREE from 'three'
//typescript需要在.d.ts文件中添加 declare module 'three';

2.渲染器生成与dom绑定

定义渲染器

let width = 800, height = 600,    renderer: any = new THREE.WebGLRenderer({      antialias: true    }), // 创建一个渲染器（抗锯齿）

绑定dom

const threeRef: any = useRef(null)
const init = () => {    renderer = new THREE.WebGLRenderer({      antialias: true    });    renderer.setSize(width, height);    threeRef && threeRef.current.appendChild(renderer.domElement);    renderer.setClearColor(0x000000, 1.0);  }
//dom部分
<div>      <div id="d3"        ref={threeRef}></div></div>

使用useEffect执行初始化

useEffect(() => {    init()  })

3.新建场景，加入光源，摄像机，物体等，绑定渲染器

定义场景，光源，摄像机，辅助线

    scene: any = new THREE.Scene(), // 初始化场景    camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000),  // 创建摄像机    light = new THREE.AmbientLight(0xFFFFFF),//初始化光线    axesHelper = new THREE.AxesHelper(30),//辅助线

初始化场景，光源，摄像机，辅助线，并将光源，摄像机，辅助线放入场景

const initCamera = () => {    camera.position.set(10, 25, 25);    //camera.lookAt(new THREE.Vector3(0, 0, 0));    camera.lookAt(0, 0, 0)    scene.add( camera );  }  const initLight = () => {    let spotLight = new THREE.DirectionalLight(0xffffff);  //点光源    spotLight.position.set(20, 40, 30);    spotLight.intensity = 0.6;    scene.add(spotLight);  }  function initObject() {    var geometry = new THREE.BoxGeometry(10, 5, 7);    var material = new THREE.MeshPhongMaterial({ color: 0xFF0000 });    var mesh = new THREE.Mesh(geometry, material);    mesh.position.set(0, 0, 0);    scene.add(mesh);    scene.add(axesHelper);  }

最后绑定渲染器

renderer.render(scene, camera);

最终代码

import React, { useEffect, useRef } from 'react';import * as THREE from 'three'//react hookfunction Three() {  let width = 800, height = 600,    renderer: any = new THREE.WebGLRenderer({      antialias: true    }), // 创建一个渲染器（抗锯齿）    scene: any = new THREE.Scene(), // 初始化场景    camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000),  // 创建摄像机    light = new THREE.AmbientLight(0xFFFFFF),//初始化光线    axesHelper = new THREE.AxesHelper(30),//辅助线  const threeRef: any = useRef(null)  const initRenderer = () => {    renderer = new THREE.WebGLRenderer({      antialias: true    });    renderer.setSize(width, height);    threeRef && threeRef.current.appendChild(renderer.domElement);    renderer.setClearColor(0x000000, 1.0);  }  const initCamera = () => {    camera.position.set(10, 25, 25);    camera.lookAt(0, 0, 0)    scene.add( camera );  }  const initLight = () => {    let spotLight = new THREE.DirectionalLight(0xffffff);  //点光源    spotLight.position.set(20, 40, 30);    spotLight.intensity = 0.6;    scene.add(spotLight);  }  function initObject() {    var geometry = new THREE.BoxGeometry(10, 5, 7);    var material = new THREE.MeshPhongMaterial({ color: 0xFF0000 });    var mesh = new THREE.Mesh(geometry, material);    mesh.position.set(0, 0, 0);    scene.add(mesh);    scene.add(axesHelper);  }  useEffect(() => {    initRenderer()    initCamera()    initLight()    initObject()    renderer.render(scene, camera);  })  return (    <div>      <div id="d3"        ref={threeRef}></div>    </div>  );}export default Three