Three.js使用案例
1. 控件的初始化(scene、camera、renderer、controls、stats、ambientLight)
//场景一级辅助空间坐标系的初始化
function initScene() {
showDiv = document.getElementById("tccDraw");
scene = new THREE.Scene();
var axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);
}
/* 相机 */
function initCamera() {
//透视相机
camera = new THREE.PerspectiveCamera(45, showDiv.clientWidth / showDiv.clientHeight, 10, 15000);
camera.position.set(0, 500, 350);
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
/* 渲染器 */
function initRender() {
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(showDiv.clientWidth, showDiv.clientHeight);
showDiv.appendChild(renderer.domElement);
}
/* 灯光 */
function initLight() {
let ambientLight = new THREE.AmbientLight(0xCCCCCC);
scene.add(ambientLight);
directionalLight = new THREE.DirectionalLight(0x585858);
directionalLight.position.set(0, 3500, 0);
scene.add(directionalLight);
}
/* 控制器 */
function initControls() {
controls = new THREE.OrbitControls(camera, showDiv);
}
/* 初始化性能插件status */
function initStats(){
stats = new Stats();
document.body.appendChild(stats.dom);
}
/* 循环渲染 */
function animate() {
stats.update();
requestAnimationFrame(animate);
renderer.render(scene, camera);
}2. 点模型、线模型以及自定义几何体
/**
* 自定义几何体
**/
function self_geometry() {
var geometry = new THREE.BufferGeometry();
var vertices = new Float32Array([
0, 0, 0, //顶点1坐标
50, 0, 0, //顶点2坐标
0, 100, 0, //顶点3坐标
0, 0, 0, //顶点4坐标
0, 0, 100, //顶点5坐标
50, 0, 0, //顶点6坐标
]);
var colors = new Float32Array([
0, 0, 0, //顶点1颜色
1, 0, 1, //顶点2颜色
0, 1, 0, //顶点3颜色
1, 1, 1, //顶点4颜色
0, 1, 1, //顶点5颜色
0, 0, 1, //顶点6颜色
]);
var normals = new Float32Array([
0, 0, 1, //顶点1法向量
0, 0, 1, //顶点2法向量
0, 0, 1, //顶点3法向量
0, 1, 0, //顶点4法向量
0, 1, 0, //顶点5法向量
0, 1, 0, //顶点6法向量
]);
geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.color = new THREE.BufferAttribute(colors, 3);
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的法向量数据
var material = new THREE.MeshBasicMaterial({
vertexColors: THREE.VertexColors,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
};
/**
* 点模型
**/
function self_points() {
var geometry = new THREE.BufferGeometry();
var vertices = new Float32Array([
10, 30, 10, //顶点1坐标
10, 100, 30, //顶点2坐标
5, 15, 50, //顶点3坐标
20, 60, 100, //顶点4坐标
40, 60, 100, //顶点5坐标
50, 33, 100, //顶点6坐标
]);
var colors = new Float32Array([
0, 0, 0, //顶点1颜色
1, 0, 1, //顶点2颜色
0, 1, 0, //顶点3颜色
1, 1, 1, //顶点4颜色
0, 1, 1, //顶点5颜色
0, 0, 1, //顶点6颜色
]);
var attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
geometry.attributes.color = new THREE.BufferAttribute(colors, 3);
var material1 = new THREE.PointsMaterial({
vertexColors: THREE.VertexColors,
size: 10.0
});
var points = new THREE.Points(geometry, material1);
scene.add(points);
};
/**
* 线模型测试
**/
function self_line() {
var geometry = new THREE.BufferGeometry();
var vertices = new Float32Array([
0, 0, 0, //顶点1坐标
100, 0, 0, //顶点2坐标
0, 10, 30, //顶点3坐标
200, 0, 10, //顶点4坐标
0, 50, 10, //顶点5坐标
50, 10, 10, //顶点6坐标
]);
var attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;
var material2 = new THREE.LineBasicMaterial({
color: 0xff0000,
});
var line = new THREE.Line(geometry, material2);
scene.add(line);
}3. 材质数组填充彩色立方体
/*构建各个面颜色随机的立方体*/
function addBox(){
var cubeGeo = new THREE.BoxGeometry(50,50,50);
var mats = [];
for(var i=0;i6;i++){
var material = new THREE.MeshBasicMaterial({ color: new THREE.Color(Math.random(0,5) * 0xffffff)});
mats.push(material);
}
mesh = new THREE.Mesh(cubeGeo, mats);
scene.add(mesh);
}4. 加载OBJ模型
/*添加OBJ模型*/
function addOBJ(){
var OBJLoader = new THREE.OBJLoader();//obj加载器
var MTLLoader = new THREE.MTLLoader();
MTLLoader.load("models/dt/dt.mtl",function(materials){
OBJLoader.setMaterials(materials);
OBJLoader.load("models/dt/dt.obj",function(obj){
var object = obj;
object.scale.set(30,30,30);
scene.add(object);
});
})
}5. 监听以及场景的放大缩小
input type="button" class="big" value="放大" onclick="zoomOut()" style="float: right;">
function zoomOut(){
console.log("触发了场景放大的方法");
controls.zoomIn();
}
/*切记循环渲染中需要更新控制器*/
controls.update();6. FBX模型以及动画的播放
/*添加FBX模型*/
function addFBX() {
var loader = new THREE.FBXLoader();
loader.load('models/fbx/Samba Dancing.fbx', function (object) {
//动画
mixers = new THREE.AnimationMixer(object);
var action = mixers.clipAction(object.animations[0]);
action.play();
object.traverse(function (child) {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
}
});
//缩放
object.scale.set(0.5, 0.5, 0.5);
//位置
object.position.set(0, 0, 0);
scene.add(object);
});
}
/* 循环渲染中需要添加 */
const delta = clock.getDelta();
if (mixers) mixers.update(delta);
！！！最新版本的THREE.JS写法有变动 如果 发现动画无法播放 可 从博主的git中取正常的版本7. 平面添加背景图
function addPlane() {
//实心
var planeGeo2 = new THREE.PlaneGeometry(1600, 1600);
var planeTexture = new THREE.TextureLoader().load("models/cerberus/Cerberus_RM.jpg");
planeGeo2.translate(0,0,-400);
var mesh2 = new THREE.MeshBasicMaterial({
map:planeTexture
});
mesh2.side = THREE.DoubleSide;
var plane2 = new THREE.Mesh(planeGeo2, mesh2);
plane2.position.set(100,100,100);
scene.add(plane2);
}8. 天空盒子最简单的实现方法（虽然瑕疵很多 但这只是小练习）
其实就是彩色正方体的翻版 只不过材质渲染变成了图片
/*加载天空盒子*/
function skyBox(){
var path = "models/person/";
var directions = ["a2p31-t9cvs","a4qdn-ootih","a8lox-cdv4r","afueh-p492r","aqh09-3oiie","ayit8-ad9xb"];
var format = ".jpg"
var skyGeometry = new THREE.BoxGeometry(5000,5000,5000);
var materialArray = [];
for(var i = 0;i6;i++){
materialArray.push(new THREE.MeshBasicMaterial({
map:THREE.ImageUtils.loadTexture(path+directions[i]+format),
side:THREE.BackSide
}));
}
var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );//创建一个完整的
scene.add(skyBox);
}9. 加载文字标注
/*创建css2dobject*/
function create2DObject() {
var div = document.createElement("div");
div.style.width = '200px';
div.style.height = '100px';
div.style.background = 'rgba(10,18,51,0.8)';
div.style.color = '#ffffff'
div.textContent = '彩色旋转小盒子'
div.className = 'label'
var label = new THREE.CSS2DObject(div);
label.position.set(0, 110, 0);
var imgDiv = document.createElement("img");
imgDiv.src = "resource/create.gif";
imgDiv.width = 30;
imgDiv.height = 30;
div.appendChild(imgDiv);
scene.add(label);
}10. 挤压多边形（ExtrudeGeometry），以及点击对象改变颜色
/* 生成多边几何体的点 */
function createExtrudeGeometry(points) {
var shape = new THREE.Shape(points);
var options = {
depth: 10
}
var ExtrudeGeometry = new THREE.ExtrudeGeometry(shape, options);
var mater = new THREE.MeshBasicMaterial({
color: 0xff0354,
});
mesh = new THREE.Mesh(ExtrudeGeometry, mater);
scene.add(mesh);
}
/* 创建多个几何体 */
function manyExtrudeGeometry() {
var points1 = [
new THREE.Vector2(-22, 30),
new THREE.Vector2(-18, 20),
new THREE.Vector2(-20, 10),
new THREE.Vector2(-30, 10),
new THREE.Vector2(-40, 10),
new THREE.Vector2(-22, 30),
]
createExtrudeGeometry(points1);
var points1 = [
new THREE.Vector2(22, 30),
new THREE.Vector2(18, 20),
new THREE.Vector2(20, 10),
new THREE.Vector2(30, 10),
new THREE.Vector2(40, 10),
new THREE.Vector2(22, 30),
]
createExtrudeGeometry(points1);
var points1 = [
new THREE.Vector2(50, 60),
new THREE.Vector2(50, 50),
new THREE.Vector2(33, 44),
new THREE.Vector2(41, 33),
new THREE.Vector2(52, 22),
new THREE.Vector2(22, 40),
]
createExtrudeGeometry(points1);
var points1 = [
new THREE.Vector2(100, 150),
new THREE.Vector2(120, 103),
new THREE.Vector2(140, 196),
new THREE.Vector2(170, 133),
new THREE.Vector2(150, 166),
new THREE.Vector2(180, 75),
]
createExtrudeGeometry(points1);
}
/* 通过射线获取点击的对象 */
function getPickPosition(event) {
console.log("触发拾取对象的方法");
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
pick.x = (event.offsetX / width) * 2 - 1;
pick.y = (event.offsetY / height) * -2 + 1;
console.log(event.offsetX);
console.log(event.offsetY);
console.log("w:" + width + "h:" + height);
console.log("x=" + pick.x + " y=" + pick.y);
var Objects = null;
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera(pick, camera);//根据鼠标屏幕上的位置，和场景中的相机去计算射线位置
intersectedObjects = raycaster.intersectObjects(scene.children);//返回的是个数组，里面包含所有拾取到的对象
console.log(intersectedObjects);
if (intersectedObjects.length > 0) {
for (var i = 0; i < intersectedObjects.length; i++) {
intersectedObjects[i].object.material.color.set(0xffffff);
//outlineObj(intersectedObjects[i].object);
}
}
}11. 上一章的多边体添加辉光效果
/* 通过射线获取点击的对象 */
function getPickPosition(event) {
console.log("触发拾取对象的方法");
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
pick.x = (event.offsetX / width) * 2 - 1;
pick.y = (event.offsetY / height) * -2 + 1;
console.log(event.offsetX);
console.log(event.offsetY);
console.log("w:" + width + "h:" + height);
console.log("x=" + pick.x + " y=" + pick.y);
var Objects = null;
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera(pick, camera);//根据鼠标屏幕上的位置，和场景中的相机去计算射线位置
intersectedObjects = raycaster.intersectObjects(scene.children);//返回的是个数组，里面包含所有拾取到的对象
console.log(intersectedObjects);
if (intersectedObjects.length > 0) {
for (var i = 0; i < intersectedObjects.length; i++) {
//intersectedObjects[i].object.material.color.set(0xffffff);
outlineObj(intersectedObjects[i].object);
}
}
}
/* 点击的几何体添加辉光的效果 */
function outlineObj(obj){
console.log(obj);
initoutline(obj);
var objs = [];
objs.push(obj);
composer.addPass(renderPass);
outlinePass.selectedObjects = objs;
outlinePass.edgeStrength = 10.0 // 边框的亮度
outlinePass.edgeGlow = 1// 光晕[0,1]
outlinePass.usePatternTexture = true // 是否使用父级的材质
outlinePass.edgeThickness = 10.0 // 边框宽度
outlinePass.downSampleRatio = 1 // 边框弯曲度
outlinePass.pulsePeriod = 5 // 呼吸闪烁的速度
outlinePass.visibleEdgeColor.set(parseInt(0xffffff)) // 呼吸显示的颜色
outlinePass.hiddenEdgeColor = new THREE.Color(0, 0, 0) // 呼吸消失的颜色
outlinePass.clear = true
composer.addPass(outlinePass)
effectFXAA.uniforms.resolution.value.set(1 / window.innerWidth, 1 / window.innerHeight)
effectFXAA.renderToScreen = true
composer.addPass(effectFXAA)
}
/* 初始化辉光组件 */
function initoutline(obj){
composer = new THREE.EffectComposer(renderer);
renderPass = new THREE.RenderPass(scene,camera);
outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight),scene,camera,obj);
effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
}附上gitee的源码空间
https://gitee.com/zheng-kangyun/three.js.git