three.js

npm install three
// npm安装轨道控件插件
npm install three-orbit-controls
// 安装加载.obj和.mtl文件的插件
npm i --save three-obj-mtl-loader
// 渲染器插件
npm i --save three-css2drender
// 在页面中引入three.js并使用，在所调用页面引用
import * as Three from 'three'

<template>
    <div id="container"></div>
</template>
<script>
import * as Three from "three";  // 加载three.js
export default {
    data() {
        return {
            camera: null,
            scene: null,
            renderer: null,
            mesh: null
        }
    },
    mounted() {
        this.init()
        this.animate()
    },
    methods: {
        init() {
            // https://threejs.org/manual/#zh/fundamentals
            let container = document.getElementById('container')
            this.camera = new Three.PerspectiveCamera(  // 透视摄像机-参数：fov视野范围；aspect画布的宽高比；near近平面；far远平面；
                70,
                container.clientWidth / container.clientHeight,
                0.01,
                1000
            )
            this.camera.position.z = 0.6 // 摄像机默认指向z轴负方向，上方向朝向y轴正方向，立方体在坐标原点（我理解为缩放比例）
            this.scene = new Three.Scene() // 创建一个场景，需要绘制得内容加到scene中
            let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2)  // 创建一个包含盒子信息得立方几何体，在three.js中显示的物体都需要一个包含了组成三维物体的顶点信息的几何体-参数：boxWidth盒子宽度；boxHeight盒子高度；boxDepth盒子深度；
            let material = new Three.MeshNormalMaterial()
            // let material = new Three.MeshBasicMaterial({color: 0x44aa88})  // 创建一个基本的材质并设置它的颜色，颜色值可以用css方式或者十六进制
            this.mesh = new Three.Mesh(geometry, material)  // 创建一个网格，包含：几何体(Geometry)、材质(Material)
            this.scene.add(this.mesh)  // 将网格添加到场景中

            const light = new Three.DirectionalLight(0xFFFFFF, 1)  // 关照效果
            light.position.set(-1, 2, 4)
            this.scene.add(light)

            this.renderer = new Three.WebGLRenderer({antialias: true})  // 创建一个渲染器
            this.renderer.setSize(container.clientWidth, container.clientHeight)
            container.appendChild(this.renderer.domElement)  // 将场景和摄像机传递给渲染器来渲染出整个场景

        },
        animate() {
            requestAnimationFrame(this.animate)  // 渲染循环函数-页面开始加载到函数运行所经历的时间当作入参传入回调函数，单位毫秒
            this.mesh.rotation.x += 0.01
            this.mesh.rotation.y += 0.02
            this.renderer.render(this.scene, this.camera)
        }
    }
}
</script>
<style lang="less" scoped>
#container {
    width: 100px;
    height: 200px;
}
</style>

<template>
    <canvas id="c"></canvas>
</template>
<script>
import * as Three from "three";  // 加载three.js
export default {
    data() {
        return {
            camera: null,
            scene: null,
            renderer: null,
            mesh: null,
            cubes: []
        }
    },
    mounted() {
        this.init()
        this.render(0.1)
    },
    methods: {
        init() {
            // https://threejs.org/manual/#zh/fundamentals
            const canvas = document.querySelector('#c');
            this.renderer = new Three.WebGLRenderer({canvas})  // 渲染器

            this.camera = new Three.PerspectiveCamera(75, 2, 0.1, 5)  // 透视摄像机-参数：fov视野范围；aspect画布的宽高比；near近平面；far远平面；
            this.camera.position.z = 2

            this.scene = new Three.Scene()  // 场景

            const light = new Three.DirectionalLight(0xFFFFFF, 1)  // 光照效果
            light.position.set(-1, 2, 4)

            this.scene.add(light)
            const geometry = new Three.BoxGeometry(1, 1, 1)  // 包含盒子得立方几何体
            this.cubes.push(this.makeInstance(geometry, 0x44aa88,  0))
            this.cubes.push(this.makeInstance(geometry, 0x8844aa, -2))
            this.cubes.push(this.makeInstance(geometry, 0xaa8844,  2))

        },
        render(time) {
            time *= 0.001;  //毫秒变秒
            this.cubes.forEach((cube, ndx) => {
                const speed = 1 + ndx * .1
                const rot = time * speed
                cube.rotation.x = rot
                cube.rotation.y = rot
            })
            this.renderer.render(this.scene, this.camera)
            requestAnimationFrame(this.render)

        },
        makeInstance(geometry, color, x) {
            const material = new Three.MeshPhongMaterial({color})  // 设置材质颜色
            const cube = new Three.Mesh(geometry, material)  // 网格
            this.scene.add(cube)
            cube.position.x = x
            return cube
        }
    }
}
</script>
<style lang="less" scoped>
#container {
    width: 400px;
    height: 200px;
}
</style>