更新于 

Basic Components - ThreeJs的基本元素

Create a Scene

Three Types of Components Determine the Scene to Show
  • camera : what is rendered
  • light : how the material be rendered
  • object : the thing be rendered
    • Object3D 是threeJs中大部分对象的基类

Scene is the Container of these different components

Basic functionality of a scene
Example 02 Basic Scene
Example 02 Basic Scene
魔改版Example 02 Basic Scene
魔改版Example 02 Basic Scene
scene-related functions
  • THREE.Scene.Add 添加元素
  • THREE.Scene.Remove 移除元素
  • THREE.Scene.children 获取所有子元素
  • THREE.Scene.getObjectByName 通过元素的name获取元素
  • THREE.Scene.traverse 遍历scene的所有子元素
  • THREE.Scene.fog 雾
  • THREE.Scene.overrideMaterial 覆盖材质
Scene.fog

在上面两个demo中加上雾气效果：

1
scene.fog = new THREE.Fog(0xffffff, 0.015, 100)
加上fog效果
加上fog效果
魔改版Fog
魔改版Fog
Scene.overrideMaterial

通过scene.overrideMaterial能够覆写页面上的所有元素的材质

1
2
3
scene.overrideMaterial = new THREE.MeshLambertMaterial({
  wireframe:true
})
overrideMaterial覆写材质
overrideMaterial覆写材质
魔改版
魔改版

Geometries && Meshes

What's geometry?

A geometry is basically a collection of points in a 3D space
tip: a collection of points 即 vertices

Different Cameras