three.js代码

<template>
	<div id='container'>

	</div>
</template>
<script>
	import * as THREE from 'three';
	//引入性能监视器stats.js
	import Stats from 'three/addons/libs/stats.module.js';
	// 引入轨道控制器扩展库OrbitControls.js
	import {
		OrbitControls
	} from 'three/examples/jsm/controls/OrbitControls.js'
	// 引入gui.js库
	import {
		GUI
	} from 'three/examples/jsm/libs/lil-gui.module.min.js'

	export default {
		name: '',
		data() {
			return {

			};
		},
		components: {},
		methods: {
			init() {
				var that = this
				// 实例化一个gui对象
				const gui = new GUI()
				this.scene = new THREE.Scene();
				// AxesHelper：辅助观察的坐标系
				const axesHelper = new THREE.AxesHelper(150);
				this.scene.add(axesHelper);
				/**
				 * 创建网格模型
				 */
				let geometry = new THREE.BoxGeometry(60, 40, 40); //创建一个球体几何对象
				// let geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
				let material = new THREE.MeshLambertMaterial({
					color: 0x0000ff, //设置材质颜色
					transparent: true, //开启透明
					opacity: 0.5, //设置透明度
				}); //材质对象Material 可以自定义颜色

				this.mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
				this.mesh.position.set(100, 0, 0);
				this.scene.add(this.mesh); //网格模型添加到场景中
				gui.add(this.mesh.position, 'x', 0, 100)
				gui.add(this.mesh.position, 'y', 0, 20)
				gui.add(this.mesh.position, 'z', 0, 20)
				const obj = {
					color: 0x0000ff,
				};
				// .addColor()生成颜色值改变的交互界面
				gui.addColor(obj, 'color').onChange(function(value) {
					that.mesh.material.color.set(value);
				});
				/**
				 * 光源设置
				 */
				//点光源
				let point = new THREE.PointLight(0xff0fff);
				point.position.set(400, 200, 300); //点光源位置
				this.scene.add(point); //点光源添加到场景中
				//环境光
				let ambient = new THREE.AmbientLight(0x444444);
				this.scene.add(ambient);
				// console.log(scene)
				// console.log(scene.children)
				/**
				 * 相机设置
				 */
				let container = document.getElementById('container');
				let width = window.innerWidth; //窗口宽度
				let height = window.innerHeight; //窗口高度
				let k = width / height; //窗口宽高比
				let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
				//创建相机对象
				this.camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
				this.camera.position.set(300, 300, 300); //设置相机位置
				this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)
				// this.camera = new THREE.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
				//     this.camera.position.z = 1;
				/**
				 * 创建渲染器对象
				 */
				this.renderer = new THREE.WebGLRenderer({
					antialias: true, //设置渲染器锯齿
				});
				console.log('查看当前屏幕设备像素比', window.devicePixelRatio);
				this.renderer.setPixelRatio(window.devicePixelRatio);
				this.renderer.setSize(width, height); //设置渲染区域尺寸
				this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
				//执行渲染操作   指定场景、相机作为参数
				this.renderer.render(this.scene, this.camera);
				container.appendChild(this.renderer.domElement); //body元素中插入canvas对象
				// 设置相机控件轨道控制器OrbitControls
				const controls = new OrbitControls(this.camera, this.renderer.domElement);
				// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景

				controls.addEventListener('change', function() {
					that.renderer.render(that.scene, that.camera); //执行渲染操作
				}); //监听鼠标、键盘事件
				// onresize 事件会在窗口被调整大小时发生
				window.onresize = function() {
					// 重置渲染器输出画布canvas尺寸
					that.renderer.setSize(window.innerWidth, window.innerHeight);
					// 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
					that.camera.aspect = window.innerWidth / window.innerHeight;
					// 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
					// 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
					// 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
					that.camera.updateProjectionMatrix();
				};
				//创建stats对象
				const stats = new Stats();
				stats.setMode(1);
				//stats.domElement:web页面上输出计算结果,一个div元素，
				document.body.appendChild(stats.domElement);
				// 渲染函数
				function render() {
					//requestAnimationFrame循环调用的函数中调用方法update(),来刷新时间
					stats.update();
					that.renderer.render(that.scene, that.camera); //执行渲染操作
					requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
				}
				render();

			}
		},
		beforeCreate() {},
		created() {},
		beforeMount() {},
		mounted() {
			this.init()
		}

	}
</script>



<style scoped>



</style>