一、引入three基础组件

    import * as THREE from 'three' //引入three，在<script>标签下引入

  引入three是使用Scene、Color、Fog、WebGLRenderer、PerspectiveCamera、Group、HemisphereLight、DirectionalLight、Vector2、PlaneGeometry、MeshPhongMaterial、Mesh的前提。代码中的THREE就是将three这个组件命名为THREE，在你需要使用这个组件中的内容时如下面的代码所示：

    const scene = new THREE.Scene()
    scene.fog = new THREE.Fog('#eee', 20, 100)
    const renderer = new THREE.WebGLRenderer({canvas,antialias: true})

二、引入轨道控制器

    import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'//引入轨道控制器

  轨道控制器的作用是使你可以用鼠标对场景进行操作，比如旋转场景，移动场景，对场景进行缩放。要注意的是要使轨道控制器有效必须持续不断的渲染场景，那么为什么要循环渲染场景呢？camera意思是相机，它的作用和名字匹配就是拍照，你可以理解为渲染一次场景就是拍一张照片。如果你不循环渲染场景，即使你旋转场景，但是你没有对旋转后的场景进行拍照，网页上展示的仍然是旧的照片。这就是循环渲染场景的必要性！

    const controls = new OrbitControls(camera, renderer.domElement)//定义一个轨道控制器
    controls.enableDamping = true//打开惯性，使旋转平滑!

OrbitControls详细内容介绍

  我采用了动画的方式来渲染，代码如下：

    function animate() {
    controls.update()
    renderer.render(scene, camera)
    requestAnimationFrame(animate)
    if (resizeRendererToDisplaySize(renderer)) {//高清显示
        let canvas = renderer.domElement
            camera.aspect = canvas.clientWidth / canvas.clientHeight
        camera.updateProjectionMatrix()
    }
    }
    animate()//调用animate

Animate详细内容

三、渲染器

  在第二节“轨道控制器”可以看到使用了renderer，render（scene，camera），在animate中通过调用这个方法就实现了与3D网页的交互，而不是对着一张3D的照片。在第一节“引入three基础组件”中的代码中可以看到渲染器的声明方式。我使用到的有关渲染器的代码如下：

    renderer.shadowMap.enabled//开启阴影渲染
    function animate() {
    controls.update()
    renderer.render(scene, camera)//渲染
    requestAnimationFrame(animate)
        if (resizeRendererToDisplaySize(renderer)) {
        let canvas = renderer.domElement//
        camera.aspect = canvas.clientWidth / canvas.clientHeight
        camera.updateProjectionMatrix()
    }
    }
    animate()

    function resizeRendererToDisplaySize(renderer) {
    let canvas = renderer.domElement//dom
    var width = window.innerWidth
    var height = window.innerHeight
    var canvasPixelWidth = canvas.width / window.devicePixelRatio
    var canvasPixelHeight = canvas.height / window.devicePixelRatio
    let needResize =canvasPixelWidth !== width || canvasPixelHeight !== height
    if (needResize) {
        renderer.setSize(width, height, false)//设置大小
    }
    return needResize
    }

WebGLRenderer详细内容
WebGLRenderer方法详细内容

四、完整代码

完整代码见文章底部

五、成果展示