threejs 加载两个场景_用threejs和ammojs制作一个简单场景

本文详细介绍了如何使用three.js和ammo.js创建一个包含物理引擎的3D场景。首先介绍如何建立基本的3D场景,然后逐步添加物理引擎,包括初始化物理空间、更新物理状态和创建刚体。最后,展示了如何实现鼠标点击发射小球的功能,并给出增加30个随机颜色箱子从天而降的实例。整个教程旨在为初学者提供一个易于理解的模板,帮助快速上手3D物理场景开发。
摘要由CSDN通过智能技术生成

本文的主要内容就是用three.js制作简单场景,并引入ammo.js物理引擎。

bullet引擎和OpenGL结合创建简单的场景

three.js和ammo.js创建简单的场景

创建地形

制作车辆

柔体-绳索

柔体-布料

柔体-有体积的柔体

使用blender引擎模拟物理场景

本节目标是制作一个模板代码,后续开发都在这个模板的基础上继续开发。这一系列教程都是bullet物理引擎简易使用教程,不会涉及很多原理(比如函数的每个参数的具体含义),只有简单的使用方法。

原因:我以前学编程,总是先知其然再探其所以然。能粗略使用,对于初学者的信心提升是非常高的。我自己也是初学者,我以前学东西的时候,总是在这种基础关卡住,而向别人求教的时候,总是直接给你丢个文档过来说读去吧。一开始就读文档对于初学者来说并不是什么好的入门方法,相反,通过一些简单的实例的模仿迅速拾起信心,才是关键。

three.js制作简单场景

整体思路:主函数一共两个,分别是init和animate,作用类似于unity3d中的Start()和Update()。

全局变量一共有如下

// 绘图相关变量

var container, stats;

var camera, controls, scene, renderer;

var textureLoader;

var clock = new THREE.Clock();

init中只有一个子函数initGraphics,其创建一个空场景,并添加一个环境光和一个线性光,线性光可以产生阴影。initGraphics也是为了和后文中的initPhysics区分开。

animate函数的主要作用是更新场景,绘制下一帧,更新相机位置,顺便用stats工具统计一下帧数、每帧需要的时间、内存占用什么的。

本场景除了three.js之外,还引用了OrbitControls.js,stats.min.js,Detector.js三个文件,分别用来添加鼠标控制,状态统计和检测浏览器对webgl的支持。

本场景源码,运行效果,如果你的程序也是一片浅蓝,帧数显示正确,恭喜你运行成功。

添加物理场景

整体思路:在上一个场景的基础上添加初始化物理场景函数initPhysics、物理场景更新函数updatePhysics、将物理场景中的物体和绘图空间中的场景关联起来并添加到两个场景中的函数createRigidBody(前几个demo中物理场景只支持刚体),

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值