2022-06-15 来源：华纳网 责任编辑：谷雨 人气：
核心提示：知识点： Three.js基础结构 相机基础知识 光源基础知识

知识点：

Three.js基础结构

相机基础知识

光源基础知识

 



 

本课内容：

大家好，欢迎来到谷雨课堂，

本节我们来正式学习一下Three.js的开发

 

首先我们了解光源和相机的概念，

在3D场景中，

我们的人眼大多数情况下相当于相机，

相机处于三维场景中的某个点，

 

而光源相当于太阳、日光灯等

当有光时，

我们才能看到场景中的物体

 

Threejs场景对象Scene主要是由模型对象和光源对象Light构成，

在实际开发过程中，

多数三维场景往往需要设置光源对象，

 

Threejs虚拟光源是对自然界光照的模拟。


 

1、环境光（AmbientLight）：

会均匀照亮场景中的所有物体。

环境光不能用来投射阴影，

因为它没有方向。 

 

2、平行光（DirectionalLight）：

它发出的光线都是平行的。

经常用平行光来模拟太阳光的效果。

 

3、点光源（PointLight）：

常见的例子是模拟一个灯泡发出的光。

 

4、聚光灯（SpotLight）：

从一个方向上的一个点发出，

照射范围在三维空间中构成一个圆锥体，

它离光越远，

它的尺寸就越大。

 

首先，我们需要引入Three.js的js文件

  •  
<script type="text/javascript" src="../build/three.js"></script>

 

在JS里最核心的功能就是

  •  
requestAnimationFrame();

requestAnimationFrame 

会把每一帧中的所有DOM操作集中起来，

在一次重绘或回流中就完成，

并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，

一般来说，

这个频率为每秒60帧。

 

在这里就可以进行物体的旋转

  •  
  •  
  •  
  •  
//X轴旋转mesh.rotation.x += 0.005 * Math.PI;//mesh.rotation.y += 0.005 * Math.PI;//mesh.rotation.z += 0.005 * Math.PI;

 

全部代码为：

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>No.14 Three.js做一个可以动起来的立方体</title><style>body{margin: 0px;overflow: hidden;        }</style></head><body><script type="text/javascript" src="../build/three.js"></script><script type="text/javascript">
var container;var camera, scene, renderer;
var mesh;
    main();    render();
//主函数function main(){
        //添加一个div元素        container = document.createElement('div')        document.body.appendChild(container);
        //创建一个新场景        scene = new THREE.Scene();
        //添加一个透视相机        camera = new THREE.PerspectiveCamera(30,window.innerWidth/window.innerHeight, 1, 1000);
        camera.position.set(50, 350, 100);//设置相机位置        camera.lookAt(new THREE.Vector3(0,0,0));//让相机指向原点
//渲染//antialias:true增加抗锯齿效果        renderer = new THREE.WebGLRenderer({antialias:true});
//设置窗口背景颜色为黑        renderer.setClearColor(new THREE.Color(0xffffff));
//设置窗口尺寸        renderer.setSize(window.innerWidth, window.innerHeight);
//将renderer关联到container，这个过程类似于获取canvas元素        container.appendChild(renderer.domElement);


//平行光源var directionalLight = new THREE.DirectionalLight( 0x0000ff );        directionalLight.position.set( 1, 0.75, 0.5 ).normalize();        scene.add( directionalLight );
        cube();    }



//创建立方体function cube(){
//创建立方体var geo = new THREE.BoxGeometry(15, 15 ,40 );
//创建材料var mat = new THREE.MeshLambertMaterial({color:0x0000FF,wireframe:false        });
//创建网格模型        mesh = new THREE.Mesh(geo, mat);
//设置坐标        mesh.position.set(0, 20, -40);
//向场景        scene.add(mesh);    }
//渲染function render(){
        requestAnimationFrame(render);
//X轴旋转    mesh.rotation.x += 0.005 * Math.PI;//mesh.rotation.y += 0.005 * Math.PI;//mesh.rotation.z += 0.005 * Math.PI;        renderer.render(scene, camera);    }</script>
</body></html>

 

完整的源代码可以登录【华纳网】下载。

 

https://www.worldwarner.com/






 





免责声明：本文仅代表作者个人观点，与华纳网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
精彩推荐