1.ThreeJS 初体验

简单立体图形的实现

前言：Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

安装使用

npm i three  // 安装依赖
import * as THREE from "three";  // 引入threeJs
//特别注意  控制器要单独引入 
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'   // 控制器

主要代码

methods: {
        init() {
            // 创建场景
            this.scene = new THREE.Scene()
            // 创建网格模型
            //创建一个方形盒子
            var geometry = new THREE.BoxGeometry(100, 100, 100)
            // 设置材质
            var metarial = new THREE.MeshLambertMaterial({
                color: "skyblue"
            })
            // 网格模型对象MESH
            var mesh = new THREE.Mesh(geometry, metarial)
            // 把模型添加到场景
            this.scene.add(mesh)

            // 光源设置
            // 点光源
            var point = new THREE.PointLight(0xffffff)
            point.position.set(400, 200, 300) //点光源位置
            this.scene.add(point)

            // 环境光
            var ambient = new THREE.AmbientLight(0x444444)
            this.scene.add(ambient)

            // 相机设置
            var w = window.innerWidth
            var h = window.innerHeight
            var k = w / h // 窗口可视化
            var s = 200 //三维场景中显示范围控制系数，系数越大，显示范围越大
            // 创建相机对象
            this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)
            this.camera.position.set(200, 300, 200) //点光源位置
            this.camera.lookAt(this.scene.position)


            // 创建渲染器对象
            this.renderer = new THREE.WebGLRenderer()
            this.renderer.setSize(container.offsetWidth, container.offsetHeight)//设置渲染区域大尺寸
            this.renderer.setClearColor("white", 1) // 设置背景颜色
            this.$refs.container.appendChild(this.renderer.domElement)


            // 调用渲染器
            this.render()

            // 缩放：滚动—鼠标中键
            // 旋转：拖动—鼠标左键
            // 平移：拖动—鼠标右键
            // 创建控件对象
            this.controls = new OrbitControls(this.camera, this.renderer.domElement);
            this.controls.addEventListener('change', this.render);//监听鼠标、键盘事件

        },

        render() {
            this.renderer.render(this.scene, this.camera)
            requestAnimationFrame(this.render);//请求再次执行渲染函数render
        },