发布时间： 2022-11-03 15:47
本教程看心情更新，也许更着更着就放弃了，敬请谅解。
目前市面上3D技术越来越多，建模工具前有3DMax、U3D，也有国内用的较少，但是贼不错的Blender，大家根据自己经济条件去选即可。
Web端常用的3D技术，老牌的就是Three.js，也有新生代的Babylon，都是不错的选择。当然啦，adobeAIR也能做（Stage3D）,在此缅怀一下。
首先有条件的话搞个服务器，这里还是用的三丰云免费云服务器，免费虚拟主机在这里不适用就不介绍了，安装的Centos7版本，相关内容丢到服务器即可，其他教程已经讲过，不多说了。
接下来步入我们的第一章，初窥Three.js。
基本概念
三大组件
场景（Scene) 、相机（Camera)、渲染器（renderer）
场景是所有物体的容器，如要显示一个苹果，需要将苹果加入到场景中。
相机有多种，通过设置不同的相机参数，可以看到不一样的效果，相机决定了场景中哪个角度的景色会显示出来。
渲染器决定了渲染的结果应该画在页面的什么元素上面，以怎样的方式来绘制。
场景
var scene =newTHREE.Scene(); // 场景 |
var camera =newTHREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机 |
var renderer =newTHREE.WebGLRenderer(); // 渲染器 |
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度 |
document.body.appendChild(renderer.domElement); |
相机
var camera =newTHREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); |
渲染器
var renderer =newTHREE.WebGLRenderer(); |
renderer.setSize(window.innerWidth, window.innerHeight); |
document.body.appendChild(renderer.domElement); |
注意，渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，这样渲染的结果就能够在页面中显示了。
添加物体到场景中
var geometry =newTHREE.CubeGeometry(1,1,1); |
var material =newTHREE.MeshBasicMaterial({color: 0x00ff00}); |
var cube =newTHREE.Mesh(geometry, material); |
scene.add(cube); |
以上就是基本的展示，是不是比较简单？下节我们动手去做做。
