实现3D 场景——three.js学习篇四之在场景放入多个物体

最新推荐文章于 2023-08-31 10:46:46 发布

hello big_bear

最新推荐文章于 2023-08-31 10:46:46 发布

阅读量1.1k

点赞数 3

分类专栏： three.js 文章标签： javascript 前端 three.js 前端可视化 3d

本文链接：https://blog.csdn.net/big_beer/article/details/120293749

版权

three.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习目标：

在场景放入多个不同形状的物体

代码：

<!DOCTYPE html>
<html>
<head>
    <title>同时放入多个物体</title>
    <style type="text/css">
        body { margin: 0; }
        canvas { width: 100%; height: 100%; }
    </style>
</head>
<body>
<script src="./three.js-dev/build/three.js"></script>
<script src="./three.js-dev/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript"  >
	/*
	创建场景
	*/
	var scene = new THREE.Scene();
	var geometry1 = new THREE.SphereGeometry(50,40,40);//创建一个球体几何对象
	var geometry2 = new THREE.BoxGeometry( 100, 100, 10 );//创建一个长方体几何对象
	var geometry3 = new THREE.CylinderGeometry( 50,50, 50, 100 );//创建一个圆柱体几何对象:第一个参数是顶部直径、第二个参数是底部直径、第三个是圆柱高度、第四个是圆周分段数（越大越圆）

	var material = new THREE.MeshLambertMaterial({
		color:0x0000ff
	});//创建材质对象
	
	var mesh1 = new THREE.Mesh(geometry1,material);//网格模型对象
	var mesh2 = new THREE.Mesh(geometry2,material);//网格模型对象
	var mesh3 = new THREE.Mesh(geometry3,material);//网格模型对象

	scene.add(mesh1);//mesh1添加到场景中
	
	mesh2.translateY(100)//向y轴正方向平移100
	scene.add(mesh2);//mesh2添加到场景中
	
	mesh3.translateX(100)//向x轴正方向平移100
	scene.add(mesh3);//mesh3添加到场景中
	/*
	光源设置
	*/
	var point = new THREE.PointLight(0Xffffff);//点光源
	point.position.set(400,100,200)//光源位置
	scene.add(point)//点光源添加到场景中
	var ambient = new THREE.AmbientLight(0x444444);//环境光
	scene.add(ambient);//添加到场景中
	
	/*
	相机设置
	*/
   var width = window.innerWidth;//窗口宽度
   var height = window.innerHeight;//窗口高度
   var k = width/height;
   var s = 200;//三维场景显示范围控制系数，系数越大，显示范围越大
   var camera = new THREE.OrthographicCamera( -s*k, s*k,s,-s,1,1000 );
   camera.position.set(200,300,200);//设置相机位置
   camera.lookAt(scene.position);//设置相机方向
   
	/*
	辅助坐标系
	*/
	var axisHelper = new THREE.AxisHelper(250)//辅助线的长度
	scene.add(axisHelper)
   
	/*
	渲染器对象
	*/
	var renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setClearColor(0xb9d3ff,0.3);//设置背景颜色
	document.body.appendChild( renderer.domElement );
	
	 function render(){
	 	renderer.render(scene,camera)
	 }//封装一个渲染函数
	 
	 render();//一进来渲染一次
	
	 var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控制对象，把相机作为参数。

	 controls.addEventListener('change',render);//监听鼠标事件，触发渲染函数。
	
</script>
</body>
</html>

效果图：

项目展示：点击跳转

学习产出：

1、辅助线，看代码吧很简单。
2、在场景放入多个物体，要修改物体的位置，不然会重叠在一起。

在这里插入图片描述

hello big_bear

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
实现3D 场景——three.js学习篇四之在场景放入多个物体

学习目标：在场景放入多个不同形状的物体代码：<!DOCTYPE html><html><head> <title>同时放入多个物体</title> <style type="text/css"> body { margin: 0; } canvas { width: 100%; height: 100%; } </style></head>
复制链接

扫一扫