threeJS代码示例（002）:两种方法更改Scene的颜色

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

文章目录

• • 一、示例效果图
  • 二、示例简介
  • 三、配置说明
  • 四、示例源代码（共108行）
  • 四、相关文章参考

一、示例效果图

二、示例简介

本threeJS示例通过两种方法来修改Scene的颜色，两种方法都在源代码中有标注，具体的请参看源代码。

三、配置说明

1）查看基础设置：https://dajianshi.blog.csdn.net/article/details/141936765

2）将示例源代码，粘贴到src/views/Home.vue中，npm run serve 运行即可。

四、示例源代码（共108行）

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @First published in CSDN
* @Second published in CSDN
* @First published time: 2024-09-23
*/
<template>
	<div class="container">
		<h3>ThreeJS示例（002）: 两种方法更改Scene的背景颜色</h3>
		<p>大剑师兰特, 还是大剑师兰特</p>
		<div id="vue-three"></div>

	</div>
</template>

<script>
	import * as THREE from "three";
	export default {
		data() {
			return {
			}
		},
		methods: {
			initThree() {
				// 创建场景
				var scene = new THREE.Scene();
				scene.background = new THREE.Color(0xB0E2FF); // 方法1
				// 创建相机
				var camera = new THREE.PerspectiveCamera(75, 96 / 53, 0.1, 1000);
				camera.position.z = 5;

				// 创建渲染器
				var renderer = new THREE.WebGLRenderer();
				//renderer.setClearColor(new THREE.Color(0xB0E2FF)); //方法2
				renderer.setSize(960, 530);
				let dom = document.getElementById('vue-three');
				dom.appendChild(renderer.domElement);

				// 创建一个立方体
				var geometry = new THREE.BoxGeometry(1.2, 1.2, 1.2);

				// MeshBasicMaterial
				var materialLambert = new THREE.MeshBasicMaterial({
					color: 0xff0000
				});
				var cubeLambert = new THREE.Mesh(geometry, materialLambert);
				cubeLambert.position.x = 0;
				scene.add(cubeLambert);
				// 渲染函数
				function animate() {
					requestAnimationFrame(animate);
					cubeLambert.rotation.x += 0.01;
					cubeLambert.rotation.y += 0.01;
					renderer.render(scene, camera);
				}
				animate();

			},
		},
		mounted() {
			this.initThree();
		}

	}
</script>
<style scoped>
	.container {
		width: 1000px;
		height: 660px;
		margin: 10px auto;
		border: 1px solid #42B983;
	}

	#vue-three {
		width: 960px;
		height: 530px;
		margin: 0 auto;
		border: 1px solid #42B983;
		position: relative;
	}
</style>

四、相关文章参考

https://dajianshi.blog.csdn.net/article/details/141935205