Three.JS实现三维场景

2024-11-27 14:01:26

最近在看一些Web3D的内容，觉得如果用纯openGLes写一个简单的3D场景太难了；不过还好，有很多现成的库可以使用。

（个人感觉）：我知道的经常的是Three.JS和SceneJS。感觉Three.JS资料比较多，貌似好学一些吧；另一个是ScenenJS，感觉官方介绍比较好，适合做一些工程和医学上的模拟，实时性比较好，但是中文资料感觉比较少，不太好学习。我个人看的是Three.JS

学习中用到的一些工具和库：学习中用到一些库，也费了不少时间去整理，下载；
用到的工具：WebStorm，个人感觉还好，虽然说，开始学不建议IDE，但是起码有代码提示，会有函数的简单说明，起码知道你输入的代码（即使是照着教程抄）是否正确，如果智能提示有，那么至少说明你输入的代码是正确的。

sublimeText ：一个文本工具，配置了也可以对代码有些提示，但是，提示功能不如专业IDE。速度很好；
工具不上传了，太大，可以自己去官网下载。

用到的库：

Three.JS（介绍可以搜索）：
JQuery-1.9.0.JS:
JQuery-3.2.1.JS：
stats.JS：
dat.GUI.JS：
controlKit.JS：
SceneJS.js：

个人也是初学，工具用的是WebStorm，下面是three.JS的第一个例子，代码中添加了很详细的解释，照着写，仔细看看注释。学习的时候，个人建议把下载到库修改下名字，和你写的HTML文件统一放到一个文件夹中，这样像下面的例子中，添加引用的库就可以了，要不就要指定引用库的全路径。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Three.js 第一章学习</title>
<!--需要的基本JS库-->
  <script src="jquery19.js"></script>
  <script src="three.js"></script>
  <script src ="stats.js"></script>
  <script src = "dat.gui.js"></script>
  <script src = "controlKit.js"></script>
  <!--给body加入一个样式，边框为0（零，不显示边框）；滚动条隐藏-->
  <style type="text/css">
    body{
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
<!--建立一个DIV，WebGL渲染的基本物体会在此处输出-->
<div id="WebGL-output">

</div>

<!--定义一个JQuery函数，所有的WebGL操作展示将在该函数中进行-->
<script type="text/javascript">
$(function () {
  <!--构建场景-->
  var scene = new THREE.Scene();
  <!--建立相机，查看场景,透视相机-->
  var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
  <!--构建渲染器，进行渲染-->
  var renderer = new THREE.WebGLRenderer();
  <!--渲染背景色,不知道为什么在此学习过程中，该函数setClearColorHex()老是提示错误？-->
  // renderer.setClearColorHex(0xEEEEEE);
  renderer.setClearColor(0xAAFFCC);
  <!--渲染尺寸-->
  renderer.setSize(window.innerWidth,window.innerHeight);

  <!--添加一个辅助坐标轴-->
  var axes = new THREE.AxisHelper(20);
  scene.add(axes);

  <!--构建一个平面，物体将会放置在这个平面上-->
  <!--平面尺寸，100x60，宽度方向平分几分，高度方向平分几分，如果参数最后2位不是（1,1），平面会显示为网格平面-->
  var planeGeometry = new THREE.PlaneGeometry(100,60,10,10);
  <!--平面材质,仅仅指定颜色 0xcccccc-->
  var planeMaterial = new THREE.MeshBasicMaterial({color:0xccaacc});
  <!--有尺寸和材质构建一个平面-->
  var plane = new THREE.Mesh(planeGeometry,planeMaterial);
  <!--把平面选择-90°，方便观察-->
  plane.rotation.x = -0.5*Math.PI;
  <!--指定平面的位置-->
  plane.position.x = 15;
  plane.position.y = 0;
  plane.position.z = 0;
  <!--把平面加入到场景中-->
  scene.add(plane);
  <!--建立物体，一个立方体，一个球体-->
  <!--建立一个立方体-->
  <!--指定立方体的几何尺寸，长宽高，不包括位置-->
  var cubeGeometry = new THREE.CubeGeometry(4,4,4);
  <!--指定立方体的材质，仅仅指定颜色：0xFF0000，是否使用线框模式显示：是-->
  var cubeMaterial = new THREE.MeshBasicMaterial({color:0xFF0000,wireframe:true});
  <!--以给定的几何尺寸和材质构建一个立方体-->
  var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
  <!--指定立方体的具体位置xyz-->
  cube.position.x =-4;
  cube.position.y =3;
  cube.position.z = 0;
  <!--把建立的立方体放入场景-->
   scene.add(cube);

  <!--建立一个球体sphere-->
  <!--指定球体的几何尺寸，不包括位置；最后2个参数感觉是指定网格密度-->
  var sphereGeometry = new THREE.SphereGeometry(4,50,50);
  <!--指定球体材质，仅仅指定颜色：0xFF0000，是否以线框形式显示：是-->
  var sphereMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true});
  <!--以给定的几何尺寸和材质，建立一个球体-->
  var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
  <!--指定球体的位置 X Y Z-->
  sphere.position.x =20;
  sphere.position.y=4;
  sphere.position.z = 0;
  <!--把建立的球体加入到场景中-->
  scene.add(sphere);

  <!--指定相机的位置和方向，决定我们在场景中如何看，能看到什么-->
  camera.position.x = -30;
  camera.position.y = 40;
  camera.position.z = 30;
  camera.lookAt(scene.position);

  <!--利用JQuery查找到ID为WebGL-output的DIV，并把渲染到的东西输出到该DIV-->
  $("#WebGL-output").append(renderer.domElement);
  <!--利用渲染器以给定的相机去渲染场景-->
  renderer.render(scene,camera);
})  ;
</script>

</body>
</html>

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Three.js实现简单3D房间布局

本文实例为大家分享了Three.js实现简单3D房间布局的具体代码,供大家参考,具体内容如下废话不说了,直接上成果图. 代码如下 <!doctype html> <html lang="en"> <head> <title>房间布局</title> <meta charset="utf-8"> <meta name="viewport" content="w
three.js中3D视野的缩放实现代码

通过Threejs基础学习--修改版知道创建一个相机的相关知识点 var camera = new THREE.PerspectiveCamera( fov, aspect , near,far ); 视野角:fov 这里视野角(有的地方叫拍摄距离)越大,场景中的物体越小,视野角越小,场景中的物体越大纵横比:aspect (3d物体的宽/高比例) 相机离视体积最近的距离:near 相机离视体积最远的距离:far 其中fov视野角(拍摄距离)越大,场景中的物体越小.fov视野角(拍摄距离)越
three.js实现3D视野缩放效果

首先,不再废话了,什么是three.js,是干什么的,知道的就是知道,不知道的就百度吧. 小编为大家推荐一篇:Three.js快速入门教程昨儿发现three.js中的3D视野的缩小和放大效果可以用照相机的远近焦来实现. 缩小后: 这里采用的是透视照相机: //照相机配置 var fov = 40;//拍摄距离 var near = 1;//最小范围 var far = 1000;//最大范围 var camera = new THREE.PerspectiveCamera(fov, windo
three.js实现3D影院的原理的代码分析

本篇文章我们通过介绍3D影院的视觉原理,并介绍了three.js事件处理过程,全面分析了实现3D影院的基础知识. 1.创建一个3d的空间可以想象一下我们在房间内,房间是一个立方体,如果你有生活品味,可能会在房间内贴上壁纸,three.js可以很方便的创建一个立方体,并且给它的周围贴上纹理,让照相机在立方体之中,照相机可以360旋转,就模拟了一个真实的场景. 转换为代码: const path = 'assets/image/' const format = '.jpg' const urls
Three.js实现3D机房效果

3D机房系统是最近用户的需求,通过相关了解最后使用Three.js,也发现最近有东西可以写出来分享: webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用 Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库分步实现3D效果初始化3D模型参数开始搭建场景初始化渲染器初始化摄像机创建场景灯光布置创建网格线循环渲染界面创建鼠标控制器添加对象到场景中一 . 初始化3D模型参数 //参数处理 thi
利用three.js画一个3D立体的正方体示例代码

简介 three.js 是一款WebGL框架,WebGL可以让我们在canvas上实现3D效果.实现3D效果在国内来说还算是比较新的东西,可供查阅的资料也不多.这篇文章仅是一个入门篇,介绍如何绘制一个3D正方体. Three.js中的基本概念 Three.js包含3个基本概念:场景(Scene).相机(Camera)和渲染器(Renderer). 场景就是需要绘制的对象,相机代表取景的视角,渲染器是绘制的载体(可以挂靠到浏览器的DOM元素中), 也就是我们通过相机拍摄场景然后绘制到目标介质中去.
Three.js源码阅读笔记(Object3D类)

这是Three.js源码阅读笔记的第二篇,直接开始. Core::Object3D Object3D似乎是Three.js框架中最重要的类,相当一部分其他的类都是继承自Object3D类,比如场景类.几何形体类.相机类.光照类等等:他们都是3D空间中的对象,所以称为Object3D类.Object3D构造函数如下: 复制代码代码如下: THREE.Object3D = function () { THREE.Object3DLibrary.push( this ); this.id = THR
three.js实现3D模型展示的示例代码

由于项目需要展示3d模型,所以对three做了点研究,分享出来希望能帮到大家先看看效果: three.js整体来说不是很难只要你静下心来研究研究很快就会上手的首先我们在页面上需要创建一个能够放置3D模型的画布也可以说是初始化 Three var WIDTH,HEIGHT; var renderer; function initThree() { WIDTH = document.documentElement.clientWidth/2; <!--{foreach from=$re
Three.js开发实现3D地图的实践过程总结

前言本文主要介绍Three.js的开发基础和基本原理,以及如何实现3D全景图.想在web端实现3D全景图的效果,除了全景图片.WebGL外,还需要处理很多细节.据我所知,目前国外3D全景图比较好的是KrPano,国内很多3D全景服务是在使用krpano的工具. 前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目.也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享. Three.js 基于简化WebGL开发复杂度和降低入门难度的目的,mrdoob)在WebGL标准基础
Three.js的使用及绘制基础3D图形详解

一. 前言 Three.js 是一款 webGL(3D绘图标准,在此不赘述)引擎,可以运行于所有支持 webGL 的浏览器.Three.js 封装了 webGL 底层的 API ,为我们提供了高级的开发接口,可以使用简单的代码去实现 3D 渲染.(官网:https://threejs.org/) 二. 为什么要选择Three.js? Three.js 作为原生 web3D 引擎,对插件式 web3D 引擎的优势不言而喻:不需要安装插件.在移动端支持好. Three.js 与其他原生 web3D

Three.JS实现三维场景

相关推荐

随机推荐