浅试three.js

最新推荐文章于 2024-04-16 11:58:35 发布

小燕子丫丫

最新推荐文章于 2024-04-16 11:58:35 发布

阅读量276

点赞数

分类专栏： three.js 文章标签： three.js

本文链接：https://blog.csdn.net/m0_37335808/article/details/113752919

版权

three.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近项目周期不是很紧张，一直都在学习three.js，所以将这两天学习所得记录一下～～～

three.js介绍

Three.js 是一款运行在浏览器中的 3D 引擎，我们可以使用它嵌套3D模型，也可以自己制作一些简单的3D场景。three.js主要包括了场景-相机-渲染器这三个方面。接下来以一个例子将这三个方面描述一下

第一步：引入three.js
官网上有明细的资料下载说明，这里就不详细说明。点击跳转官网

<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>

第二步：创建场景对象

<script>
    var scene = new THREE.Scene();
    //调用x,y,z轴。这个看个人习惯，不是必填
    var axisHelper = new THREE.AxisHelper(500);
    scene.add(axisHelper);
</script>

第三步：创建网格模型跟材质

<script>
   //创建一个立方体几何对象
   var body = new THREE.BoxGeometry(20, 25, 8);
   //创建材质
   var bodyStyle = new THREE.MeshLambertMaterial({
	   color: 0xFF00FF,
	   transparent:true,
	   shininess:12
   });
   //创建网格对象，将材质跟几何体填充到网格对象中
   var bodyStyleMesh = new THREE.Mesh(body, bodyStyle);
   scene.add(bodyStyleMesh);
</script>

第四步：光源设置

<script>
    //点光源
   var point = new THREE.PointLight(0xffffff);
   point.position.set(0, 150, 500); //位置设置
   scene.add(point);
   //环境光
   var ambient = new THREE.AmbientLight(0x0000FF);
   scene.add(ambient);
</script>

第二，三，四步基本就完成一个场景流程的创建

第五步：创建相机

<script>
   var width = window.innerWidth;
   var height = window.innerHeight;
   var k = width / height;
   //三维场景显示范围控制系数，系数越大，显示的范围越大
   var s = 100;
   var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
   //设置相机位置
   camera.position.set(0, 100, 400);
   //设置相机方向(指向的场景对象)
   camera.lookAt(scene.position);
</script>

第六步：创建渲染器

<script>
   var renderer = new THREE.WebGLRenderer();
   //设置渲染区域尺寸
   renderer.setSize(width, height);
   //设置背景颜色
   renderer.setClearColor(0xb9d3ff, 1);
   //添加到页面中
   document.body.appendChild(renderer.domElement);
   function render() {
	   renderer.render(scene, camera); //执行渲染操作
	   requestAnimationFrame(render)
   }
   render();
   var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象，鼠标可以控制对象
</script>

完整代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>第一个three.js文件_WebGL三维场景</title>
		<style>
			body {
				margin: 0;
				overflow: hidden;
				/* 隐藏body窗口区域滚动条 */
			}
		</style>
		<!--引入three.js三维引擎-->
		<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
		<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
		<!-- <script src="./three.js"></script> -->
		<!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
	</head>
	<body>
		<script>
			var scene = new THREE.Scene();
			var axisHelper = new THREE.AxisHelper(500);
			scene.add(axisHelper);
			//身体
			var body = new THREE.BoxGeometry(20, 25, 8);
			var bodyStyle = new THREE.MeshLambertMaterial({
				color: 0xFF00FF,
				transparent:true,
				shininess:12
			});
			var bodyStyleMesh = new THREE.Mesh(body, bodyStyle);
			scene.add(bodyStyleMesh);
			//左边眼
			var leftEye = new THREE.SphereGeometry(1, 8, 8);
			var leftEyeStyle = new THREE.MeshLambertMaterial({
				color: 0x000000
			});
			var leftEyeStyleMesh = new THREE.Mesh(leftEye, leftEyeStyle);
			leftEyeStyleMesh.translateY(21);
			leftEyeStyleMesh.translateX(-2);
			leftEyeStyleMesh.translateZ(5);
			scene.add(leftEyeStyleMesh);
			//右边眼
			var rightEye = new THREE.SphereGeometry(1, 8, 8);
			var rightEyeStyle = new THREE.MeshLambertMaterial({
				color: 0x000000
			});
			var rightEyeStyleMesh = new THREE.Mesh(rightEye, rightEyeStyle);
			rightEyeStyleMesh.translateY(21);
			rightEyeStyleMesh.translateX(2);
			rightEyeStyleMesh.translateZ(5);
			scene.add(rightEyeStyleMesh);
			//嘴巴
			var mouth = new THREE.BoxGeometry(6, 1, 6);
			var mouthStyle = new THREE.MeshLambertMaterial({
				color: 0x000000
			});
			var mouthStyleMesh = new THREE.Mesh(mouth, mouthStyle);
			mouthStyleMesh.translateY(18);
			mouthStyleMesh.translateX(0);
			mouthStyleMesh.translateZ(3);
			scene.add(mouthStyleMesh);
			//头部
			var header = new THREE.SphereGeometry(6, 10, 10);
			var headerStyle = new THREE.MeshLambertMaterial({
				color: 0xFF00FF
			});
			var headerStyleMesh = new THREE.Mesh(header, headerStyle);
			headerStyleMesh.translateY(19);
			scene.add(headerStyleMesh);
			//左边腿
			var leftLeg = new THREE.CylinderGeometry( 2, 2, 30, 30);
			var leftLegStyle = new THREE.MeshLambertMaterial({
				color: 0xFF00FF
			});
			var leftLegStyleMesh = new THREE.Mesh(leftLeg, leftLegStyle);
			leftLegStyleMesh.translateY(-25);
			leftLegStyleMesh.translateX(-5);
			scene.add(leftLegStyleMesh);
			//右边腿
			var leftLeg = new THREE.CylinderGeometry( 2, 2, 30, 30)
			var leftLegStyle = new THREE.MeshLambertMaterial({
				color: 0xFF00FF
			});
			var leftLegStyleMesh = new THREE.Mesh(leftLeg, leftLegStyle);
			leftLegStyleMesh.translateY(-25);
			leftLegStyleMesh.translateX(5);
			scene.add(leftLegStyleMesh);
			//左边手
			var leftHand = new THREE.CylinderGeometry( 2, 2, 22, 30);
			var leftHandStyle = new THREE.MeshLambertMaterial({
				color: 0xFF00FF
			});
			var leftHandStyleMesh = new THREE.Mesh(leftHand, leftHandStyle);
			leftHandStyleMesh.translateY(2);
			leftHandStyleMesh.translateX(14);
			leftHandStyleMesh.rotateZ(10);
			scene.add(leftHandStyleMesh);
			//右边手
			var leftHand = new THREE.CylinderGeometry( 2, 2, 23, 30);
			var leftHandStyle = new THREE.MeshLambertMaterial({
				color: 0xFF00FF
			});
			var leftHandStyleMesh = new THREE.Mesh(leftHand, leftHandStyle);
			leftHandStyleMesh.translateY(2);
			leftHandStyleMesh.translateX(-14);
			leftHandStyleMesh.rotateZ(-10);
			scene.add(leftHandStyleMesh);
			//光源设置
			var point = new THREE.PointLight(0xffffff);
			point.position.set(0, 150, 500);
			scene.add(point);
			var ambient = new THREE.AmbientLight(0x0000FF);
			scene.add(ambient);
			//照相机位置
			var width = window.innerWidth;
			var height = window.innerHeight;
			var k = width / height;
			var s = 100;
			var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
			camera.position.set(0, 100, 400);
			camera.lookAt(scene.position);
			//创建渲染对象
			var renderer = new THREE.WebGLRenderer();
			renderer.setSize(width, height);
			renderer.setClearColor(0xb9d3ff, 1);
			document.body.appendChild(renderer.domElement);
			function render() {
				renderer.render(scene, camera); //执行渲染操作
				requestAnimationFrame(render)
			}
			render();
			var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
		</script>
	</body>
</html>

效果图
在这里插入图片描述

小燕子丫丫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅试three.js

最近项目周期不是很紧张，一直都在学习three.js，所以将这两天学习所得记录一下～～～three.js介绍Three.js 是一款运行在浏览器中的 3D 引擎，我们可以使用它嵌套3D模型，也可以自己制作一些简单的3D场景。three.js主要包括了场景-相机-渲染器这三个方面。接下来以一个例子将这三个方面描述一下第一步：引入three.js官网上有明细的资料下载说明，这里就不详细说明。点击跳转官网<script src="http://www.yanhuangxueyuan.com/ver
复制链接

扫一扫

专栏目录