threejs初探

一,组成

scene-主容器
material&texture -贴图
geometry
object
light
renderer&shader
loader

二, 语法

var scene = new THREE.Scene();
var mat = THREE.MeshBasicMaterial({color: 0x60f60f})
var gem = new BoxGeometry()

摄像机

正交投影:等同平行投影
透视投影

其他

blender 软件,3d建模

光源

点光 pointLight
锥形光 spotLight
环境光 AmbientLight

材质

完全不反射 MeshBasicMaterial
漫反射 Lambert
镜面反射 Phong

辅助线

光源辅助线:
var spotLightHelper = new THREE.DirectionalLightHelper( light );
scene.add( spotLightHelper );
坐标系:
var axisHelper = new THREE.AxisHelper(15000);
scene.add(axisHelper);
镜头控制:
orbitControl

容器

new THREE.Group();
new THREE.Object3D();

挤压

THREE.Vector2
2d vector
new THREE.ExtrudeGeometry()

多复制几个门

mesh.clone()

持续前进,循环

镜头、光源、跑道、建筑,猫门;都循环前进。
设置最远比较基线
参考:http://codepen.io/shelbeniskb/pen/dpYRWN

如何调整光源的朝向?(难以打光打成设计稿的样子)

direcLight.target.position.set( 200, -180, 100 ); 无效
lookAt() 也无效
总是tagert是原点

如何使用交互控制栏?

var gui = new dat.GUI()
gui.add({}, name, param1, param2...)
onChange( ... )

如何使用贴图?

加载:var texture = THREE.ImageUtils.loadTexture(data.url)
new THREE.MeshLambertMaterial({ map: texture });

如何把 2d svg path 转成 3d path ?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容