three|three贴图地面，雾气，克隆，贴图，打印所有模型，模型光源 three|前端

import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera'雾气 scene.fog = new THREE.Fog(0xffffff, 10, 1500); 地面 const geometry = new THREE.PlaneGeometry( 10000, 10000); const texture = new THREE.TextureLoader().load('/static/grass.jpg'); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat.set( 100, 100 ); const grassMaterial = new THREE.MeshBasicMaterial({map: texture}); const grass = new THREE.Mesh( geometry, grassMaterial ); grass.rotation.x = -0.5 * Math.PI; scene.add( grass ); 克隆 var box = new THREE.BoxGeometry(10,10,10); //创建一个立方体几何对象 var material = new THREE.MeshLambertMaterial({color:0x0000ff}); //材质对象 var mesh = new THREE.Mesh(box,material); var mesh2 = mesh.clone(); //克隆网格模型 mesh.translateX(20); scene.add(mesh,mesh2); 克隆模型 var group = new THREE.Group(); //加载模型 var loader = new GLTFLoader(); loader.load( '/static/gltf/wuxuanxian/aa/a.gltf', function ( gltf ) { gltf.scene.position.set(0, 13, 0); gltf.scene.rotation.set(4.65, 0, 0); group.add(gltf.scene) //克隆group对象 var dade = group.clone(); dade.translateX(50); scene.add(group,dade); }, undefined, function ( error ) { console.error( error ); }); 贴图 var box = new THREE.BoxGeometry(10,10,10); //创建一个立方体几何对象 //贴图 const texturea = new THREE.TextureLoader().load('/static/wood.jpg'); texturea.wrapS = THREE.RepeatWrapping; texturea.wrapT = THREE.RepeatWrapping; texturea.repeat.set( 2, 2 ); //贴图结束 const materials = new THREE.MeshBasicMaterial({map: texturea}); var mesh = new THREE.Mesh(box,materials); var mesh2 = mesh.clone(); //克隆网格模型 mesh.translateX(20); scene.add(mesh,mesh2); gltf贴图 var group = new THREE.Group(); /加载模型 var loader = new GLTFLoader(); loader.load( 'https://a.amap.com/jsapi_demos/static/gltf-online/shanghai/scene.gltf', function ( gltf ) { let model = gltf.scene; model.position.set(0, 13, 0); model.rotation.set(0, 0, 0); //遍历模型的每一部分 //traverse这个方法可以遍历调用者和调用者的所有后代 //所以这里的o就是模型的每一部分 model.traverse((o) => { //将图片作为纹理加载 let explosionTexture = new THREE.TextureLoader().load( '/static/wood.jpg' ); //调整纹理方向,默认为真。翻转图像的Y轴以匹配WebGL纹理坐标空间。 //此处不需要反转，当然也可以试试反转以后什么效果 explosionTexture.flipY = false; //将纹理图生成基础网格材质(meshBasicMaterial) const material = new THREE.MeshBasicMaterial({ map: explosionTexture }); //给模型每部分上材质 o.material = material; }); //加载外部模型时候基本上都是一个组合对象. group.add(model) scene.add(group); }, undefined, function ( error ) { console.error( error ); }); 打印所有模型 //加载模型 var loader = new GLTFLoader(); loader.load( 'https://a.amap.com/jsapi_demos/static/gltf-online/shanghai/scene.gltf', function ( gltf ) { // 打印所有的模型 console.log(dumpObject(gltf.scene).join('\n')); }, undefined, function ( error ) { console.error( error ); }); // 获取模型中所有的模型 function dumpObject(obj, lines = [], isLast = true, prefix = '') { const localPrefix = isLast ? '└─' : '├─'; lines.push(`${prefix}${prefix ? localPrefix : ''}${obj.name || '*no-name*'} [${obj.type}]`); const newPrefix = prefix + (isLast ? '' : '│ '); const lastNdx = obj.children.length - 1; obj.children.forEach((child, ndx) => { const isLast = ndx === lastNdx; dumpObject(child, lines, isLast, newPrefix); }); return lines; }

gltf和obj一样的模型大小控制

//模型大小控制 let model = gltf.scene; model.scale.set(100, 100, 100); // 添加模型 function initModel() { var mtlLoader = new THREE.MTLLoader(); mtlLoader.setPath("assets/models/obj_mtl/") mtlLoader.load('city.mtl', function(materials) { materials.preload(); var objLoader = new THREE.OBJLoader(); objLoader.setMaterials(materials); objLoader.load('assets/models/obj_mtl/city.obj', function(object) { mesh = object; mesh.scale.set(3, 3, 3); mesh.position.set(18, 0, 18); scene.add(mesh); }); }); }

【three|three贴图地面，雾气，克隆，贴图，打印所有模型，模型光源】obj贴图

obj(){ let mesh; var group = new THREE.Group(); var mtlLoader = new MTLLoader(); mtlLoader.load('/static/1519.mtl', function(materials) { materials.preload(); var objLoader = new OBJLoader(); objLoader.setMaterials(materials); objLoader.load('/static/1519.obj', function(object) { mesh = object; mesh.scale.set(2, 2, 2); mesh.position.set(0, 0, 0); mesh.traverse((o) => { //将图片作为纹理加载 let explosionTexture = new THREE.TextureLoader().load( '/static/wood.jpg' ); //调整纹理方向,默认为真。翻转图像的Y轴以匹配WebGL纹理坐标空间。 //此处不需要反转，当然也可以试试反转以后什么效果 explosionTexture.flipY = false; //将纹理图生成基础网格材质(meshBasicMaterial) const material = new THREE.MeshBasicMaterial({ map: explosionTexture }); //给模型每部分上材质 o.material = material; }); scene.add(mesh); }); }); },

模型光源