1、介绍WebGL基础。
2、介绍WebGL中的骑兵Three.js。
3、了解Three.js的简单实例。
为了方便实验，我们提供了2个简单的框架供你使用。你只要改变其中的一些代码或者参数，就能够得到实验的结果。第一个框架的效果是显示一个绿色的正方体，你可以在【初级教程\chapter1\1-2.html】中找到。
在线答疑
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>canvas { width: 100%; height: 100% }</style>
<script src="js/three.js"></script>
</head>
<body>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material); scene.add(cube);
camera.position.z = 5;
function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
它的效果如下所示,注意不同版本的three.js，默认的背景色可能不一样，新版本的背景色可能是黑色：
这个旋转的立方体算我们踏入WebGL这个神奇的世界的开始。借助于three.js，我们并没有写太多的代码就完成了这个示例。现在，我们来分析它。
在Three.js中，要渲染物体到网页中，我们需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。
记住关建语句：有了这三样东西，我们才能够使用相机将场景渲染到网页上去。
创建这三要素的代码如下：
var scene = new THREE.Scene(); // 场景 var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机 var renderer = new THREE.WebGLRenderer(); // 渲染器 renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度 document.body.appendChild(renderer.domElement);
在Threejs中场景就只有一种，用THREE.Scene来表示，要构件一个场景也很简单，只要new一个对象就可以了，代码如下：
var scene = new THREE.Scene();
场景是所有物体的容器，如果要显示一个苹果，就需要将苹果对象加入场景中。
另一个组建是相机，相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样，人站在不同位置，抬头或者低头都能够看到不同的景色。
场景只有一种，但是相机却又很多种。和现实中一样，不同的相机确定了呈相的各个方面。比如有的相机适合人像，有的相机适合风景，专业的摄影师根据实际用途不一样，选择不同的相机。对程序员来说，只要设置不同的相机参数，就能够让相机产生不一样的效果。
在Threejs中有多种相机，这里介绍两种，它们是：
透视相机（THREE.PerspectiveCamera）、这里我们使用一个透视相机，透视相机的参数很多，这里先不详细讲解。后面关于相机的那一章，我们会花大力气来讲。定义一个相机的代码如下所示：（已经迫不及待想看看相机的参数了，点这里）
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
最后一步就是设置渲染器，渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。这里我们定义了一个WebRenderer渲染器，代码如下所示：
var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
注意，渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，这样渲染的结果就能够在页面中显示了。
那现在，我们将一个物体添加到场景中：
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
代码中出现了THREE.CubeGeometry，THREE.CubeGeometry是什么东东，他是一个几何体，几何体由什么组成，已经不是本课的主要内容了，后面的课程我们会详细的学到。不过这里你只需要知道CubeGeometry是一个正方体或者长方体，究竟是什么，由它的3个参数所决定，cubeGeometry的原型如下代码所示：
CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
width：立方体x轴的长度
height：立方体y轴的长度
depth：立方体z轴的深度，也就是长度
想一想大家就明白，以上3个参数就能够确定一个立方体。
剩下的几个参数就要费解和复杂一些了，不过后面我们会自己来写一个立方体，到时候，你会更明白这些参数的意义，这里你可以将这些参数省略。
终于到了最后一步，这一步做完后，就可以该干嘛干嘛去了。
渲染应该使用渲染器，结合相机和场景来得到结果画面。实现这个功能的函数是
renderer.render(scene, camera);
渲染函数的原型如下：
render( scene, camera, renderTarget, forceClear )
各个参数的意义是：
scene：前面定义的场景
camera：前面定义的相机
renderTarget：渲染的目标，默认是渲染到前面定义的render变量中
forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。
渲染有两种方式：实时渲染和离线渲染 。
先看看离线渲染，想想《西游降魔篇》中最后的佛主，他肯定不是真的，是电脑渲染出来的，其画面质量是很高的，它是事先渲染好一帧一帧的图片，然后再把图片拼接成电影的。这就是离线渲染。如果不事先处理好一帧一帧的图片，那么电影播放得会很卡。CPU和GPU根本没有能力在播放的时候渲染出这种高质量的图片。
实时渲染：就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染。下面就是一个渲染循环：
function render() {
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
其中一个重要的函数是requestAnimationFrame，这个函数就是让浏览器去执行一次参数中的函数，这样通过上面render中调用requestAnimationFrame()函数，requestAnimationFrame()函数又让rander()再执行一次，就形成了我们通常所说的游戏循环了。
如不能理解游戏循环，请在这里提问。
Three.js中的场景是一个物体的容器，开发者可以将需要的角色放入场景中，例如苹果，葡萄。同时，角色自身也管理着其在场景中的位置。
相机的作用就是面对场景，在场景中取一个合适的景，把它拍下来。
渲染器的作用就是将相机拍摄下来的图片，放到浏览器中去显示。他们三者的关系如下图所示：
第一个框架是将所有代码在一段脚本中完成，当逻辑复杂一点后，就比较难读懂。所以，我们将其按照功能分解成函数，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="js/Three.js" data-ke-src="js/Three.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
<script>
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.x = 0;
camera.position.y = 1000;
camera.position.z = 0;
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
camera.lookAt({
x : 0,
y : 0,
z : 0
});
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
light.position.set(100, 100, 200);
scene.add(light);
}
var cube;
function initObject() {
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors} );
var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );
// 线的材质可以由2点的颜色决定
var p1 = new THREE.Vector3( -100, 0, 100 );
var p2 = new THREE.Vector3( 100, 0, -100 );
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.colors.push( color1, color2 );
var line = new THREE.Line( geometry, material, THREE.LinePieces );
scene.add(line);
}
function render()
{
renderer.clear();
renderer.render(scene, camera);
requestAnimationFrame(render);
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
render();
}
</script>
</head>
<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>
大概了解一下就可以了，它只是将框架一的代码，放到了不同的函数中，最终通过threeStart()函数调用而已。这段比较规范的代码在以后的例子中可能会用到。
本章即将结束，我相信，你应该学到了一些东西，至少你能写一个html，并且加上three.js，让它运行起来。非常高兴为你献上了本节的内容。 快点收藏本网站吧，因为“再过五十年我就是古董了，所以你趁现在赶紧好好收藏我吧”。
如果，你觉得本章不错，欢迎你分享到你的QQ空间，或者微博里面去。
最近微软的Babylon比较多，这是和Three.js一样流行，出名的一个3D框架，多学点总是有好处的，可以互相借鉴设计思路。 有兴趣的同学，可以看一下Babylon.js 课程不断更新中
给WebGL中文网团队的女程序员"小果妹妹"发一个鸡腿吧，微信扫一扫赞赏，感谢。
亲爱的读者，如果你觉得WebGL中文网的课程不错，您可以购买《WebGL中文网视频课程》 课程支持我们哦,购买后记得给我们好评哦！我们强烈建议您不要在iphone上的网易云课堂软件中购买，这样苹果会收取31%左右的服务费，虽然这是明码标价，我们也表示认可和理解，具体选择权在您自己了。
感谢大家的支持，下面是课程的截图之一
没有人在这个网站学习么？
你好，WebGL中文网上线以来，已经有很多攻城狮学习过，这可能是目前最好的WebGL教程网了，所以访问的人，还是很多的。
今天初次接触webGL，看了两章了，希望自己加油、、
老是提three.js里有报错。这怎么解决啊，最简单的例子都出不来
一般来说，下载我们的例子直接运行是没有错的。而一直报错，可以看报错的原因是什么，按F12键可以进入调试模式，一般可以从报错的提示中发现原因，祝您好运。
报错应该是你的three.js文件位置和他设置的不一样吧
老师你好，我想知道怎么才能在webstorm里，会有three.js的代码提示，我跟着视频做的时候都要一个个字母敲出来，太长的根本记不下来
这个还是比较容易的，可以看一下这里的设置http://jingyan.baidu.com/album/cd4c297903da17756e6e6027.html?picindex=1。你目前已该还是初学者，需要更多的努力哦，时间不等人，你的梦想、追求不等人。
我之前没有看过那个threejs 的书，直接看这个也可以吗，其中的那些基本元素我需要看书吗
Refused to execute script from 'https://raw.github.com/mrdoob/three.js/master/build/three.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
报上面错的解决方法：把
https://raw.github.com/mrdoob/three.js/master/build/three.js改为https://rawgithub.com/mrdoob/three.js/master/build/three.js
老师你好。我想问一下：为什么requestAnimationFrame()函数既可以放在render()的第一行，也可以放在最后一行？不是应该只有放在最后一行才是正确的吗？为什么把它放在function render()的 第一行的时候，render()的后续代码会执行？
这个问题问得很好。requestAnimationFrame()函数实际上可以放到render函数中的任何一行，而不是说非要放到第一行，您认为放在第一行，render中其他的代码不能执行，这是错误的，requestAnimationFrame函数并不是一个return语句，并没有退出render函数的功能。 requestAnimationFrame函数表示下一帧将执行render函数，不是马上执行render函数的意思。
老师您好，这段代码在运行时会提示Uncaught TypeError: Cannot read property 'lookAT' of undefined？
请问这是什么原因呢？
这个问题重点是undefined这个词，表示调用lookAt这个函数前，这个对象没有定义哦，请仔细检查一下代码。
嘿嘿
渲染一根线，为什么要配置光源?可以不配么？
大拿们你好，我是一个JAVA开发人员，之前从未了解3D，WebGl,three.js这块，这次是由于项目需要，需做一个人工交互的场景，其中就是通过问题以及答案给出相应的3D效果出来；
哈哈，说了这么多，其实就是要了解下什么是游戏循环。。。顺便请问一下，我的这个需求3D这块你妹这边有什么好的建议没有？比如说从哪方面入手。。。。
我chrome控制台报错啊：“
THREE.WebGLRenderer 73
three.js:21432 THREE.WebGLRenderer: Error creating WebGL context.
THREE.WebGLRenderer @ three.js:21432
initThree @ testDemo1.html:11
threeStart @ testDemo1.html:71
onload @ testDemo1.html:95
three.js:25239 Uncaught TypeError: Cannot read property 'getExtension' of null
at THREE.WebGLExtensions.get (three.js:25239)
at new THREE.WebGLRenderer (three.js:21438)
at initThree (testDemo1.html:11)
at threeStart (testDemo1.html:71)
at onload (testDemo1.html:95)
get @ three.js:25239
THREE.WebGLRenderer @ three.js:21438
initThree @ testDemo1.html:11
threeStart @ testDemo1.html:71
onload @ testDemo1.html:95
”
将“WebGLRenderer”改成“CanvasRenderer”还是报错：“THREE.CanvasRenderer has been moved to /examples/js/renderers/CanvasRenderer.js”
这怎么办啊？？
什么是游戏循环
mack一下，第一次学习three这个教程~~~
"已经迫不及待想看看相机的参数了，点这里" 链接呢???
游戏循环? 第一次听说这个说法. 这个不应该是函数内部调用自身的"死循环"吗?
老师您好，我在使用的时候出现了这个异常：
THREE.WebGLRenderer 87dev
three.js:20859 THREE.WebGLRenderer: Error creating WebGL context.
WebGLRenderer @ three.js:20859
(anonymous) @ image.jsp:31
three.js:20452 Uncaught TypeError: Cannot read property 'getExtension' of null
at Object.get (three.js:20452)
at initGLContext (three.js:20873)
at new WebGLRenderer (three.js:20921)
at image.jsp:31
能不能帮忙看一下
之前学习c++时学过opengl 而后转行了java 现在变成了前端 想学一下webgl 毕竟学过， 第二课第一个实例，完整复制代码，运行报GLDemo1.html:15 Uncaught TypeError: Cannot read property 'appendChild' of null at GLDemo1.html:15 错误，我的做法是引入jquery，把代码放入 $(document).ready(function());的function内。
哇，老师，你这个demo有许多错误，都是参数未定义。运行时候老出错，initCamera()方法中的width和height哪里来的？initObject()方法中的color1，color2哪里来的？这两个都还是小问题，自己改一下就行，但是后面还有个在72行var line = new THREE.Line( geometry, material, THREE.LinePieces );中的material这个参数是什么呀，在哪定义的
老师你好：为什么在实时渲染时，即使画面中什么也没有改变，也需要重新渲染？
我在函数外用var test = document.getElementById('canvas-frame'),test的值为何会是null，函数里的clientWidth,clientHeight就会报错，函数里只能写死document.getElementById('canvas-frame')去获取宽度和高度吗
感觉如果把渲染器理解成相机的取景范围，更好理解一些，因为场景可以很大，但是取哪些内容也就是渲染哪些内容，是由相机的取景范围决定的。
准确的说是视景体裁剪，3D到2D屏幕的映射，其实你的理解也没问题，只要大致一样就ok了。
THREE.LinePieces no longer supported.
项目代码是否开源？因为有些内容已经过时了。
还有上面叫徐怀林的那个，你不懂就不要说话了。
Three.js是一个开源项目，底层原理非常复杂，我们也为Three.js贡献了一些源码。 要学好Three.js 自学还是有一定难度的，系统的学习更好。
我觉得可以增加用户回答问题的功能，方便大家共同切磋，并且也能减少网站工作人员的工作压力。还有本站的three.js版本有点低了，更新太快。虽然没有导致代码出错，但是学习方向可能会有些许偏差，建议及时更新，就像该段代码中的linpieces现已改为linesegments。还是要感谢大神们留下来的学习笔记。继续加油学习去了。
是的，感谢你的意见，一方面我们会尽快更新，另一方面需要举一反三，本质上理解linpieces和linesegments没有区别，只是换了一个单词，其意义未变。就像一个变量，一个人用i，一个人后来觉得j好，但是其实意义没变。希望大家有解决这种问题的决心，不经过思考的学习，一定是不好的。
老师你好，我想问下，为什么我用示例二的代码在页面上没有效果呢？用的最新版的three.js，页面代码也一样，
看F12键有没有报错，不同版本的api有一些轻微的变化。
那个循环就是js的回调吧。感觉不错，慢慢学习。
回调和帧循环可不是一样的。回调可以是函数运行完成之后触发。但是帧循环是使用requestAnimationFrame系统函数触发，requestAnimationFrame是当主线程空闲的时候，尽可能的被触发，这样可以节省系统的很多资源哦
老师你好，为什么我用示例二的代码在页面上没有效果,也不报错
老师您好,请问为什么重构之后, 就什么都不显示了呢?
实时渲染时，有没有可能由于画面内容太多，在render还没执行完时requestAnimationFrame就触发了？如果会的话，需要怎么解决这个问题？
不会的。我们分析代码
function animate() {
render();
requestAnimationFrame( animate );
}
可以看出要render执行完成后，才会再一次调用requestAnimationFrame，这个函数保证在cpu空闲的时候，调用animate，所以，不是说没有执行完render，就执行requestAnimationFrame了。注意requestAnimationFrame执行一次，只会执行一个render函数。
有点蒙圈，在哪里写代码
不是很理解，是问编程工具吗？webstrom、sublime、virtual studio都是可以的啊，而且有很好的代码提示效果。
老师，你好我想请教一下var cube = new THREE.Mesh(geometry, material); scene.add(cube);里Mesh()方法的用法，网上找不到相应资料
刚刚开始学习，先感谢一下这样的学习平台
虽然只有一句话，我们也不相识。只要课程对你有帮助，哪怕节约你半天的时间，我们也是快乐的。不过，人生在世，时间很短，学习知识就要学习精通，以此共勉。
您好 我copy了第二个重构案例 发现报错 第一行打印出THREE.WebGLRenderer 91dev
第二行有打印THREE.Line: parameter THREE.LinePieces no longer supported. Created THREE.LineSegments instead. 都是three.js里面console出来的 查了一下说是参数三不支持行 是因为我three.js下载的问题吗？ 谢谢
跟楼上一样，我也copy了第二个重构案例，什么东西都没有显示，空白的页面？？第一个案例有个绿色正方体出现
跟楼上一样，copy了第二个函数代码运行不了
是three版本的问题吗？？
我也试验了第二个代码，按教程写的也是不能显示，后来把looAt删掉，
camera.lookAt({
x : 0,
y : 0,
z : 0
});并且把
geometry.vertices.push(p1);
geometry.vertices.push(p1);改成
geometry.vertices.push(p1,p2);才可以显示，请教老师这是为什么
这种写法在最新的已经不能用了。。
camera.lookAt({ x : 0, y : 0, z : 0});
刚刚我查了下源码
https://github.com/mrdoob/three.js/blob/master/src/core/Object3D.js
311行
return function lookAt( x, y, z ) {
if ( x.isVector3 ) {
vector.copy( x );
} else {
vector.set( x, y, z );
}
if ( this.isCamera ) {
m1.lookAt( this.position, vector, this.up );
} else {
m1.lookAt( vector, this.position, this.up );
}
this.quaternion.setFromRotationMatrix( m1 );
};
camera.lookAt( 0, 0, 0}); 要用这种写法
或者
camera.lookAt(new THREE.Vector3(0,0,0));
解释说明的倒数第三行的rander()应该是render()吧?
嗯，是的，拼写错误了。谢谢指正。
THREE.LinePieces 不支持，最新版本改为THREE.LineSements错误提示three.js:25518 THREE.Line: parameter THREE.LinePieces no longer supported. Use THREE.
LineSegments instead.
是的，一般来说api变化得越快说明代码开放团队维护得越好，但是原理不变的，大家一定要学好原理。我们特别重视原理的教学。
老师您好，我编写第二个框架 报错
直接复制进来都报错
THREE.Material: 'vertexColors' parameter is undefined.
注意three.js的版本，请使用我们提供的版本，如果使用最新版需要看文档或者源码，看函数变了没有。谢谢。
看到第二章有种莫名的感动~~~
看了问题 将
THREE.LinePieces
改成了下面的var line = new THREE.Line( geometry, material, THREE.LineSements );
但是线还是没有画出来 是因为什么啊
我的THREE.js 版本为100
在版本号101中：
var line = new THREE.Line( geometry, material, THREE.LineSegments );camera.lookAt(
0,
0,
0
);需修改上面两处才能正常运行
你好，我现在是使用coscos creator制作微信小游戏，由于想加入3D元素，所以想使用three.js,但是不知道这两者是否能够相结合
为什么不用es6标准来写呢?
width,height在函数中默认全局是声明,看的好别扭.
camera.lookAt({ x : 0, y : 0, z : 0});
让相机 看向坐标 0，0，0
--
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
camera.up 是控制什么的 ，修改 相机的坐标系吗 ？？谢谢！
var line = new THREE.Line( geometry, material, THREE.LineSegments );camera.lookAt(
0,
0,
0
);版本是官网下的105，改了这两处，浏览器也不报错了，还是什么都没有显示。例1用同样的105版本可以正常显示，想问问老师怎么办。谢谢！
48楼提问的，自己找到问题解决了 ：）
<script src="js/three.js" data-ke-src=""></script>请问其中的 data-ke-src 属性表示什么意思？没见过
老师您好，第二个案例好像有个问题，我运行的时候报了个
THREE.WebGLRenderer 107dev
three.js:26766 THREE.Line: parameter THREE.LinePieces no longer supported. Use THREE.LineSegments instead.
这个应该怎么解决呢？
看了下 貌似是要把THREE.Line()方法改成 THREE.LineSegments()， 而且只需要前2个参数就可以了
评论不做个热门 和 翻页吗？
three.js版本109dev
例子1中浏览器warn提示
THREE.WebGLRenderer: OVR_multiview2 extension not supported.页面不显示内容
你好, 第二个demo, 执行报错
将 `var line = new THREE.Line( geometry, material, THREE.LinePieces )` 改为
`var line = new THREE.LineSegments( geometry, material);`
执行成功, 但是显示空包.
用的97的版本，和大家遇到了同样的问题，看了单元二里面的demo是没有问题的。大家在上面都已经把解决方案贴出来了，谢谢大家。下面的人也可以看下上面人的评论
THREE.WebGLRenderer 97
版本需要改两个地方才可以运行老师的第二个demo
1) THREE.LinePieces改为THREE.LineSegments
2)camera.lookAt({x:0,y:0,z:0})改为camera.lookAt(new THREE.Vector3(0,0,0));;
vue环境下可以使用吗
今天第一次来学习，希望加个回到顶部的功能，一篇文章下来挺长的，还得拖着鼠标回到顶部,没有登陆不能提交评论，登录后竟然没有在当前页而是跳到个人中心了
THREE.WebGLRenderer 103
Three.js:26349 THREE.Line: parameter THREE.LinePieces no longer supported. Use THREE.LineSegments instead.
老师，我想问你，如果放实物比如像一个苹果之类，是不是需要3D设计师先做好一个3D模型的苹果，然后我们再引进页面代码里面。那么引进来的3D模型有什么格式或者大小限制吗？
互勉，加油，一定会学好
最新版本的ThreeJS已经不再支持第二段代码的一些写法，大家可以把lookAt的部分用下面的代码运行：
camera.lookAt(new THREE.Vector3(0,0,0));
亲测可用
第一个框架，var geometry = new THREE.CubeGeometry(1,1,1); 运行报错，需改成var geometry = new THREE.BoxGeometry(1,1,1);
为何第二个例子，我写出来，是一片黑，啥效果都没有
THREE.Geometry()用不了了都 ，能不能更新一下
THREE.Geometry()用不了了都 ，能不能更新一下
2022更新一下这个THREE.Geometry()需要改成BoxGeometry，Three.js版本138dev，
var geometry = new THREE.BoxGeometry (1,1,1);
老师您好！请及时更新教程文档，不然学习起来很麻烦，版本不能够向下兼容，各种方法报错，这些问题都不考虑吗？如果进行了版本升级，，我的历史项目还要改方法重写，这些是不是要在官方文档体现一下呢？毕竟是官方文档呢，不清不楚怎么推广？
看起来，这个教程里有些代码已经失效了，要用新的代码了
Copyright 2012-2021 WebGL中文网 版权所有
老师微信
微信公众号
答疑老师一(1805691606)
答疑老师(1442905731),如老师不在，可通过下方微信联系
WebGL中文网群一(348344876)