一、 学习参考书籍
二、 3D编程工具介绍
在线网址：https://www.code3dgames.com/3de/注意点：网址可以打开，但是有一点慢。打开之后，运行还是挺快的。3DE代码编辑器是《3D少儿游戏编程》一书配套的在线编程工具，专为初学者设计，用于学习JavaScript和Three.js等3D开发技术。其核心特点如下：通过浏览器访问http://code3Dgames.com/即可使用，无需安装环境。首次联网后，编辑器自动安装至浏览器，断网后仍可继续编辑。三、第一章学习源程序
1. 创建你的第一个编程项目
要创建新项目，先要在浏览器右上方找到菜单按钮，就是那个画着三条短横线的按钮。单击该按钮，会出现一个菜单，然后在菜单上单击“NEW”命令，如图1.2所示。单击“NEW”命令后，会出现一个如图1.3所示的小窗口。现在，在“NAME”右侧的白色输入框中，输入项目的名字“Shape”。然后继续向右边看，你可以看到一个“SAVE”按钮。单击这个“SAVE”按钮，新项目就创建好了。
Frank D. Luna. DirectX 9.0 3D 游戏开发编程基础[M]. 北京: 清华大学出版社, 2007.
在浏览器的最左边有一串编号。每一行程序代码都有一个编号，从1开始计数，称为“行号”。现在就让我们从第22行开始伟大的编程探险。找到第22行了吗？它就在START CODING ON THE NEXT LINE那一行的下面。如图1.4所示。
Frank D. Luna. DirectX 9.0 3D 游戏开发编程基础[M]. 北京: 清华大学出版社, 2007.
2. 创建球体
// ******** START CODING ON THE NEXT LINE ********var shape=new THREE.SphereGeometry(200,20,15);var cover=new THREE.MeshNormalMaterial(flat);var ball=new THREE.Mesh(shape,cover);scene.add(ball);ball.position.set(-250,250,-250);
3. 创建立方体
var shape=new THREE.CubeGeometry(300,100,20);var cover=new THREE.MeshNormalMaterial(flat);var box=new THREE.Mesh(shape,cover);scene.add(box);box.rotation.set(0.5,0.5,0);box.position.set(250,250,-250);
4. 创建多面体
var shape=new THREE.CylinderGeometry(1,100,100,4);var cover=new THREE.MeshNormalMaterial(flat);var tube=new THREE.Mesh(shape,cover);scene.add(tube);tube.rotation.set(0.5,0,0);tube.position.set(250,-250,-250);
5. 创建平面
//Plane创建平面var shape=new THREE.PlaneGeometry(300,100);var cover=new THREE.MeshNormalMaterial(flat);var ground=new THREE.Mesh(shape,cover);scene.add(ground);ground.rotation.set(0.5,0,0);ground.position.set(-250,-250,-250);
6. 创建甜甜圈
//TorusGeometry甜甜圈//var shape=new THREE.TorusGeometry(100,25,8,25);var shape=new THREE.TorusGeometry(100,25,8,25,5);var cover=new THREE.MeshNormalMaterial(flat);var donut=new THREE.Mesh(shape,cover);scene.add(donut);donut.rotation.set(0.5,0,0);donut.position.set(-250,250,0);
7. 立方体运动
//将形状动起来var clock=new THREE.Clock();function animate(){ requestAnimationFrame(animate); var t=clock.getElapsedTime(); box.rotation.set(t,2*t,0); renderer.render(scene,camera);}animate();
未完待续... ...
