1，介绍
该示例使用的是 r95版本Three.js库。将创建一个场景并添加几何体，动态添加几何体，删除几何体，获取场景所有对象，添加坐标轴。效果图如下：
引入文件：
three.js // threejs是建立在WebGL API基础上的高级API
dat.gui.js // dat.GUI提供操作界面，方便进行调试
OrbitControls.js // 轨道控制器，用于控制场景中的对象旋转平移
主要组件说明：
摄像机：决定屏幕上哪些东西需要渲染
渲染器：基于摄像机和场景，调用底层api执行绘制工作
对象：它们是主要渲染的对象，如方块、球体，坐标轴
2，示例源码：
<!DOCTYPE html> <html> <head> <title>使用threejs创建几何体添加坐标轴</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/dat.gui.js"></script> <script type="text/javascript" src="../libs/OrbitControls.js"></script> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <div id="dom"></div> <script type="text/javascript"> var camera; var renderer; function init() { // 创建一个场景，它将包含我们所有的元素，如物体，相机和灯光。 var scene = new THREE.Scene(); // 创建一个摄像机，它定义了我们正在看的地方 camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 将摄像机对准场景的中心 camera.position.x = 10; camera.position.y = 50; camera.position.z = 90; camera.lookAt(scene.position); var orbit = new THREE.OrbitControls(camera); // 创建一个渲染器并设置大小，WebGLRenderer将会使用电脑显卡来渲染场景 renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0xEEEEEE)); renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器需要阴影效果 renderer.shadowMapEnabled = true; // 在屏幕上显示坐标轴 var axes = new THREE.AxisHelper(100); scene.add(axes); // 将平面添加到场景中 var plane = createPlaneGeometryBasicMaterial(); scene.add(plane); // 将立方体添加到场景中 var cube = createBoxGeometryBasicMaterial(); scene.add(cube); // 将球体添加到场景中 var sphere = createSphereGeometryLambertMaterial(); scene.add(sphere); // 将呈现器的输出添加到HTML元素 document.getElementById("dom").appendChild(renderer.domElement); // 使用GUI调试库 var controls = new function () { this.numberOfObjects = scene.children.length; // 随机生成一个立方体 this.addCube = function () { // 将立方体添加到场景中 scene.add(createBoxGeometryLambertMaterial()); // 更新界面中的对象数量 this.numberOfObjects = scene.children.length; }; // 移除场景中的对象，移除添加到场景中的最后一个对象 this.removeCube = function () { // 获取场景中的所有对象 var allChildren = scene.children; var lastObject = allChildren[allChildren.length - 1]; // 只移除THREE.Mesh对象 if (lastObject instanceof THREE.Mesh && lastObject != plane && lastObject != cube && lastObject != sphere) { scene.remove(lastObject); // 更新界面中的对象数量 this.numberOfObjects = scene.children.length; } }; // 打印场景中的所有对象 this.outputObjects = function () { console.log(scene.children); } }; var gui = new dat.GUI(); // 添加事件 gui.add(controls, 'addCube'); gui.add(controls, 'removeCube'); gui.add(controls, 'outputObjects'); // 监听变量 gui.add(controls, 'numberOfObjects').listen(); // 启动动画 renderScene(); // 创建一个随机大小颜色的立方体 function createBoxGeometryLambertMaterial() { var cubeSize = Math.ceil((Math.random() * 3)); // 创建一个立方体并设置大小 var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize); // MeshBasicMaterial设置材质 var cubeMaterial = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff, wireframe: true // 线性 }); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); // 设置该物体投射阴影 cube.castShadow = true; // 设置该立方体的名称 cube.name = "cube-" + scene.children.length; // 设置立方体位置 cube.position.x = -30 + Math.round((Math.random() * 60)); cube.position.y = Math.round((Math.random() * 5)); cube.position.z = -20 + Math.round((Math.random() * 20)); return cube; } // 创建一个基础材质的立方体 function createBoxGeometryBasicMaterial() { // 创建一个立方体并设置大小 var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true // 线性 }); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); // 设置立方体位置 cube.position.x = -10; cube.position.y = 3; cube.position.z = 0; return cube; } // 创建一个平面 function createPlaneGeometryBasicMaterial() { // 创建地平面并设置大小 var planeGeometry = new THREE.PlaneGeometry(100, 70); var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc }); var plane = new THREE.Mesh(planeGeometry, planeMaterial); // 设置平面位置并旋转 plane.rotation.x = -0.5 * Math.PI; plane.position.x = 0; plane.position.y = 0; plane.position.z = 0; return plane; } // 创建一个球形几何体 function createSphereGeometryLambertMaterial() { // 创建一个球体 var sphereGeometry = new THREE.SphereGeometry(4, 20, 20); var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x7777ff, wireframe: true // 线性 }); var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // 位置范围 sphere.position.x = 20; sphere.position.y = 4; sphere.position.z = 2; return sphere; } function renderScene() { orbit.update(); // 使用requestAnimationFrame函数进行渲染 requestAnimationFrame(renderScene); renderer.render(scene, camera); } // 渲染的场景 renderer.render(scene, camera); } window.onload = init; // 随着窗体的变化修改场景 function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } // 监听窗体调整大小事件 window.addEventListener('resize', onResize, false); </script> </body> </html>
