关键代码
var texture= THREE.ImageUtils.loadTexture("000874.png", null, function(t) {});// 基础Basic网格材质，不受光照影响 Phong网格材质受光照影响obj.children[0].material= new THREE.MeshBasicMaterial({// map:texture,//设置颜色纹理贴图map: texture,transparent: true,side:THREE.DoubleSide})obj.traverse(function(child){if (child instanceof THREE.Mesh){//将贴图赋于材质child.material.map = texture;//重点，没有该句会导致PNG无法正确显示透明效果child.material.transparent = true;child.material.alphaTest = 0.7;child.material.depthWrite = true;}});scene.add(obj);obj.children[0].scale.set(8,8,8);//网格模型缩放});
全部源码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><meta http-equiv="x-ua-compatible" content="IE=edge" /><title>文物鉴赏</title><style>*{touch-action: none;touch-action: pan-y;}body {margin: 0;overflow: hidden;/* 隐藏body窗口区域滚动条 *//*background: url("000083.jpg") center no-repeat;*/-webkit-background-size: cover;background-size: cover;}@media (max-width: 767px) {.mobile{display: block !important;}}.pc{display: block; !important;}@media (max-width: 767px) {.pc{display:none;}}</style><style rel="stylesheet" href="../v2.css"></style><!--引入three.js三维引擎--><script src="../../three.js-master/build/three.js"></script><!-- 引入threejs扩展控件OrbitControls.js --><script src="../../three.js-master/examples/js/controls/OrbitControls.js"></script><!-- 引入obj模型加载库OBJLoader.js --><script src="../../three.js-master/examples/js/loaders/OBJLoader.js"></script></head><body><script type="text/javascript">function browserRedirect() {var sUserAgent = navigator.userAgent.toLowerCase();var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";var bIsMidp = sUserAgent.match(/midp/i) == "midp";var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";var bIsAndroid = sUserAgent.match(/android/i) == "android";var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";//document.writeln("您的浏览设备为：");if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {//这是移动端document.getElementById('mobile').style.display = "block";document.getElementById('pc').style.display = "none";console.log("1111");} else {//这是pc端document.getElementById('mobile').style.display = "none";document.getElementById('pc').style.display = "block";console.log("2222");}}browserRedirect();</script><script>/*** 创建场景对象Scene*/var scene = new THREE.Scene();/*** OBJ文件加载 只加载obj文件中的几何信息，不加载材质文件.mtl*/var loader = new THREE.OBJLoader();var model = loader.load('000874.obj',function (obj) {obj.children[0].puteBoundingBox();obj.children[0].geometry.center();// console.log(- ( obj.children[0].geometry.boundingBox.max.x + obj.children[0].geometry.boundingBox.min.x ) / 2);// console.log(- ( obj.children[0].geometry.boundingBox.max.y + obj.children[0].geometry.boundingBox.min.y ) / 2);// console.log(- ( obj.children[0].geometry.boundingBox.max.z + obj.children[0].geometry.boundingBox.min.z ) / 2);// console.log( obj.children[0].geometry.center() );obj.rotation.y = THREE.Math.degToRad( 45 );obj.children[0].geometry.center();// 控制台查看返回结构：包含一个网格模型Mesh的组Group// console.log(obj);//加载纹理贴图// var texture = new THREE.TextureLoader().load('000874.png');var texture= THREE.ImageUtils.loadTexture("000874.png", null, function(t) {});// 基础Basic网格材质，不受光照影响 Phong网格材质受光照影响obj.children[0].material= new THREE.MeshBasicMaterial({// map:texture,//设置颜色纹理贴图map: texture,transparent: true,side:THREE.DoubleSide})obj.traverse(function(child){if (child instanceof THREE.Mesh){//将贴图赋于材质child.material.map = texture;//重点，没有该句会导致PNG无法正确显示透明效果child.material.transparent = true;child.material.alphaTest = 0.7;child.material.depthWrite = true;}});scene.add(obj);obj.children[0].scale.set(8,8,8);//网格模型缩放});/*** 光源设置*///点光源var point = new THREE.PointLight(0xffffff);point.position.set(400, 200, 300); //点光源位置scene.add(point); //点光源添加到场景中//环境光var ambient = new THREE.AmbientLight(0xffffff,0.3);scene.add(ambient);/*** 相机设置*/var width = window.innerWidth; //窗口宽度var height = window.innerHeight; //窗口高度var k = width / height; //窗口宽高比var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大//创建相机对象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({antialias: true, alpha: true});renderer.setSize(width, height); //设置渲染区域尺寸renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色renderer.setClearAlpha(0.8);document.body.appendChild(renderer.domElement); //body元素中插入canvas对象// 渲染函数function render() {renderer.render(scene, camera); //执行渲染操作// mesh.rotateY(1);//每次绕y轴旋转0.01弧度requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧}render();//创建控件对象 相机对象camera作为参数 控件可以监听鼠标的变化，改变相机对象的属性var controls = new THREE.OrbitControls(camera);controls.enablePan = false;controls.minDistance =900;controls.maxDistance = 900;controls.minZoom=1.2;controls.maxZoom=1.6;// controls.target = new THREE.Vector3(0,0,0);//监听鼠标事件，触发渲染函数，更新canvas画布渲染效果// controls.addEventListener('change', render);</script></body></html>
