Three.js入门学习
程序员文章站
2022-05-23 14:00:41
...
Three.js入门
定义
Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。
资源结构
引入方式
- 相对路径引入
<script src="./three.js"></script>
- 绝对路径远程加载
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
开始第一个three.js项目
- 创建场景对象scene
- 创建网格模型
- 设置光源
- 设置相机
- 创建渲染器对象
//创建场景对象scene
var scene = new THREE.Scene();
//创建网格模型
//创建一个立方体几何对象Geometry
var geometry = new THREE.BoxGeometry(100, 100, 100);
// 创建材质对象
var mesh = new THREE.Mesh(geometry, material);
// 将网格模型添加到场景中
scene.add(mesh)
//设置光源
// 光源类型
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//设置相机
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
//创建渲染器对象
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
//执行渲染操作 指定场景、相机作为参数
renderer.render(scene, camera);
three.js程序结构
常用材质介绍
- 点材质 – PointMaterial
- 线材质
- LineBasicMaterial 线基础材质
- LineDashedMaterial 虚线材质
- 网格材质
- MeshBasicMaterial 网格基础材质
- MeshLamberMaterial 网格lamber材质 暗淡、瞒反射
- MeshPhonegMaterial 网格Phong材质 高亮表面、镜面反射
- MeshDepthMaterial 网格深度材质
- MeshNormalMaterial 网格法向量材质
- PBR材质
- 精灵材质 SpriteMaterial
- 自定义着色器材质
- RawShadderMaterial
- ShaderMaterial
常用光源
- 环境光 AmbientLight
//环境光:环境光颜色RGB成分分别和物体材质颜色RGB成分分别相乘
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);//环境光对象添加到scene场景中
- 平行光 DirectionalLight
// 平行光
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
// 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
directionalLight.position.set(80, 100, 50);
// 方向光指向对象网格模型mesh2，可以不设置，默认的位置是0,0,0
directionalLight.target = mesh2;
scene.add(directionalLight);
- 点光源 PointLight
//点光源
var point = new THREE.PointLight(0xffffff);
//设置点光源位置，改变光源的位置
point.position.set(400, 200, 300);
scene.add(point);
- 聚光灯光源 SpotLight
// 聚光光源
var spotLight = new THREE.SpotLight(0xffffff);
// 设置聚光光源位置
spotLight.position.set(200, 200, 200);
// 聚光灯光源指向网格模型mesh2
spotLight.target = mesh2;
// 设置聚光光源发散角度
spotLight.angle = Math.PI / 6
scene.add(spotLight);//光对象添加到scene场景中
- 基类Light
常见几何体
常用曲线
上两图摘自 http://www.webgl3d.cn/Three.js/
案例
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<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.BoxGeometry(1, 1, 1);
var material = new THREE.MeshLambertMaterial({
color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
scene.add(spotLight)
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.04;
renderer.render(scene, camera);
renderer.setClearColor(new THREE.Color(0x0023a0, 1.0));
renderer.shadowMap.enabled = true;
}
animate();
</script>
</body>
</html>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
var axes = new THREE.AxesHelper(20);
scene.add(axes);
var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
var planeMaterial = new THREE.MeshLambertMaterial({
color: 0xcccccc
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15
plane.position.y = 0
plane.position.z = 0
scene.add(plane);
plane.receiveShadow = true;
var geometry = new THREE.BoxGeometry(4, 4, 4);
var material = new THREE.MeshLambertMaterial({
color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
cube.position.x = 0;
cube.position.y = 2;
cube.position.z = 0;
cube.castShadow = true;
scene.add(cube);
const light = new THREE.DirectionalLight('#5fe', 1)
light.position.set(10, 10, 20)
var spotLight = new THREE.PointLight(0x33ffff);
spotLight.position.set(40, 10, 30);
spotLight.shadowCameraNear = 2;
spotLight.shadowCameraFar = 200;
spotLight.distance = 0;
spotLight.angle = 0.4;
scene.add(light);
scene.add(spotLight)
spotLight.castShadow = true;
var stats = new Stats();
stats.showPanel(0);
document.body.appendChild(stats.dom);
var sphereGeometry = new THREE.SphereGeometry(4, 100, 100)
var sphereMeterial = new THREE.MeshLambertMaterial({
color: '#d4237a'
})
sphere = new THREE.Mesh(sphereGeometry, sphereMeterial)
sphere.position.x = 8;
sphere.position.y = 6;
sphere.position.z = 2;
sphere.castShadow = true;
scene.add(sphere);
var sphereGeometry2 = new THREE.SphereGeometry(3, 30, 30)
var sphereMeterial2 = new THREE.MeshLambertMaterial({
color: '#abf45a'
})
sphere2 = new THREE.Mesh(sphereGeometry2, sphereMeterial2)
sphere2.position.x = 0;
sphere2.position.y = 1;
sphere2.position.z = 5;
sphere2.castShadow = true;
scene.add(sphere2);
var step = 0;
var step2 = 0;
function animate() {
cube.rotation.x += 0.09;
cube.rotation.y += 0.04;
// sphere.position.x = 20 + (10 * Math.cos(step));
sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)))
step += 0.02
step2 += 0.05
sphere2.position.x = 2 + (10 * Math.cos(step2));
sphere2.position.z = 2 + (10 * Math.abs(Math.sin(step2)))
requestAnimationFrame(animate);
renderer.render(scene, camera);
renderer.shadowMap.enabled = true;
}
animate();
-
贴图采用base64编码，太长了，代码省略了
var scene = new THREE.Scene() //初始化场景
var camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 1, 100000);
camera.position.set(50, 20, 1500);
var renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
})
renderer.setSize(window.innerWidth, window.innerHeight);
var orbitcontrols = new THREE.OrbitControls(camera, renderer.domElement);
document.body.appendChild(renderer.domElement);
var sunTexture = THREE.ImageUtils.loadTexture('编码', {}, function() {
renderer.render(scene, camera);
}))
var earthTexture = THREE.ImageUtils.loadTexture('编码', {}, function() {
renderer.render(scene, camera);
})
var sphereGeometry = new THREE.SphereGeometry(20, 30, 30)
var sphereMaterial = new THREE.MeshBasicMaterial({
map: sunTexture
})
centerBall = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(centerBall)
var eartheGeometry = new THREE.SphereGeometry(120, -30, -30)
var earthMaterial = new THREE.MeshBasicMaterial({
map: earthTexture
})
centerBall2 = new THREE.Mesh(eartheGeometry, earthMaterial);
scene.add(centerBall2)
var generateSprite = function(color) {
var canvas = document.createElement('canvas');
canvas.width = 16;
canvas.height = 16;
var context = canvas.getContext('2d');
var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2)
gradient.addColorStop(0, 'rgba(' + color + ',1)');
gradient.addColorStop(0.2, 'rgba(' + color + ',1)');
gradient.addColorStop(0.4, 'rgba(' + color + ',.6)');
gradient.addColorStop(1, 'rgba(0,0,0,0)');
context.fillSTylel = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
return canvas;
}
var sunSpriteColor = '15,120,155'
var SpriteMaterial = new THREE.SpriteMaterial({
map: new THREE.CanvasTexture(generateSprite(sunSpriteColor)),
blending: THREE.AdditiveBlending
})
var centerBallLite = new THREE.Sprite(SpriteMaterial);
centerBallLite.scale.x = centerBallLite.scale.y = centerBallLite.scale.z = 250;
scene.add(centerBallLite);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
scene.add(spotLight)
centerBall.position.y = 60
centerBall2.position.x = 160
centerBall.position.x = 160
centerBall2.position.y = -60
var step2 = 0;
function animate() {
requestAnimationFrame(animate);
// centerBall.rotation.x += 0.01;
centerBall.rotation.y += 0.04;
centerBall2.rotation.y += 200;
step2 += 0.1;
centerBall2.position.x = 22 + (10 * Math.cos(step2));
centerBall2.position.z = 2 + (10 * Math.abs(Math.sin(step2)));
renderer.render(scene, camera);
renderer.shadowMap.enabled = true;
}
animate();