第1章 开启Threejs之旅(二)

1、介绍WebGL基础。

2、介绍WebGL中的骑兵Three.js。

3、了解Three.js的简单实例。

9、第一个框架

为了方便实验,我们提供了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,我们并没有写太多的代码就完成了这个示例。现在,我们来分析它。

1、三大组建

在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();

场景是所有物体的容器,如果要显示一个苹果,就需要将苹果对象加入场景中。

2、相机

另一个组建是相机,相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样,人站在不同位置,抬头或者低头都能够看到不同的景色。

场景只有一种,但是相机却又很多种。和现实中一样,不同的相机确定了呈相的各个方面。比如有的相机适合人像,有的相机适合风景,专业的摄影师根据实际用途不一样,选择不同的相机。对程序员来说,只要设置不同的相机参数,就能够让相机产生不一样的效果。

在Threejs中有多种相机,这里介绍两种,它们是:

透视相机(THREE.PerspectiveCamera)、这里我们使用一个透视相机,透视相机的参数很多,这里先不详细讲解。后面关于相机的那一章,我们会花大力气来讲。定义一个相机的代码如下所示:(已经迫不及待想看看相机的参数了,点这里)

 var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);


3、渲染器

最后一步就是设置渲染器,渲染器决定了渲染的结果应该画在页面的什么元素上面,并且以怎样的方式来绘制。这里我们定义了一个WebRenderer渲染器,代码如下所示:

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


注意,渲染器renderer的domElement元素,表示渲染器中的画布,所有的渲染都是画在domElement上的,所以这里的appendChild表示将这个domElement挂接在body下面,这样渲染的结果就能够在页面中显示了。

4、添加物体到场景中

那现在,我们将一个物体添加到场景中:

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个参数就能够确定一个立方体。

剩下的几个参数就要费解和复杂一些了,不过后面我们会自己来写一个立方体,到时候,你会更明白这些参数的意义,这里你可以将这些参数省略。

5、渲染

终于到了最后一步,这一步做完后,就可以该干嘛干嘛去了。

渲染应该使用渲染器,结合相机和场景来得到结果画面。实现这个功能的函数是

renderer.render(scene, camera);

渲染函数的原型如下:

render( scene, camera, renderTarget, forceClear )

各个参数的意义是:

scene:前面定义的场景

camera:前面定义的相机

renderTarget:渲染的目标,默认是渲染到前面定义的render变量中

forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除。

6、渲染循环

渲染有两种方式:实时渲染和离线渲染 。

先看看离线渲染,想想《西游降魔篇》中最后的佛主,他肯定不是真的,是电脑渲染出来的,其画面质量是很高的,它是事先渲染好一帧一帧的图片,然后再把图片拼接成电影的。这就是离线渲染。如果不事先处理好一帧一帧的图片,那么电影播放得会很卡。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()再执行一次,就形成了我们通常所说的游戏循环了。

如不能理解游戏循环,请在这里提问。

10、场景,相机,渲染器之间的关系

Three.js中的场景是一个物体的容器,开发者可以将需要的角色放入场景中,例如苹果,葡萄。同时,角色自身也管理着其在场景中的位置。

相机的作用就是面对场景,在场景中取一个合适的景,把它拍下来。

渲染器的作用就是将相机拍摄下来的图片,放到浏览器中去显示。他们三者的关系如下图所示:

11、第二个框架(重构)

第一个框架是将所有代码在一段脚本中完成,当逻辑复杂一点后,就比较难读懂。所以,我们将其按照功能分解成函数,代码如下:

<!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()函数调用而已。这段比较规范的代码在以后的例子中可能会用到。

12、结尾

本章即将结束,我相信,你应该学到了一些东西,至少你能写一个html,并且加上three.js,让它运行起来。非常高兴为你献上了本节的内容。 快点收藏本网站吧,因为“再过五十年我就是古董了,所以你趁现在赶紧好好收藏我吧”。

如果,你觉得本章不错,欢迎你分享到你的QQ空间,或者微博里面去。

13、扩展阅读 Babylon

最近微软的Babylon比较多,这是和Three.js一样流行,出名的一个3D框架,多学点总是有好处的,可以互相借鉴设计思路。 有兴趣的同学,可以看一下Babylon.js 课程不断更新中

给WebGL中文网团队的女程序员"小果妹妹"发一个鸡腿吧,微信扫一扫赞赏,感谢。

亲爱的读者,如果你觉得WebGL中文网的课程不错,您可以购买《WebGL中文网视频课程》 课程支持我们哦,购买后记得给我们好评哦!我们强烈建议您不要在iphone上的网易云课堂软件中购买,这样苹果会收取31%左右的服务费,虽然这是明码标价,我们也表示认可和理解,具体选择权在您自己了。

感谢大家的支持,下面是课程的截图之一

[1楼] goat** 2016-07-26 21:52

没有人在这个网站学习么?

WebGL中文网老师回答:

你好,WebGL中文网上线以来,已经有很多攻城狮学习过,这可能是目前最好的WebGL教程网了,所以访问的人,还是很多的。

[2楼] elle** 2016-08-26 16:31

今天初次接触webGL,看了两章了,希望自己加油、、

[3楼] zhao** 2016-09-12 17:46

老是提three.js里有报错。这怎么解决啊,最简单的例子都出不来

WebGL中文网老师回答:

一般来说,下载我们的例子直接运行是没有错的。而一直报错,可以看报错的原因是什么,按F12键可以进入调试模式,一般可以从报错的提示中发现原因,祝您好运。

[4楼] ice1** 2016-09-26 10:23

报错应该是你的three.js文件位置和他设置的不一样吧

[5楼] 1839** 2016-10-05 21:19

老师你好,我想知道怎么才能在webstorm里,会有three.js的代码提示,我跟着视频做的时候都要一个个字母敲出来,太长的根本记不下来

WebGL中文网老师回答:

这个还是比较容易的,可以看一下这里的设置http://jingyan.baidu.com/album/cd4c297903da17756e6e6027.html?picindex=1。你目前已该还是初学者,需要更多的努力哦,时间不等人,你的梦想、追求不等人。

[6楼] 王红12** 2016-10-22 15:11

我之前没有看过那个threejs 的书,直接看这个也可以吗,其中的那些基本元素我需要看书吗

[7楼] Big丶** 2016-10-28 09:56

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

[8楼] woni** 2016-12-03 15:14

老师你好。我想问一下:为什么requestAnimationFrame()函数既可以放在render()的第一行,也可以放在最后一行?不是应该只有放在最后一行才是正确的吗?为什么把它放在function  render()的 第一行的时候,render()的后续代码会执行?

WebGL中文网老师回答:

这个问题问得很好。requestAnimationFrame()函数实际上可以放到render函数中的任何一行,而不是说非要放到第一行,您认为放在第一行,render中其他的代码不能执行,这是错误的,requestAnimationFrame函数并不是一个return语句,并没有退出render函数的功能。 requestAnimationFrame函数表示下一帧将执行render函数,不是马上执行render函数的意思。

[9楼] Zhan** 2016-12-07 15:25

老师您好,这段代码在运行时会提示Uncaught TypeError: Cannot read property 'lookAT' of undefined?

请问这是什么原因呢?

WebGL中文网老师回答:

这个问题重点是undefined这个词,表示调用lookAt这个函数前,这个对象没有定义哦,请仔细检查一下代码。

[10楼] 凯尔萨斯** 2017-01-09 15:53

嘿嘿

[11楼] 芸豆子s** 2017-02-06 17:11

渲染一根线,为什么要配置光源?可以不配么?

[12楼] ding** 2017-02-20 17:18

大拿们你好,我是一个JAVA开发人员,之前从未了解3D,WebGl,three.js这块,这次是由于项目需要,需做一个人工交互的场景,其中就是通过问题以及答案给出相应的3D效果出来;

哈哈,说了这么多,其实就是要了解下什么是游戏循环。。。顺便请问一下,我的这个需求3D这块你妹这边有什么好的建议没有?比如说从哪方面入手。。。。

[13楼] gent** 2017-03-28 12:54

我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”

这怎么办啊??

[14楼] fanx** 2017-05-02 21:30

什么是游戏循环

[15楼] qaz8** 2017-06-09 14:24

mack一下,第一次学习three这个教程~~~

[16楼] zhuz** 2017-07-12 09:56

"已经迫不及待想看看相机的参数了,点这里"   链接呢???

[17楼] zhuz** 2017-07-12 10:15

游戏循环? 第一次听说这个说法. 这个不应该是函数内部调用自身的"死循环"吗?

[18楼] zuo_** 2017-07-21 16:34

老师您好,我在使用的时候出现了这个异常:

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

能不能帮忙看一下

[19楼] 疯狂ja** 2017-08-15 22:55

之前学习c++时学过opengl 而后转行了java  现在变成了前端 想学一下webgl 毕竟学过, 第二课第一个实例,完整复制代码,运行报GLDemo1.html:15 Uncaught TypeError: Cannot read property 'appendChild' of null at GLDemo1.html:15 错误,我的做法是引入jquery,把代码放入 $(document).ready(function());的function内。

[20楼] 许怀林** 2017-08-23 11:55

哇,老师,你这个demo有许多错误,都是参数未定义。运行时候老出错,initCamera()方法中的width和height哪里来的?initObject()方法中的color1,color2哪里来的?这两个都还是小问题,自己改一下就行,但是后面还有个在72行var line = new THREE.Line( geometry, material, THREE.LinePieces );中的material这个参数是什么呀,在哪定义的

[21楼] 老俞** 2017-08-28 17:17

老师你好:为什么在实时渲染时,即使画面中什么也没有改变,也需要重新渲染?

[22楼] sj夜雨** 2017-10-12 15:09

我在函数外用var test = document.getElementById('canvas-frame'),test的值为何会是null,函数里的clientWidth,clientHeight就会报错,函数里只能写死document.getElementById('canvas-frame')去获取宽度和高度吗

[23楼] axhu** 2017-10-16 16:27

感觉如果把渲染器理解成相机的取景范围,更好理解一些,因为场景可以很大,但是取哪些内容也就是渲染哪些内容,是由相机的取景范围决定的。

WebGL中文网老师回答:

准确的说是视景体裁剪,3D到2D屏幕的映射,其实你的理解也没问题,只要大致一样就ok了。

[24楼] wqel** 2017-11-03 15:47

THREE.LinePieces no longer supported.

项目代码是否开源?因为有些内容已经过时了。

还有上面叫徐怀林的那个,你不懂就不要说话了。

WebGL中文网老师回答:

Three.js是一个开源项目,底层原理非常复杂,我们也为Three.js贡献了一些源码。 要学好Three.js 自学还是有一定难度的,系统的学习更好。

[25楼] kinp** 2017-11-10 10:39

我觉得可以增加用户回答问题的功能,方便大家共同切磋,并且也能减少网站工作人员的工作压力。还有本站的three.js版本有点低了,更新太快。虽然没有导致代码出错,但是学习方向可能会有些许偏差,建议及时更新,就像该段代码中的linpieces现已改为linesegments。还是要感谢大神们留下来的学习笔记。继续加油学习去了。

WebGL中文网老师回答:

是的,感谢你的意见,一方面我们会尽快更新,另一方面需要举一反三,本质上理解linpieces和linesegments没有区别,只是换了一个单词,其意义未变。就像一个变量,一个人用i,一个人后来觉得j好,但是其实意义没变。希望大家有解决这种问题的决心,不经过思考的学习,一定是不好的。

[26楼] admi** 2017-11-16 15:34

老师你好,我想问下,为什么我用示例二的代码在页面上没有效果呢?用的最新版的three.js,页面代码也一样,

WebGL中文网老师回答:

看F12键有没有报错,不同版本的api有一些轻微的变化。

[27楼] 潇潇暮雨** 2018-01-03 11:12

那个循环就是js的回调吧。感觉不错,慢慢学习。

WebGL中文网老师回答:

回调和帧循环可不是一样的。回调可以是函数运行完成之后触发。但是帧循环是使用requestAnimationFrame系统函数触发,requestAnimationFrame是当主线程空闲的时候,尽可能的被触发,这样可以节省系统的很多资源哦

[28楼] 巴拉拉小** 2018-01-06 20:42

老师你好,为什么我用示例二的代码在页面上没有效果,也不报错

[29楼] shir** 2018-01-11 15:56

老师您好,请问为什么重构之后, 就什么都不显示了呢?

[30楼] 4464** 2018-01-17 23:31

实时渲染时,有没有可能由于画面内容太多,在render还没执行完时requestAnimationFrame就触发了?如果会的话,需要怎么解决这个问题?

WebGL中文网老师回答:

不会的。我们分析代码

function animate() {

render();

requestAnimationFrame( animate );

}
可以看出要render执行完成后,才会再一次调用requestAnimationFrame,这个函数保证在cpu空闲的时候,调用animate,所以,不是说没有执行完render,就执行requestAnimationFrame了。注意requestAnimationFrame执行一次,只会执行一个render函数。

[31楼] ZBL1** 2018-01-18 10:48

有点蒙圈,在哪里写代码

WebGL中文网老师回答:

不是很理解,是问编程工具吗?webstrom、sublime、virtual studio都是可以的啊,而且有很好的代码提示效果。

[32楼] acti** 2018-02-06 20:20

老师,你好我想请教一下var cube = new THREE.Mesh(geometry, material); scene.add(cube);里Mesh()方法的用法,网上找不到相应资料

[33楼] heiy** 2018-02-09 00:18

刚刚开始学习,先感谢一下这样的学习平台

WebGL中文网老师回答:

虽然只有一句话,我们也不相识。只要课程对你有帮助,哪怕节约你半天的时间,我们也是快乐的。不过,人生在世,时间很短,学习知识就要学习精通,以此共勉。

[34楼] Tsev** 2018-03-06 14:13

您好  我copy了第二个重构案例  发现报错  第一行打印出THREE.WebGLRenderer 91dev

第二行有打印THREE.Line: parameter THREE.LinePieces no longer supported. Created THREE.LineSegments instead.  都是three.js里面console出来的   查了一下说是参数三不支持行  是因为我three.js下载的问题吗?  谢谢

[35楼] Vess** 2018-03-14 15:59

跟楼上一样,我也copy了第二个重构案例,什么东西都没有显示,空白的页面??第一个案例有个绿色正方体出现

[36楼] wuju** 2018-03-16 11:53

跟楼上一样,copy了第二个函数代码运行不了

是three版本的问题吗??

[37楼] Fisc** 2018-03-18 21:25

我也试验了第二个代码,按教程写的也是不能显示,后来把looAt删掉,

camera.lookAt({
x : 0,
y : 0,
z : 0
});

并且把

geometry.vertices.push(p1);
geometry.vertices.push(p1);

改成

geometry.vertices.push(p1,p2);

才可以显示,请教老师这是为什么

[38楼] li27** 2018-03-26 18:59

这种写法在最新的已经不能用了。。

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));

[39楼] 一枚小小** 2018-05-23 16:51

6、渲染循环

解释说明的倒数第三行的rander()应该是render()吧?

WebGL中文网老师回答:

嗯,是的,拼写错误了。谢谢指正。

[40楼] webz** 2018-08-10 19:06

THREE.LinePieces 不支持,最新版本改为THREE.LineSements错误提示three.js:25518 THREE.Line: parameter THREE.LinePieces no longer supported. Use THREE.
LineSegments instead.

WebGL中文网老师回答:

是的,一般来说api变化得越快说明代码开放团队维护得越好,但是原理不变的,大家一定要学好原理。我们特别重视原理的教学。

[41楼] 郝本魅** 2018-09-04 00:19

老师您好,我编写第二个框架 报错

直接复制进来都报错


THREE.Material: 'vertexColors' parameter is undefined.

WebGL中文网老师回答:

注意three.js的版本,请使用我们提供的版本,如果使用最新版需要看文档或者源码,看函数变了没有。谢谢。

[42楼] 进步青年** 2018-11-12 19:26

看到第二章有种莫名的感动~~~

[43楼] brie** 2019-01-07 19:08

看了问题 将 

THREE.LinePieces
改成了下面的
var line = new THREE.Line( geometry, material, THREE.LineSements ); 
但是线还是没有画出来 是因为什么啊  
我的THREE.js  版本为100

[44楼] xiao** 2019-02-02 22:55

在版本号101中:

var line = new THREE.Line( geometry, material, THREE.LineSegments );
camera.lookAt(
0,
0,
0
);

需修改上面两处才能正常运行

[45楼] 逗兜兜哼** 2019-02-28 17:47

你好,我现在是使用coscos creator制作微信小游戏,由于想加入3D元素,所以想使用three.js,但是不知道这两者是否能够相结合

[46楼] jina** 2019-04-01 17:45

为什么不用es6标准来写呢?

width,height在函数中默认全局是声明,看的好别扭.

[47楼] jack** 2019-05-02 12:51

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 是控制什么的 ,修改 相机的坐标系吗 ??

谢谢!

[48楼] Silv** 2019-06-17 19:03

var line = new THREE.Line( geometry, material, THREE.LineSegments );
camera.lookAt(
0,
0,
0
);

版本是官网下的105,改了这两处,浏览器也不报错了,还是什么都没有显示。例1用同样的105版本可以正常显示,想问问老师怎么办。谢谢!

[49楼] Silv** 2019-06-17 20:33

48楼提问的,自己找到问题解决了 :)

[50楼] spid** 2019-06-28 16:23

<script src="js/three.js" data-ke-src=""></script>

请问其中的 data-ke-src 属性表示什么意思?没见过

[51楼] _Nea** 2019-07-26 14:56

老师您好,第二个案例好像有个问题,我运行的时候报了个

THREE.WebGLRenderer 107dev

 three.js:26766 THREE.Line: parameter THREE.LinePieces no longer supported. Use THREE.LineSegments instead.
这个应该怎么解决呢?

[52楼] tuli** 2019-07-28 00:22

看了下 貌似是要把THREE.Line()方法改成 THREE.LineSegments(), 而且只需要前2个参数就可以了 

[53楼] 王毅博** 2019-09-17 11:09

评论不做个热门 和 翻页吗?

[54楼] make** 2019-09-25 11:20

three.js版本109dev

例子1中浏览器warn提示

THREE.WebGLRenderer: OVR_multiview2 extension not supported.

页面不显示内容

[55楼] zhan** 2019-10-12 14:48

你好, 第二个demo, 执行报错

将  `var line = new THREE.Line( geometry, material, THREE.LinePieces )` 改为 

`var line = new THREE.LineSegments( geometry, material);`

执行成功,  但是显示空包.

[56楼] qqca** 2019-10-21 15:12

用的97的版本,和大家遇到了同样的问题,看了单元二里面的demo是没有问题的。大家在上面都已经把解决方案贴出来了,谢谢大家。下面的人也可以看下上面人的评论

[57楼] 摩西** 2019-11-07 13:59

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));;

[58楼] dong** 2019-12-06 11:16

vue环境下可以使用吗

[59楼] 8756** 2019-12-12 15:03

今天第一次来学习,希望加个回到顶部的功能,一篇文章下来挺长的,还得拖着鼠标回到顶部,没有登陆不能提交评论,登录后竟然没有在当前页而是跳到个人中心了

[60楼] 3052** 2019-12-24 10:20

THREE.WebGLRenderer 103

Three.js:26349 THREE.Line: parameter THREE.LinePieces no longer supported. Use THREE.LineSegments instead.

[61楼] tanh** 2020-03-20 15:46

老师,我想问你,如果放实物比如像一个苹果之类,是不是需要3D设计师先做好一个3D模型的苹果,然后我们再引进页面代码里面。那么引进来的3D模型有什么格式或者大小限制吗?

[62楼] 金刚小仓** 2020-04-01 11:12

互勉,加油,一定会学好

[63楼] yytf** 2020-10-13 11:01

最新版本的ThreeJS已经不再支持第二段代码的一些写法,大家可以把lookAt的部分用下面的代码运行:

camera.lookAt(new THREE.Vector3(0,0,0));

亲测可用

[64楼] 摸鱼** 2021-05-14 17:38

第一个框架,var geometry = new THREE.CubeGeometry(1,1,1); 运行报错,需改成var geometry = new THREE.BoxGeometry(1,1,1);

[65楼] Jaso** 2021-07-22 16:25

为何第二个例子,我写出来,是一片黑,啥效果都没有

[66楼] 曹三火6** 2021-09-16 17:35

THREE.Geometry()用不了了都 ,能不能更新一下

[67楼] 曹三火6** 2021-09-16 17:36

THREE.Geometry()用不了了都 ,能不能更新一下

[68楼] shij** 2022-02-22 21:26

2022更新一下这个THREE.Geometry()需要改成BoxGeometry,Three.js版本138dev,

var geometry = new THREE.BoxGeometry (1,1,1);

[69楼] shul** 2022-09-05 17:42

老师您好!请及时更新教程文档,不然学习起来很麻烦,版本不能够向下兼容,各种方法报错,这些问题都不考虑吗?如果进行了版本升级,,我的历史项目还要改方法重写,这些是不是要在官方文档体现一下呢?毕竟是官方文档呢,不清不楚怎么推广?

[70楼] 熊猫眼1** 2024-07-10 15:02

看起来,这个教程里有些代码已经失效了,要用新的代码了

提问或评论

登陆后才可留言或提问哦:) 登陆 | 注册 登陆后请返回本课提问
用户名
密   码
验证码