序

本文属于学习Three.js的入门教程本文通过实例介绍hello world和Line的实现。下面就不多说了。我们来看看详细的介绍。

你好世界

首先，使用hello world类型的例子，在这个例子中，我们首先用三个. js创建一个立方体

！doctype html html head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，user-scale=no，initial-scale=1.0，最大-scale=1.0，最小-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title script src=' http 3360 build/three . js '/script style body { margin 33600；}画布{ width : 100%；高度：100%；display:块；}/style/head body script//create scene var scene=new THREE。场景()；//设置摄像头(视野、显示口纵横比、近切面、远切面)var摄像头=新增三个。透视相机(75，window.innerWidth/window.innerHeight, 0.1，1000)；//renderer varrender=new three . webglrender()；//设置渲染器的高度和宽度。如果添加第三个值false，它将根据场景大小显示，并且render . setsize(window . inner width，window.innerheight，false)将按比例缩放。//将渲染器添加到html document . body . appendchild(renderer . DOM element)中；//BoxGeometry，它是一个包含立方体的所有顶点和填充面的对象。变化几何=新三。盒几何(1，2，1)；//对着色器使用meshebasicmaterial(meshebasicmaterial)，这里只绘制了一个绿色的varmaterial=new three . meshebasicmaterial({ color :0x 00 ffff })；//使用Mesh承载几何模型varcube=newthree.mesh(几何，材质)；//将模型添加到场景场景. add(cube)；//将相机沿z轴偏移5 camera . position . z=5；//设置一个动画函数var animation=function(){//每秒调用60次，即以每秒60帧的频率绘制场景。requestAnimationFrame(动画)；//console . log(cube . rotation)；//每次调用模型，沿xy轴的旋转为0.01 cube . rotation . x=0.01；cube . rotation . y=0.01；//使用渲染器渲染场景和相机。渲染(场景、相机)；};animate()；/script/body/htmlcode以上案例分析：

(1)首先介绍三. js的库文件，就像jq一样。

(2)创建场景(17行)

(3)创建相机，设置视野、宽高比、近切面、远切面(19行)

(4)创建一个渲染器，设置它的属性，并将其放置在dom中(第21-25行)

(5)创建一个立方体模型，并将其放入场景中(28-34)

(6)设置摄像机的位置(36行)

(7)设置一个动画功能，用渲染器渲染场景和摄像头，每秒60帧，显示出来，就变成动画了。

用三点画线

以上是绘制后显示的效果。

！doctype html html head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，user-scale=no，initial-scale=1.0，最大-scale=1.0，最小-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title script src=' http 3360 build/three . js '/script style body { margin 33600；}画布{ width : 100%；高度：100%；display:块；}/style/head body script//create scene var scene=new THREE。场景()；//设置摄像头(视野、显示口纵横比、近切面、远切面)var摄像头=新增三个。透视相机(75，window.innerWidth/window.innerHeight, 0.1，1000)；//设置相机的视点camera.position.set(0，0，100)；//设置相机的方位相机。看(新三。vector3 (0，0，0))；//renderer varrender=new three . webglrender()；//设置渲染器的高度和宽度。如果添加第三个值false，它将根据场景大小显示，并且render . setsize(window . inner width，window.innerheight，false)将按比例缩放。//将渲染器添加到html document . body . appendchild(renderer . DOM element)中；//定义线的基本材质。我们可以使用LineBasicMaterial(实线材质)和LineDashedMaterial(虚线材质)var material=new三。line basic Material({ color :00x 000 ff })；//用几何顶点或BufferGeometry设置几何，看名字就能知道顶点位置。一种是直接将数据保存在js中，另一种是保存在WebGL缓冲区中，保存在WebGL缓冲区中肯定效率更高。变化几何=新三。几何()；几何。顶点。推动(新三。Vector3(-10，0，0))；几何。顶点。推动(新三。Vector3(0，10，0))；几何。顶点。推动(新三。Vector3(10，0，0))；//使用Line方法初始化line var line=newthree.line(几何，材质)；//在场景中添加一行场景. add(line)；//使用渲染器渲染场景和相机渲染器. render(场景、相机)；/script /body /html与上一节相比，只有模型上的区别。这里先用线纹理方法设置线纹理，再用几何对象或缓冲区几何对象生成顶点坐标，最后调用线方法画线。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。