threejs入门练习

最新推荐文章于 2024-05-10 17:34:29 发布

kilito_01

最新推荐文章于 2024-05-10 17:34:29 发布

阅读量365

点赞数

文章标签： three.js

本文链接：https://blog.csdn.net/kilito_01/article/details/121560261

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/three.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/OrbitControls.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	
	<body>
		<!-- 创建一个盒子 -->
		<div id="demo"></div>
		<script>
		init()
		//初始化
			function init(){
				//创建一个场景
				var scene = new THREE.Scene();
				//设置摄像机  摄像机角度 长宽比  最近能看到的画面  最远能看到的画面  一般设置成0.1和2000
				var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,2000)
				//创建渲染器
				var renderer = new THREE.WebGL1Renderer();
				// 设置渲染器的初始颜色
				renderer.setClearColor(new THREE.Color(0xEEEEEE))
				//设置输出canvas画面的大小
				renderer.setSize(window.innerWidth,window.innerHeight)
				//显示三维坐标
				var axes = new THREE.AxisHelper(20);
				
				// 添加坐标系到场景中
				scene.add(axes)
				// 创建一个平面的几何体  宽高60,20
				var planeGeometry = new THREE.PlaneGeometry(60, 20);
				// 给地面物体上色
				var planeMaterial = new THREE.MeshBasicMaterial({color:0xcccccc})
				// 创建地面  将平面的几何和材质颜色结合在一起
				var plane = new THREE.Mesh(planeGeometry,planeMaterial)
				// 物体移动位置
				plane.rotation.x = -0.5 * Math.PI
				plane.position.x = 15
				plane.position.y = 0
				plane.position.z = 0
				// 将地面添加到场景中
				scene.add(plane)
				
				// 定位相机，并且指向场景中心
				camera.position.x = -30;
				camera.position.y = 40;
				camera.position.z = 30;
				camera.lookAt(scene.position)
				
				// 将渲染器输出到HTML元素中
				document.querySelector("#demo").appendChild(renderer.domElement)
				//将场景和相机渲染出来
				renderer.render(scene,camera)
				
				
			}
		</script>
	</body>
</html>

在这里插入图片描述

kilito_01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
threejs入门练习

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/three.js" type="text/javascript" charset="utf-8"></script> <script src="js/OrbitControls.js" type="text/javas
复制链接

扫一扫