three.js 入门（创建模型的必要因素）

最新推荐文章于 2023-03-14 22:05:28 发布

viknew

最新推荐文章于 2023-03-14 22:05:28 发布

阅读量1.5k

点赞数 2

分类专栏： javascript 文章标签： three.js 基础入门

本文链接：https://blog.csdn.net/up123456789/article/details/49984331

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先需要引入three.js这个是必不可少的了。。。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>First Example</title>
    <script type="text/javascript" src="../libs/three.js"></script>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
	
</head>
<body>
<div id="WebGL-output">
</div>
</body>
</html>

以上代码是通过定义一个webGl的输出块，以便把3D场景对象等展示出来。

当然了，上面的只是单纯的html标签，接下来就需要使用three.js的各种对象和方法了。。

我们需要明确展示内容的话，我们需要哪些基本的东西

一、场景对象

二、相机对象

三、光源对象

四、几何体、材质、网格对象（几何体是定义几何体结构、材质是为了给几何体何种外观、网格对象可以理解为是把几何体和材质融合的对象）

五、渲染器

场景的定义：var scene = new THREE.Scene(); //可以设置其位置属性等

相机对象定义：var camera = new THREE.PerspectiveCamera(45,innerWidth/innerHeight,0.01,1000); //参数按顺序分别表示视域、视角长宽比、近距、远距，注：需要注意位置等信息

光源对象定义：var spotLight = new THREE.SpotLight(0xfffffff);//参数表示光源颜色注：需要注意位置等信息

几何体等略。

渲染器定义：var renderer = new THREE.WebGLRenderer();//还有有其他渲染器类型

<script type="text/javascript">
$(document).ready(function(){
	//创建场景
	var scene = new THREE.Scene();
        //创建相机
	var camera = new THREE.PerspectiveCamera(45,innerWidth/innerHeight,0.01,1000);
	camera.position.x = -30;
	camera.position.y = 40;
	camera.position.z = 30;
	//创建长方形几何体
	var planeGeometry = new THREE.PlaneBufferGeometry(60,10,1,1);
	//创建材质
	var planeMaterial = new THREE.MeshLambertMaterial({color:"green"});
	planeMaterial.side = THREE.DoubleSide;
	//创建网格对象
	var planeMesh = new THREE.Mesh(planeGeometry,planeMaterial);
	//设置网格位置
	planeMesh.rotation.x = -0.5*Math.PI;
	planeMesh.position.x = 15;
	planeMesh.position.y = 0;
	planeMesh.position.z = 0;
	scene.add(planeMesh);
	planeMesh.receiveShadow = true;
	//创建灯管颜色
	var spotLight = new THREE.PointLight(0xffffff);
	spotLight.position.set(-30,40,30);
	scene.add(spotLight);
	//相机照看的位置
	camera.lookAt(scene.position);
	//创建渲染器
	var renderer = new THREE.WebGLRenderer();
	renderer.shadowMapEnabled = true;
	renderer.setClearColor(0xEEEEEE);
	renderer.setSize(window.innerWidth, window.innerHeight);
	$("#WebGL-output").append(renderer.domElement);
        //渲染	
	renderer.render(scene,camera);
	});
</script>

viknew

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
three.js 入门（创建模型的必要因素）

首先需要引入three.js这个是必不可少的了。。。 First Example body { margin: 0; overflow: hidden; } 以上代码是通过定义一个webGl的输出块，以便把3D场景对象等展示出来。当然了，上面的只是单纯的htm
复制链接

扫一扫