基于VUE-CLI框架开发THREE.JS从入门开始（4）简单的光照效果

基于VUE-CLI框架开发THREE.JS从入门开始（4）

开发环境

开发工具

webstorm编辑器
node.js

前台框架

vue-cli 框架

webstorm可以直接安装

引用脚本

webgl封装库three.js 项目路径下安装（编辑器内右键点击项目根文件夹，选择Open in Terminal） ：

npm install three

我直接放到vue对象内了，代码如下

import Vue from 'vue'
import App from './App.vue'
import * as THREE from 'three'
//引用three
Vue.config.productionTip = false
Vue.prototype.THREE = THREE
//将three加入到vue对象内
new Vue({
  render: h => h(App),
}).$mount('#app')

基本概念

[关于渲染器](https://threejs.org/docs/index.html#api/zh/renderers/WebGLRenderer)
[关于光照](https://threejs.org/docs/index.html#api/zh/lights/Light)
[关于材质](https://threejs.org/docs/index.html#api/zh/materials/Material)

代码

<template>
    <div></div>
</template>
<script>
    export default {
        name: "ThreeTest3",
        mounted(){
            //创建场景
            let scene = new this.THREE.Scene();

            let renderer = new this.THREE.WebGLRenderer({antialias: true});
            //设置渲染器的尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);
            //将渲染器放置到页面当中
            document.body.appendChild(renderer.domElement);

            //创建相机，设置位置
            let camera = new this.THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
            //设置相机的位置
            camera.position.set(0, 0, 3);


            //创建一个平行光光源照射到物体上
            let light = new this.THREE.DirectionalLight(0xffffff, 1.5);
            //设置平型光照射方向，照射方向为设置的点照射到原点
            light.position.set(0, 0, 1);
            //将灯光放到场景当中
            scene.add(light);


            //创建一个接受光照并带有纹理映射的立方体，并添加到场景中
            //首先，获取到纹理
            let map = this.THREE.ImageUtils.loadTexture("./image/zbl.png");

            //然后创建一个phong材质来处理着色，并传递给纹理映射
            let material = new this.THREE.MeshPhongMaterial({map: map});

            //创建一个立方体的几何体
            let geometry = new this.THREE.CubeGeometry(1, 1, 1);

            //将集合体和材质放到一个网格中
            let cube = new this.THREE.Mesh(geometry, material);

            //将立方体网格添加到场景中
            scene.add(cube);

            //声明一个判断是否旋转的变量
            let rotationBool = true;

            (function animate() {
                renderer.render(scene, camera);

                if (rotationBool) {
                    cube.rotation.x += 0.02;
                    cube.rotation.y += 0.02;
                }

                requestAnimationFrame(animate);
            })();

            document.body.onclick = function () {
                rotationBool = !rotationBool;
            }
        }
    }
</script>

<style scoped>

</style>

有问题欢迎大家提问，共同学习。bye bye