three.js-走进3d的奇妙世界一创建一个三维场景
一、git代码仓库地址
git clone https://github.com/josdirksen/learning-threejs-third 下载并解压
二、创建一个三维场景
如下图所示是一个三维场景,包括了一个几何体,球,平面,坐标系等等。
那么这些东西究竟是怎么实现呢,在未了解three.js之前,我也一直对这些东西感到疑惑。今天就带大家一起走进3d的奇妙世界。
大家都知道在现实生活中,我们能看到或者感觉到阳光,雨水,高山,风等等,那么在3d的世界中这么东西都是以怎么样子构建的呢。
在three中存在了几个重要的东西用来实现对现实生活中的模拟。
1.camera(相机):他就像人的眼睛一样,用来观察一切事物,没有他我们就什么都看不见。当然他也有许多属性,譬如相机的位置,观看的方向,相机的旋转角度(可以想象一下你拿相机照相的情形)
2.scene(场景):可以想象成一个真实的世界,如果没有了世界,那其他也就什么都没有了
3.renderer(渲染器):渲染器会基于摄像机的角度来计算场景对象在浏览器中渲染成什么样子
// 创建场景
var scene = new THREE.Scene();
// 创建相机 接收四个参数fov aspect near far
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000)); //将场景的背景颜色设置为黑色
renderer.setSize(1000,400); //设置场景的大小
renderer.shadowMap.enabled = true; //渲染阴影,后面有提到
document.getElementById("demo").appendChild(renderer.domElement); // 要渲染的div
renderer.render(scene ,camera )
下面解释如何在刚刚建好的环境中添加三维对象
首先我们创建一个坐标系,便于直观的看出三维模型,这里的坐标系使用的右手坐标系。可以拿出右手体会下。
// 添加坐标轴 线宽为20
var axes = new THREE.AxesHelper(20)
//并把坐标系添加到场景中
scene.add(axes)
现在场景中有了一个三维对象,就如现实世界中有了事物,有了眼睛。但是我们站在哪里,以什么角度去看呢,这就需要设置摄像机的位置,观看的角度
// 相机位置
camera.position.set(-30, 40, 30);
// 相机看的方向 为场景的方向也可以设置成其他方向
camera.lookAt(scene.position);
我们继续分别添加一个平面、球型和正方体
// 创建平面
// 创建平面的大小
var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
// 创建平面的材质MeshLambertMaterial
var planeMaterial = new THREE.MeshLambertMaterial({
color:0xffffff
});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.receiveShadow = true; //平面是否接受投影
plane.position.set(15, 0, 0); //平面的位置
plane.rotation.x = -0.5 * Math.PI; //平面绕x轴旋转90度 scene.add(plane);
// 添加立方体长宽高 4 4 4
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xFF0000,
wireframe: true
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
cube.position.set(-4, 4, 0);
cube.castShadow = true; //是否投影
scene.add(cube);
//创建球体
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({
color: 0x7777FF,
wireframe: true
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(20, 0, 0);
sphere.castShadow = true;
scene.add(sphere);
最后添加光源,此外在需要在rendrer中渲染阴影
// 添加光源
var ambienLight = new THREE.AmbientLight(0x353535);
scene.add(ambienLight);
var spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(-10, 20, -5);
spotLight.castShadow = true;
scene.add(spotLight);
function init(){
// 创建场景
var scene = new THREE.Scene();
// 创建相机 接收四个参数fov aspect near far
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000)); //将场景的背景颜色设置为黑色
renderer.setSize(1000,400);
renderer.shadowMap.enabled = true;
// 添加坐标轴
var axes = new THREE.AxesHelper(20)
scene.add(axes)
// 创建平面
// 创建平面的大小
var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
// 创建平面的材质
var planeMaterial = new THREE.MeshLambertMaterial({
color:0xffffff
});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.receiveShadow = true;
plane.position.set(15, 0, 0);
plane.rotation.x = -0.5 * Math.PI; scene.add(plane);
// 添加立方体
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xFF0000,
wireframe: true
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
cube.position.set(-4, 4, 0);
cube.castShadow = true;
scene.add(cube);
//创建球体
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({
color: 0x7777FF,
wireframe: true
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(20, 0, 0);
sphere.castShadow = true;
scene.add(sphere);
// 相机位置
camera.position.set(-30, 40, 30);
// 相机看的方向
camera.lookAt(scene.position);
// 添加光源
var ambienLight = new THREE.AmbientLight(0x353535);
scene.add(ambienLight); var spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(-10, 20, -5);
spotLight.castShadow = true;
scene.add(spotLight); document.getElementById("webgl-output").appendChild(renderer.domElement);
var step = 0;
renderScene();
function renderScene(){
// stats.update();
cube.rotation.x += 0.02;
cube.rotation.y += 0.02;
cube.rotation.z += 0.02;
step += 0.04;
sphere.position.x = 20 + (10 * (Math.cos(step)));
sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)));
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
}
three.js-走进3d的奇妙世界一创建一个三维场景的更多相关文章
- Three.js - 走进3D的奇妙世界
本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界. 文章来源:宜信技术学院 & 宜信支付结算团队技术分享第6期-支付结算部支付研发团队前端研发高级工程师-刘琳<three. ...
- MYSQL(基本篇)——一篇文章带你走进MYSQL的奇妙世界
MYSQL(基本篇)--一篇文章带你走进MYSQL的奇妙世界 MYSQL算是我们程序员必不可少的一份求职工具了 无论在什么岗位,我们都可以看到应聘要求上所书写的"精通MYSQL等数据库及优化 ...
- js 数组 添加或删除 元素 splice 创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素 filter
里面可以用 箭头函数 splice 删除 增加 数组 中元素 操作数组 filter 创建新数组 检查指定数组中符合条件的所有元素
- Three.js 实现3D开放世界小游戏:阿狸的多元宇宙 🦊
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 2545光年之外的开普勒1028星系,有一颗色彩斑斓的宜居星球 ,星际移民 ...
- Miox带你走进动态路由的世界——51信用卡前端团队
写在前面: 有的时候再做大型项目的时候,确实会被复杂的路由逻辑所烦恼,会经常遇到权限问题,路由跳转回退逻辑问题.这几天在网上看到了51信用卡团队开源了一个Miox,可以有效的解决这些痛点,于是乎我就做 ...
- [C#] 走进异步编程的世界 - 开始接触 async/await
走进异步编程的世界 - 开始接触 async/await 序 这是学习异步编程的入门篇. 涉及 C# 5.0 引入的 async/await,但在控制台输出示例时经常会采用 C# 6.0 的 $&qu ...
- [C#] 走进异步编程的世界 - 剖析异步方法(上)
走进异步编程的世界 - 剖析异步方法(上) 序 这是上篇<走进异步编程的世界 - 开始接触 async/await 异步编程>(入门)的第二章内容,主要是与大家共同深入探讨下异步方法. 本 ...
- [C#] 走进异步编程的世界 - 剖析异步方法(下)
走进异步编程的世界 - 剖析异步方法(下) 序 感谢大家的支持,这是昨天发布<走进异步编程的世界 - 剖析异步方法(上)>的补充篇. 目录 异常处理 在调用方法中同步等待任务 在异步方法中 ...
- [C#] 走进异步编程的世界 - 在 GUI 中执行异步操作
走进异步编程的世界 - 在 GUI 中执行异步操作 [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5877042.html 序 这是继<开始接 ...
随机推荐
- 【leetcode】966. Vowel Spellchecker
题目如下: Given a wordlist, we want to implement a spellchecker that converts a query word into a correc ...
- HTML5 原生API input file 来实现多图上传,并大图预览
闲来无事,突然想用原生来实现图片的多图上传. 一.效果图大致如下: 1.上传时可以选择多图 2.上传之后缩略图下过图如下: 3.点击缩略图,大图展示当前所点击的图片,并可以左右滑动查看其它的缩略图对应 ...
- mongodb客户端操作常用命令(续)
之前有写过一篇mongodb客户端的操作常用命令 ,今天接着来记录分享一些关于mongodb账户权限设置的命令操作 上期mongodb客户端的操作常用命令地址:https://www.cnblogs. ...
- vue 项目 跳转 页面 不刷新 问题
vue项目中需要导出下载客户数据,因为数据太多,响应太慢.后台直接上传给七牛 然后返回一个下载链接 前端通过跳转链接 来下载 riskManagementApi.friendExprotAll(t ...
- JMeter生成性能报表-Windows环境和Linux环境
转载自https://www.cnblogs.com/imyalost/p/10239317.html
- Dataphin支持哪些数据源
业务数据存储是业务系统最基本的构成,构建数据中台,就是要将这些数据集中起来放到一个有更强算力的地方集中处理,所以对于数据集成的能力是构建数据中台最基本要求: 从存储的发展历程来看,由于不同的业务场景需 ...
- Yii2 使用十一 在设置enablePrettyUrl时候,defaultAction的设置方法
启用美化Url的功能 'urlManager' => [ 'enablePrettyUrl' => true, 'showScriptName' => false, 'enableS ...
- 【LeetCode 25】K 个一组翻转链表
题目链接 [题解] 模拟就好. 就k个k个节点地翻转. 每个节点都把next域指向它前面那个节点 修改完之后把这个节点前面的那个节点的next域改成这一段的最后一个节点. 然后把这一段最左边的那个节点 ...
- bzoj1047题解
[解题思路] (p.s.:刚看的时候一脸懵逼..没看见N已经给定了,还以为要用某些高明的方法..果然还是太naive了..) 两遍预处理,第一遍处理出f[i][j][0/1]表示第i行从j-n+1~j ...
- java——文件