最近在学习three.js,做了一个汽车展示的案例用来练手,效果如下:
核心功能有以下这些:
1.汽车模型精细展示;
2.车身肤色12种变换;
3.汽车轮毂样式变换;
4.汽车车门、后备箱、天窗开关;
5.汽车尺寸立体展示;
6.汽车启动原地驾驶;
7.汽车车灯开关
8.豪华汽车展厅,镜面倒影实现;
9.hdr运用;
10.移动端适配;
想看车辆动态效果的,可以看视频
核心源代码贴出来一些
function sceneInit() {
renderer = new THREE.WebGLRenderer({
canvas: document.querySelector("#cc"),
antialias: true,
alpha: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.toneMappingExposure = 0.9;
renderer.toneMapping = THREE.LinearToneMapping;
renderer.toneMappingWhitePoint = 1;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
1,
6000
);
camera.position.set(-1398, 733, 685);
controls = new THREE.OrbitControls(camera, document.querySelector("#cc"));
controls.target.set(0, 100, 0);
clock = new THREE.Clock();
controls.enableDamping = true;
controls.dampingFactor = 0.15;
controls.panSpeed = 0.1;
controls.zoomSpeed = 0.2;
controls.rotateSpeed = 0.05;
controls.enableKeys = false;
controls.enablePan = false;
controls.minDistance = 1450;
controls.maxDistance = isMobile() ? 2500 : 1950;
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI * 0.45;
controls.minAzimuthAngle = -Infinity;
controls.maxAzimuthAngle = Infinity;
window.addEventListener("resize", onWindowResize, false);
lightInit();
envMaps();
initSprite();
$("body").show();
$("#logoLoading").show();
modelInit();
if (!IosOpt()) {
draw();
}
lensflares();
inintGround();
}
function raycasterShow() {
animateInit(carModel.scene, carModel.animations);
document.addEventListener("click", ray);
document.addEventListener("touchstart", ray);
scene.getObjectByName("biaozhu14").position.y = 0.06;
scene.getObjectByName("biaozhu14").material.transparent = true;
scene.getObjectByName("biaozhu14").material.opacity = 0;
scene.getObjectByName("biaozhu14").material.alphaTest = 0.05;
scene.getObjectByName("dimian").position.y = -0.002;
scene.getObjectByName("dimian").material.color = new THREE.Color(0x000000);
var clonems = scene.getObjectByName("polySurface3316").material.clone();
scene.getObjectByName("polySurface3316").material = clonems.clone();
scene.getObjectByName("polySurface3316").material.roughness = 1;
scene.getObjectByName("polySurface3316").material.metalness = 0.1;
scene.getObjectByName("polySurface4326").position.x = -0.002;
toggleCarColor(2);
houshi.map(function (f) {
var o = scene.getObjectByName(f);
if (!o) {
return false;
}
var m = o.material.clone();
o.material = m.clone();
if (o.name == "painta_a31" || o.name == "painta_a34") {
o.material.color = new THREE.Color(0x525252);
o.material.envMap = envMapboli;
o.material.envMapIntensity = 5;
houshiObj.push(o);
} else {
o.material.color = new THREE.Color(0x102);
}
});
scene.getObjectByName("glass_ab11").material.color = new THREE.Color(
0x202020
);
scene.getObjectByName("glass_ab11").material.opacity = 0.85;
var cloneglass = scene.getObjectByName("glass_a10_cc7").material.clone();
scene.getObjectByName("glass_a10_cc7").material = clonems.clone();
scene.getObjectByName("glass_a10_cc7").material.color = new THREE.Color(
0x000000
);
scene.getObjectByName("glass_a10_cc7").material.opacity = 0.75;
scene.getObjectByName("glass_a10_cc7").material.transparent = true;
dispose(scene.getObjectByName("glassC_a2"));
dispose(scene.getObjectByName("glassC_a3"));
function ray() {
var Sx = "";
var Sy = "";
if (isMobile()) {
speed.phone = true;
Sx = event.touches[0].pageX;
Sy = event.touches[0].pageY;
} else {
Sx = event.clientX;
Sy = event.clientY;
}
var x = (Sx / $("#cc").width()) * 2 - 1;
var y = -(Sy / $("#cc").height()) * 2 + 1;
var standardVector = new THREE.Vector3(x, y, 0.5);
var worldVector = standardVector.unproject(camera);
var ray = worldVector.sub(camera.position).normalize();
var raycaster = new THREE.Raycaster(camera.position, ray);
var intersects = raycaster.intersectObjects(Bplace);
if (intersects.length > 0) {
var obj = intersects[0].object;
if (obj.name.indexOf("sprite") != -1) {
if (!obj.anStats) {
actions[obj.anType].reset().play();
obj.anStats = 1;
tweenPos(obj, obj.vec2);
} else {
tweenAn(actions[obj.anType]);
obj.anStats = 0;
tweenPos(obj, obj.vec1);
}
}
}
}
}
希望能够帮到大家