本文主要是介绍three.js聚光源SpotLight例子，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果：
说明：这里创建了SphereGeometry 球缓冲几何体，使用的材质是兰伯特网格材质MeshLambertMaterial，并对球缓冲几何体使用了纹理贴图效果，添加了聚光源，全部代码如下：
<template><div><el-container><el-main><div class="box-card-left"><div id="threejs" style="border: 1px solid red"></div><div class="box-right"></div></div></el-main></el-container></div>
</template>
<script>
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
export default {data() {return {name: "",scene: null,camera: null,renderer: null,mesh: null,geometry: null,group: null,material: null,texture: null,};},created() {},mounted() {this.name = this.$route.query.name;this.init();},methods: {goBack() {this.$router.go(-1);},init() {/*** 光源分类：* 平行光 DirectionalLight,* DirectionalLight( color : Color, intensity : Float )color -（可选）一个表示颜色的 Color 的实例、字符串或数字，默认为一个白色（0xffffff）的 Color 对象。intensity -（可选）光照的强度。默认值为 1。* 点光源 PointLight,PointLight( color : Color, intensity : Float, distance : Number, decay : Float )color -（可选）一个表示颜色的 Color 的实例、字符串或数字，默认为一个白色（0xffffff）的 Color 对象。intensity -（可选）光照强度。默认值为 1。distance - 光源照射的最大距离。默认值为 0（无限远）。decay - 沿着光照距离的衰退量。默认值为 2。* 环境光 AmbientLight ,AmbientLight( color : Color, intensity : Float )color -（可选）一个表示颜色的 Color 的实例、字符串或数字，默认为一个白色（0xffffff）的 Color 对象。intensity -（可选）光照的强度。默认值为 1。* 聚光源 SpotLightSpotLight( color : Color, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )color -（可选）一个表示颜色的 Color 的实例、字符串或数字，默认为一个白色（0xffffff）的 Color 对象。intensity -（可选）光照强度。默认值为 1。distance - 光源照射的最大距离。默认值为 0（无限远）。angle - 光线照射范围的角度。默认值为 Math.PI/3。penumbra - 聚光锥的半影衰减百分比。默认值为 0。decay - 沿着光照距离的衰减量。默认值为 2。* */// 1，创建场景对象this.scene = new this.$three.Scene();// 2,创建球缓冲几何体对象this.geometry = new this.$three.SphereGeometry(40,32,16);// 5,创建辅助坐标轴对象const axesHelper = new this.$three.AxesHelper(100);this.scene.add(axesHelper);// 创建纹理贴图加载器对象const textureLoader = new this.$three.TextureLoader();textureLoader.load(require("../../assets/earth.png"), e => {// 3,创建网格材质对象this.material = new this.$three.MeshLambertMaterial({// color: 0xfff000,map: e});// 4，创建网格对象this.mesh = new this.$three.Mesh(this.geometry, this.material);this.scene.add(this.mesh);// 创建聚光源对象const spotLight = new this.$three.SpotLight(0xffffff, 1);// 设置聚光源位置spotLight.position.set(100, 80, 20);// 设置聚光源指向的目标位置spotLight.target = this.mesh;this.scene.add(spotLight);// 创建聚光源辅助对象const spotLightHelper = new this.$three.SpotLightHelper(spotLight,0xffffff);this.scene.add(spotLightHelper);// 6,创建透视投影相机对象this.camera = new this.$three.PerspectiveCamera(60, 1, 0.01,1000);this.camera.position.set(200,150,200);// 相机看向的是模型的位置this.camera.lookAt(this.mesh.position);// 7,创建渲染器对象this.renderer = new this.$three.WebGLRenderer();this.renderer.setSize(1200,1000);this.renderer.render(this.scene, this.camera);document.getElementById("threejs").appendChild(this.renderer.domElement);this.renderFun();// 创建相机空间轨道控制器对象const controls = new OrbitControls(this.camera, this.renderer.domElement);controls.addEventListener("change", () => {this.renderer.render(this.scene, this.camera);})})},renderFun() {this.mesh.rotateY(0.01);this.renderer.render(this.scene, this.camera);window.requestAnimationFrame(this.renderFun);}},
};
</script>
//
<style lang="less" scoped>
.msg {padding: 20px;text-align: left;display: flex;justify-content: flex-start;flex-wrap: wrap;.span {margin: 0 30px 30px 0;// white-space: nowrap;}.p {text-align: left;}
}
.box-card-left {display: flex;align-items: flex-start;flex-direction: row;width: 100%;.box-right {text-align: left;padding: 10px;.xyz {width: 100px;margin-left: 20px;}.box-btn {margin-left: 20px;}}
}
</style>
对于：this.$three 是这样配置的；
// 1，npm安装threejs插件：
npm install three --save// 2，在main.js文件中加入：
// 引入 three.js
import * as THREE from 'three';
Vue.prototype.$three = THREE;这篇关于three.js聚光源SpotLight例子的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
