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

学习目标:

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

代码:

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>

效果图:

实现3D 场景——three.js学习篇四之在场景放入多个物体_第1张图片
项目展示:点击跳转

学习产出:

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

实现3D 场景——three.js学习篇四之在场景放入多个物体_第2张图片

你可能感兴趣的:(three.js,javascript,前端,three.js,前端可视化,3d)