先把模型OBJ转为GLTF,然后再压缩一下，体积可减少百分之90以上哦~~~~
全部DEMO代码如下：
/// <reference path="../build/three.js"/>
const utils = {
makeShape: function() {
let shape;
// if (window.THREE && arguments.length) {
if (arguments.length) {
const arry = arguments[0];
shape = new THREE.Shape();
shape.moveTo(arry[0][0], arry[0][1]);
for (let i = 1; i < arry.length; i++) {
shape.lineTo(arry[i][0], arry[i][1]);
}
if (arguments.length > 1) {
for (let i = 1; i < arguments.length; i++) {
const pathCoords = arguments[i];
const path = new THREE.Path();
path.moveTo(pathCoords[0][0], pathCoords[0][1]);
for (let i = 1; i < pathCoords.length; i++) {
path.lineTo(pathCoords[i][0], pathCoords[i][1]);
}
shape.holes.push(path);
}
}
return shape;
} else {
console.error("Something wrong!");
}
},
makeExtrudeGeometry: function(shape, amount) {
const extrudeSetting = {
steps: 1,
amount: amount,
bevelEnabled: false
};
const geometry = new THREE.ExtrudeBufferGeometry(shape, extrudeSetting);
geometry.rotateX(-0.5 * Math.PI);
return geometry;
},
makeShapeGeometry: function(shapeCoords) {
const shape = makeShape(shapeCoords);
const geometry = new THREE.ShapeGeometry(shape);
return geometry;
},
makeMesh: function(type, geometry, color) {
let material = new THREE.MeshLambertMaterial();
let mesh = new THREE.Mesh();
if (type === "lambert") {
material = new THREE.MeshLambertMaterial({ color: color });
} else if (type === "phong") {
material = new THREE.MeshPhongMaterial({ color: color });
} else {
console.error("unrecognized type!");
}
mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
mesh.receiveShadow = true;
return mesh;
},
makeMeshTransparent: function(type, geometry, color, opacity) {
let material = new THREE.MeshLambertMaterial();
let mesh = new THREE.Mesh();
if (type === "lambert") {
material = new THREE.MeshLambertMaterial({
color: color,
transparent: true, // 开启透明度
opacity: opacity // 设置透明度具体值
});
} else if (type === "phong") {
material = new THREE.MeshPhongMaterial({
color: color,
transparent: true, // 开启透明度
opacity: opacity // 设置透明度具体值
});
} else {
console.error("unrecognized type!");
}
mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
mesh.receiveShadow = true;
return mesh;
}
};
// import { PerspectiveCamera, Scene, WebGLRenderer, PCFSoftShadowMap, AxisHelper, DirectionalLight } from "../build/three";
var width = window.innerWidth
var height = window.innerHeight
var scene = new THREE.Scene()
var lineMaterial
var camera = new THREE.PerspectiveCamera(
45,// 视野角fov
width / height,
1,
5000
)
camera.position.set(1200, 1200, 1200)// 调大了可以离的远点看
camera.lookAt(scene.position)
var canvas = document.getElementById(‘canvas20‘)
var render = new THREE.WebGLRenderer(
{
antialias: true, // antialias:true/false是否开启反锯齿
canvas: canvas
}
)
render.setSize(width, height)
render.setClearColor(0x282828)
render.shadowMap.enabled = true// 輔助線
render.shadowMap.type = THREE.PCFSoftShadowMap // 柔化边缘的软阴影映射
var axisHelper = new THREE.AxisHelper(500)
scene.add(axisHelper)
var directionalLight = new THREE.DirectionalLight(0xffffff, 1.0, 0)
directionalLight.position.set(300, 1000, 500)
directionalLight.target.position.set(0, 0, 0)
directionalLight.castShadow = true
directionalLight.shadow.bias = 0.0001
directionalLight.shadow.mapSize.width = directionalLight.shadow.mapSize.height = 1024
scene.add(directionalLight)
const light = new THREE.AmbientLight(0xffffff, 0.3)
scene.add(light)
const planeGeometry = new THREE.BoxBufferGeometry(1000, 6, 1000)
const plane = utils.makeMesh(‘lambert‘, planeGeometry, 0xe2d5d5)
plane.position.y = -3
scene.add(plane)
/**
* 创建网格模型
*/
// 立方体网格模型
var geometry1 = new THREE.BoxGeometry(100, 100, 100)
var material1 = new THREE.MeshLambertMaterial({
color: 0x0000ff, // 材质颜色半透明蓝色
transparent: true, // 开启透明度
opacity: 0.2 // 设置透明度具体值
}) // 材质对象Material
var mesh1 = new THREE.Mesh(geometry1, material1) // 网格模型对象Mesh
mesh1.position.y = 50
scene.add(mesh1) // 网格模型添加到场景中
// 设置线框材质
lineMaterial = new THREE.LineBasicMaterial({
// 线的颜色
color: "#57d8ff",
transparent: true,
linewidth: 5,
opacity: 1.0,
//depthTest: true,
});
//解决z-flighting
lineMaterial.polygonOffset = true;
lineMaterial.depthTest = true;
lineMaterial.polygonOffsetFactor = 1;
lineMaterial.polygonOffsetUnits = 1.0;
// 设置线框材质
var loader = new THREE.GLTFLoader();
THREE.DRACOLoader.setDecoderPath(‘../js/libs/draco/gltf/‘);
loader.setDRACOLoader(new THREE.DRACOLoader());
loader.load(‘../models/gltf/DamagedHelmet/glTF/minitems.gltf‘, function (gltf) {
// gltf.scene.scale.set(1,1,1)
gltf.scene.position.set(0,105,0)
gltf.scene.traverse(function (child) {
console.log(‘child‘)
console.log(child)
// if (child.isMesh) {
// child.material.emissive = child.material.color;
// child.material.emissiveMap = child.material.map;
// }
// 设置线框材质
if (child.isMesh) {
//建筑物线框模式
let edges = new THREE.EdgesGeometry(child.geometry,1);
edges.scale(2,2,2)
let lineS= new THREE.LineSegments(edges, lineMaterial);
lineS.rotateY(Math.PI/5);
lineS.position.set(0,300,0)
scene.add(lineS);
}
// 设置线框材质
});
scene.add(gltf.scene)
console.log(‘gltf‘)
console.log(gltf)
console.log(‘scence‘)
console.log(scene)
});
var controls = new THREE.OrbitControls(camera, render.domElement)
loop()
function loop() {
render.render(scene, camera)
requestAnimationFrame(loop)
}