脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Three.JS实现三维场景

Three.JS实现三维场景

 更新时间：2018年12月30日 10:18:14   作者：bullzerone  
这篇文章主要为大家详细介绍了Three.JS实现三维场景，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

最近在看一些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>

效果：

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

您可能感兴趣的文章:

相关文章

  • JavaScript动画函数封装详解

    JavaScript动画函数封装详解

    动画的原理是通过定时器setInterval() 不断移动盒子位置。但是如果同时有好几个元素都需要添加动画呢？我们就可以考虑将其封装成一个简单的动画函数。本文将为大家介绍如何进行封装，需要的可以参考一下
    2021-12-12
  • Json格式详解

    Json格式详解

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成
    2021-11-11
  • textContent在Firefox下与innerText等效的属性

    textContent在Firefox下与innerText等效的属性

    textContent在Firefox下与innerText等效的属性...
    2007-05-05
  • 详解关于微信setData回调函数中的坑

    详解关于微信setData回调函数中的坑

    这篇文章主要介绍了详解关于微信setData回调函数中的坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 深入浅析JavaScript的API设计原则

    深入浅析JavaScript的API设计原则

    这篇文章主要介绍了JavaScript的API设计原则，包括接口的流畅性，一致性，参数的处理，可扩展性，对错误的处理，可预见性，注释和文档的可读性，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-06-06
  • js数据类型转换与流程控制操作实例分析

    js数据类型转换与流程控制操作实例分析

    这篇文章主要介绍了js数据类型转换与流程控制操作,结合实例形式分析了JavaScript数据类型转换与流程控制相关原理、操作技巧与使用注意事项,需要的朋友可以参考下
    2019-12-12
  • JavaScript操作表单实例讲解(上)

    JavaScript操作表单实例讲解(上)

    这篇文章主要介绍了JavaScript操作表单实例讲解(上)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • 微信小程序实现简单购物车小功能

    微信小程序实现简单购物车小功能

    这篇文章主要为大家详细介绍了微信小程序实现简单购物车小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 用JS动态改变表单form里的action值属性的两种方法

    用JS动态改变表单form里的action值属性的两种方法

    下面小编就为大家带来一篇用JS动态改变表单form里的action值属性的两种方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • js中键盘事件实例简析

    js中键盘事件实例简析

    这篇文章主要介绍了js中键盘事件,以一个较为简单的实例形式分析了js响应键盘事件的操作技巧,需要的朋友可以参考下
    2015-01-01

最新评论