- max笔记
-
* 回复内容中包含的链接未经审核,可能存在风险,暂不予完整展示!
官方参考地址: https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene
在React项目中执行 npm install --save three
要让three显示东西,我们需要三样东西:场景、相机、渲染器
这很好理解,
首先要有物品——场景:控制场景长什么样 THREE.Scene()
然后需要有眼睛看——相机:控制我们从多远看,从什么角度看 THREE.PerspectiveCamera()
最后是把这些渲染到web上——渲染器:起着链接作用 THREE.WebGLRenderer()
(如果想要立刻看到效果,需要在周期函数中执行)
首先你要有一个dom元素可以做容器——或者说是我们的画布
给渲染器设置好大小:
把相机和场景添加到渲染器中:
把渲染器放进dom容器:通过getElementById获取到dom
到这里,我们已经完成了整个流程,页面有变化但是是空的,原因是场景中我们还没有添加任何的内容。
我们渲染出来的“立方体”实际上是一个网格对象,常见一个立方体的网格对象,需要两部分:模型 and 贴图(材质)
很简单,依次传入两个对象:几何体、材质。
到这里,你会发现还是什么都看不到,为什么呢?
这时候就能看到我们添加新场景的立方体网格对象啦!
emmmm...看着不是很得劲,试试给网格立方体添加上边框线
调整一下摄像头位置,效果就变成了:
至此,我们完整创建了一个网格对象,并使其渲染到了场景中,且我们能够在网页上看到它了!
渲染部分改为调用函数渲染
渲染函数本体如下
上面我们提到,requestAnimationFrame内部的animate函数会反复调用,那么我们要获得动画效果,只需要在animate函数里面去改变就行了
立方体会旋转起来:
但是边框没有跟着旋转。。。
参考这个: https://blog.c**.net/arvin0/article/details/121613144
结果没有旋转,指挥旋转立方体的最大边框,然后显示出来,就是下面这样:
显然不是我们想要的效果
后来发现 ,新版本EdgesHelper的功能已经变成了 LineSegments() ,也就是 线段
创建一个线段对象,这个对象包裹着立方体,与立方体做同样的运动
与使立方体运动的方法一样,在animate中进行同样的逐帧变化即可
此时效果就变成了:
看到红色的边框了吗!
灯光加入也很简单:创建一个灯光,然后把灯光加入到场景中:
但是发现场景中的立方体没有任何变化,略加思考,考虑到可能是对象材质的问题(可能不能反光还是说别的原因),总之要换一下对象的材质
从基础材质换成MeshLambertMaterial
就可以看到效果了:物体本身是绿色,照射红光时:
显示黑色,这没毛病,换成白光照射:就能正常显示绿色了:
总结一下: