用的《Three.js开发指南》这本书，书中提供的github代码有一处小错误，在github源码的36行renderer.setClearColorHex(); 这个方法如果引用的three.js版本不对的话是没法用的，我用的目前最新的是直接报错的，需要改成renderer.setClearColor(); 但是这句代码在源码中删掉没有太大的影响因为后面接了一个 renderer.setClearColor(new THREE.Color(0xEEEEEE)); 然后是完整的代码
<!DOCTYPE html> <html> <head> <title>Example 01.02 - First Scene</title> <script src="../../resource/jquery-3.5.1.js"></script> <script src="../../resource/three.js"></script> <style> body { /* 设置页边空白和溢出页面时操作 */ margin: 0; overflow: hidden; } </style> </head> <body> <div id="WebGL-output"> </div> <!-- js代码 --> <script type="text/javascript"> // 初始化 function init() { // 建立一个场景来容纳 物件、相机和光线 var scene = new THREE.Scene(); // 建一个相机，表示视向 透视投影照相机Perspective Camera，构造函数THREE.PerspectiveCamera(fov, aspect, near, far) /* * THREE.PerspectiveCamera(fov, aspect, near, far) * fov 可视角度 * aspect 实际窗口纵横比 * near 近处裁面距离 * far 远处裁面距离 * 裁面可以理解为，用一个切面去截取3d图形，near只能看见切面后面的图像，far只能看见切面前面的图像， */ var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000); // 创建渲染函数THREE.WebGLRenderer（补充一下参数） var renderer = new THREE.WebGLRenderer({ antialias:true,//开启反锯齿 alpha: true,//是否能够设置背景透明 precision:'highp',//设置着色精度 highp,mediump,lowp premultipliedAlpha:false,//表示是否可以设置像素深度（图片） preserveDrawingBuffer:true,//表示是否保存绘图缓冲 maxLight:300,//最大灯光数目 stencil:false//是否使用模板字体和图案 }); renderer.setClearColor(new THREE.Color(0xEEEEEE)); renderer.setSize(window.innerWidth, window.innerHeight); // 显示三维坐标轴，括号内是长度 var axes = new THREE.AxisHelper(20); scene.add(axes); // 整一个plane出来 var planeGeometry = new THREE.PlaneGeometry(70, 20);//物理属性 长宽参数 var planeMaterial = new THREE.MeshBasicMaterial({color: 0xC0C0C0});//飞机场的颜色 var plane = new THREE.Mesh(planeGeometry, planeMaterial); // plane的旋转角度以及位置坐标轴 plane.rotation.x = -0.5 * Math.PI; plane.position.x = 15; plane.position.y = 0; plane.position.z = 0; // 将plane显示出来 scene.add(plane); // 建一个cube var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);//长宽高 var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});//wireframe true显示构造的线条，false不显示骨骼，纯颜色拼块 var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); // cube的位置 cube.position.x = -4; cube.position.y = 3; cube.position.z = 0; // 将cube显示出来 scene.add(cube); // 建一个sphere（球） var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);//第一个参数是半径，后面两个好像是三角形的水平密度和垂直密度 var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});//同wireframe var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // sphere位置 sphere.position.x = 20; sphere.position.y = 4; sphere.position.z = 2; // 添加sphere scene.add(sphere); // 摄像机的拍摄角度，视角 camera.position.x = -30; camera.position.y = 40; camera.position.z = 35; camera.lookAt(scene.position); // 将渲染的结果添加到html页面中 document.getElementById("WebGL-output").appendChild(renderer.domElement); // 页面渲染 renderer.render(scene, camera); } window.onload = init; </script> </body> </html>运行的效果如下： 代码调试过了，但是感觉除了抗锯齿有点改变其他反而不如原来的样子，所以就加个抗锯齿放上去了。
