基本结构
这两天开始学习Three.js，首先为其顺了一个基本的结构（首先需要引用three.js）：
1、创建WebGL画布（与canvas画布是联系在一起的）、（即渲染）；
2、创建场景；
3、创建照相机并添加至场景；
4、创建灯光并添加至场景（可选，当物体材质为需要光时，则必须添加）；
5、创建物体及其材质，两者合在一起创建网络并添加至场景；
6、渲染。
1、创建WebGL画布（与canvas画布是联系在一起的）、（即渲染）
有两种方式，一种是已经有canvas画布，另一种是未创建canvas，需要自己创建。
// renderer
let renderer = new THREE.WebGLRenderer({
canvas: document.getElementById(‘mainCanvas‘)
});
//设置颜色
renderer.setClearColor(0x000000); // black
//当未创建canvas时
let renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 300);
document.getElementsByTagName(‘body‘)[0].appendChild(renderer.domElement);
2、创建场景
这里说的场景，概念和画布很类似，场景内放物体，场景放到画布上。
// scene
let scene = new THREE.Scene();
3、创建照相机并添加至场景
照相机就相当于人眼睛一样，只有在照相机视野里的物体才会被看到。
// camera
let camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);
4、创建灯光并添加至场景（可选，当物体材质为需要光时，则必须添加）
图像渲染的丰富效果很大程度上也要归功于光与影的利用，通过计算机模拟真实世界的光，可以模拟真实情景。
//如设置点光源
let light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 15, 5);
scene.add(light);
5、创建物体及其材质，两者合在一起创建网络并添加至场景
在场景中创建物体，并为物体选择一种材质，初始化为网络。
let cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
new THREE.MeshBasicMaterial({
color: 0xff0000
})
);
scene.add(cube);
6、渲染
// render
renderer.render(scene, camera);
实例
另附一些简单正在更新学习中的例子：
github地址：https://github.com/zhangxiaoshuang32/WebVR
在线演示：https://zhangxiaoshuang32.github.io/WebVR/index.html
时间： 2024-08-24 09:41:49